Plot Widgets
Frame
jsx
// generated by @readrun/widgets — edit .readrun/widgets/frame-demo.tsx, then re-run rr
// @readrun/widgets@10f3ae2 — generated 2026-08-01T09:21:00Z
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
// globals:react
var require_react = __commonJS({
"globals:react"(exports, module) {
module.exports = globalThis.React;
}
});
// globals:react/jsx-runtime
var require_jsx_runtime = __commonJS({
"globals:react/jsx-runtime"(exports, module) {
var React9 = globalThis.React;
function jsx11(type, props, key) {
const nextProps = key === void 0 ? props : Object.assign({}, props, { key });
return React9.createElement(type, nextProps);
}
module.exports = { Fragment: React9.Fragment, jsx: jsx11, jsxs: jsx11 };
}
});
// docs/.readrun/widgets/frame-demo.tsx
var import_react8 = __toESM(require_react(), 1);
// src/widgets/plot/Frame.tsx
var import_react2 = __toESM(require_react(), 1);
// src/widgets/plot/Axis.tsx
var import_react = __toESM(require_react(), 1);
// src/widgets/plot/ticks.ts
function ticks(s, n) {
if (s.type === "ordinal") {
return [...s.domain];
}
const cs = s;
if (cs.type === "log") {
return logTicks(cs);
}
return linearTicks(cs, n);
}
function linearTicks(s, n) {
const [d0, d1] = s.domain;
const span = d1 - d0;
const count = Math.max(n, 2);
const roughStep = span / count;
const mag = Math.floor(Math.log10(roughStep));
const base = Math.pow(10, mag);
let step;
const r = roughStep / base;
if (r <= 1) {
step = base;
} else if (r <= 2) {
step = 2 * base;
} else if (r <= 5) {
step = 5 * base;
} else {
step = 10 * base;
}
const start = Math.ceil(d0 / step) * step;
const end = Math.floor(d1 / step) * step;
const result = [];
const numSteps = Math.round((end - start) / step);
for (let i = 0; i <= numSteps; i++) {
const v = start + i * step;
const rounded = parseFloat(v.toPrecision(12));
result.push(rounded);
}
if (result.length < 2) {
return [d0, d1];
}
return result;
}
function logTicks(s) {
const [d0, d1] = s.domain;
const result = [];
const logD0 = Math.log10(d0);
const logD1 = Math.log10(d1);
const startExp = Math.floor(logD0);
const endExp = Math.ceil(logD1);
for (let exp = startExp; exp <= endExp; exp++) {
const v = Math.pow(10, exp);
if (v >= d0 && v <= d1) {
result.push(v);
}
}
if (result.length < 2) {
return [d0, d1];
}
return result;
}
// src/widgets/plot/Axis.tsx
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
var TICK_SIZE = 6;
var AXIS_COLOR = "#64748b";
var LABEL_COLOR = "#475569";
var FONT = "ui-monospace, monospace";
var FONT_SIZE = 11;
function Axis({
scale: scale2,
side,
label,
tickFormat = String,
numTicks = 5
}) {
const isHorizontal = side === "bottom" || side === "top";
const tickValues = ticks(scale2, numTicks);
function tickPos(value) {
if (scale2.type === "ordinal") {
return scale2(value);
}
return scale2(value);
}
const [r0, r1] = scale2.range;
const lineLength = r1 - r0;
const tickDir = side === "bottom" || side === "right" ? 1 : -1;
if (isHorizontal) {
const labelOffset = side === "bottom" ? TICK_SIZE + 14 : -(TICK_SIZE + 14);
const axisLabelY = side === "bottom" ? TICK_SIZE + 28 : -(TICK_SIZE + 28);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: r0,
y1: 0,
x2: r1,
y2: 0,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
tickValues.map((v) => {
const x = tickPos(v);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${x}, 0)`, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: 0,
y1: 0,
x2: 0,
y2: tickDir * TICK_SIZE,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: 0,
y: labelOffset,
textAnchor: "middle",
dominantBaseline: side === "bottom" ? "hanging" : "auto",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR
},
children: tickFormat(v)
}
)
] }, String(v));
}),
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: (r0 + r1) / 2,
y: axisLabelY,
textAnchor: "middle",
dominantBaseline: side === "bottom" ? "hanging" : "auto",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR,
fontWeight: 500
},
children: label
}
)
] });
} else {
const labelOffset = side === "left" ? -(TICK_SIZE + 6) : TICK_SIZE + 6;
const textAnchor = side === "left" ? "end" : "start";
const axisLabelOffset = side === "left" ? -(TICK_SIZE + 36) : TICK_SIZE + 36;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: 0,
y1: r0,
x2: 0,
y2: lineLength < 0 ? r0 + lineLength : r1,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
tickValues.map((v) => {
const y = tickPos(v);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(0, ${y})`, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: 0,
y1: 0,
x2: tickDir * -TICK_SIZE,
y2: 0,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: labelOffset,
y: 0,
textAnchor,
dominantBaseline: "middle",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR
},
children: tickFormat(v)
}
)
] }, String(v));
}),
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: axisLabelOffset,
y: (r0 + (lineLength < 0 ? r0 + lineLength : r1)) / 2,
textAnchor: "middle",
transform: `rotate(-90, ${axisLabelOffset}, ${(r0 + (lineLength < 0 ? r0 + lineLength : r1)) / 2})`,
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR,
fontWeight: 500
},
children: label
}
)
] });
}
}
// src/widgets/plot/Frame.tsx
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
var DEFAULT_MARGIN = { top: 10, right: 10, bottom: 30, left: 40 };
function Frame({
width,
height,
margin: marginProp,
xScale,
yScale,
xLabel,
yLabel,
xTickFormat,
yTickFormat,
xNumTicks,
yNumTicks,
children
}) {
const margin = {
top: marginProp?.top ?? DEFAULT_MARGIN.top,
right: marginProp?.right ?? DEFAULT_MARGIN.right,
bottom: marginProp?.bottom ?? DEFAULT_MARGIN.bottom,
left: marginProp?.left ?? DEFAULT_MARGIN.left
};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const renderArgs = {
xScale,
yScale,
innerWidth,
innerHeight
};
const content = typeof children === "function" ? children(renderArgs) : children;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"svg",
{
viewBox: `0 0 ${width} ${height}`,
width,
height,
style: { display: "block", maxWidth: "100%" },
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${margin.left}, ${margin.top})`, children: [
content,
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: `translate(0, ${innerHeight})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Axis,
{
scale: xScale,
side: "bottom",
label: xLabel,
tickFormat: xTickFormat,
numTicks: xNumTicks
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: "translate(0, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Axis,
{
scale: yScale,
side: "left",
label: yLabel,
tickFormat: yTickFormat,
numTicks: yNumTicks
}
) })
] })
}
);
}
// src/widgets/plot/scale.ts
function makeLinear(domain, range) {
const [d0, d1] = domain;
const [r0, r1] = range;
const fn = (value) => {
return (value - d0) / (d1 - d0) * (r1 - r0) + r0;
};
const s = fn;
s.invert = (n) => (n - r0) / (r1 - r0) * (d1 - d0) + d0;
s.domain = domain;
s.range = range;
s.type = "linear";
return s;
}
function makeLog(domain, range, base) {
const [d0, d1] = domain;
if (d0 <= 0 || d1 <= 0) {
throw new Error(
`scale.log: domain values must be > 0, got [${d0}, ${d1}]`
);
}
const logBase = Math.log(base);
const logD0 = Math.log(d0) / logBase;
const logD1 = Math.log(d1) / logBase;
const [r0, r1] = range;
const fn = (value) => {
const logV = Math.log(value) / logBase;
return (logV - logD0) / (logD1 - logD0) * (r1 - r0) + r0;
};
const s = fn;
s.invert = (n) => {
const logV = (n - r0) / (r1 - r0) * (logD1 - logD0) + logD0;
return Math.pow(base, logV);
};
s.domain = domain;
s.range = range;
s.type = "log";
return s;
}
function makeOrdinal(domain, range) {
const [r0, r1] = range;
const bw = (r1 - r0) / domain.length;
const fn = (value) => {
const idx = domain.indexOf(value);
if (idx === -1) {
throw new Error(
`scale.ordinal: value ${String(value)} not in domain [${domain.join(", ")}]`
);
}
return r0 + idx * bw + bw / 2;
};
const s = fn;
s.domain = domain;
s.range = range;
s.bandwidth = bw;
s.type = "ordinal";
return s;
}
var scale = {
linear({
domain,
range
}) {
return makeLinear(domain, range);
},
log({
domain,
range,
base = 10
}) {
return makeLog(domain, range, base);
},
ordinal({
domain,
range
}) {
return makeOrdinal(domain, range);
}
};
// src/widgets/plot/Heatmap.tsx
var import_react3 = __toESM(require_react(), 1);
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
// src/widgets/plot/Histogram.tsx
var import_react4 = __toESM(require_react(), 1);
var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
// src/widgets/primitives/index.tsx
var import_react7 = __toESM(require_react());
// src/presentation/components/ui/Label.tsx
var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
// src/presentation/components/ui/Slider.tsx
var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
// src/presentation/components/ui/Switch.tsx
var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
// src/widgets/primitives/WidgetLayout.tsx
var import_react5 = __toESM(require_react(), 1);
var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
function VisualSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
}
function ControlsSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
}
function AsideSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
}
VisualSlot.__widgetSlot = "visual";
ControlsSlot.__widgetSlot = "controls";
AsideSlot.__widgetSlot = "aside";
function extractSlots(children) {
const slots = {};
import_react5.default.Children.forEach(children, (child) => {
if (import_react5.default.isValidElement(child)) {
const t = child.type;
if (t?.__widgetSlot) {
slots[t.__widgetSlot] = child;
}
}
});
return slots;
}
function WidgetLayoutImpl(props) {
const arrangement = props.arrangement ?? "visual-left";
const slots = extractSlots(props.children);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `readrun-widget readrun-widget--${arrangement}`, children: [
(props.title || props.subtitle || props.headMeta) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"div",
{
className: "readrun-widget__head",
style: { display: "flex", justifyContent: "space-between" },
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
props.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "readrun-widget__title", children: props.title }),
props.subtitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "readrun-widget__subtitle", children: props.subtitle })
] }),
props.headMeta && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: props.headMeta })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "readrun-widget__body", children: [
slots["visual"] && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "readrun-widget__visual", children: slots["visual"] }),
(slots["controls"] || slots["aside"]) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "readrun-widget__sidebar", children: [
slots["controls"] && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "readrun-widget__controls", children: slots["controls"] }),
slots["aside"] && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "readrun-widget__aside", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "readrun-widget__aside-label", children: "What to notice" }),
slots["aside"]
] })
] })
] })
] });
}
var WidgetLayout = Object.assign(WidgetLayoutImpl, {
Visual: VisualSlot,
Controls: ControlsSlot,
Aside: AsideSlot
});
// src/widgets/primitives/FormulaSteps.tsx
var import_react6 = __toESM(require_react(), 1);
var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
// src/widgets/primitives/index.tsx
function Shell({
title,
meta,
children
}) {
return /* @__PURE__ */ import_react7.default.createElement("div", { className: "viz-shell" }, (title || meta) && /* @__PURE__ */ import_react7.default.createElement("div", { className: "viz-shell-head" }, title && /* @__PURE__ */ import_react7.default.createElement("h2", null, title), meta && /* @__PURE__ */ import_react7.default.createElement("div", { className: "viz-shell-meta" }, meta)), children);
}
function Sub({ children }) {
return /* @__PURE__ */ import_react7.default.createElement("p", { className: "viz-sub" }, children);
}
function Stage({
children,
style
}) {
return /* @__PURE__ */ import_react7.default.createElement("div", { className: "viz-stage", style }, children);
}
// docs/.readrun/widgets/frame-demo.tsx
var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
function FrameDemo() {
const xScale = scale.linear({ domain: [0, 2 * Math.PI], range: [0, 560] });
const yScale = scale.linear({ domain: [-1.2, 1.2], range: [160, 0] });
const sinePoints = [];
const cosPoints = [];
for (let i = 0; i <= 120; i++) {
const t = i / 120 * 2 * Math.PI;
sinePoints.push([t, Math.sin(t)]);
cosPoints.push([t, Math.cos(t)]);
}
const sinePath = "M " + sinePoints.map(([x, y]) => `${xScale(x)} ${yScale(y)}`).join(" L ");
const cosPath = "M " + cosPoints.map(([x, y]) => `${xScale(x)} ${yScale(y)}`).join(" L ");
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Shell, { title: "Frame + scale + Axis", children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Sub, { children: "Plot scaffold: Frame wraps an SVG with axes. Children are a render-prop receiving scaled coordinates." }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Stage, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Frame, { width: 640, height: 240, xScale, yScale, xLabel: "t (radians)", yLabel: "amplitude", children: () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { fill: "none", stroke: "#4f46e5", strokeWidth: 2, d: sinePath }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { fill: "none", stroke: "#0ea5e9", strokeWidth: 2, strokeDasharray: "5 3", d: cosPath })
] }) }) }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", gap: 16, marginTop: 10, fontSize: 11, color: "#64748b" }, children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { display: "inline-block", width: 20, height: 2, background: "#4f46e5", borderRadius: 1 } }),
"sin(t)"
] }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { display: "inline-block", width: 20, height: 2, background: "#0ea5e9", borderRadius: 1, borderTop: "2px dashed #0ea5e9" } }),
"cos(t)"
] })
] })
] });
}
// docs/.readrun/widgets/frame-demo.readrun-entry.ts
render(<FrameDemo />);
Heatmap
jsx
// generated by @readrun/widgets — edit .readrun/widgets/heatmap-demo.tsx, then re-run rr
// @readrun/widgets@10f3ae2 — generated 2026-08-01T09:21:00Z
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
// globals:react
var require_react = __commonJS({
"globals:react"(exports, module) {
module.exports = globalThis.React;
}
});
// globals:react/jsx-runtime
var require_jsx_runtime = __commonJS({
"globals:react/jsx-runtime"(exports, module) {
var React9 = globalThis.React;
function jsx11(type, props, key) {
const nextProps = key === void 0 ? props : Object.assign({}, props, { key });
return React9.createElement(type, nextProps);
}
module.exports = { Fragment: React9.Fragment, jsx: jsx11, jsxs: jsx11 };
}
});
// docs/.readrun/widgets/heatmap-demo.tsx
var import_react8 = __toESM(require_react(), 1);
// src/widgets/plot/Frame.tsx
var import_react2 = __toESM(require_react(), 1);
// src/widgets/plot/Axis.tsx
var import_react = __toESM(require_react(), 1);
// src/widgets/plot/ticks.ts
function ticks(s, n) {
if (s.type === "ordinal") {
return [...s.domain];
}
const cs = s;
if (cs.type === "log") {
return logTicks(cs);
}
return linearTicks(cs, n);
}
function linearTicks(s, n) {
const [d0, d1] = s.domain;
const span = d1 - d0;
const count = Math.max(n, 2);
const roughStep = span / count;
const mag = Math.floor(Math.log10(roughStep));
const base = Math.pow(10, mag);
let step;
const r = roughStep / base;
if (r <= 1) {
step = base;
} else if (r <= 2) {
step = 2 * base;
} else if (r <= 5) {
step = 5 * base;
} else {
step = 10 * base;
}
const start = Math.ceil(d0 / step) * step;
const end = Math.floor(d1 / step) * step;
const result = [];
const numSteps = Math.round((end - start) / step);
for (let i = 0; i <= numSteps; i++) {
const v = start + i * step;
const rounded = parseFloat(v.toPrecision(12));
result.push(rounded);
}
if (result.length < 2) {
return [d0, d1];
}
return result;
}
function logTicks(s) {
const [d0, d1] = s.domain;
const result = [];
const logD0 = Math.log10(d0);
const logD1 = Math.log10(d1);
const startExp = Math.floor(logD0);
const endExp = Math.ceil(logD1);
for (let exp = startExp; exp <= endExp; exp++) {
const v = Math.pow(10, exp);
if (v >= d0 && v <= d1) {
result.push(v);
}
}
if (result.length < 2) {
return [d0, d1];
}
return result;
}
// src/widgets/plot/Axis.tsx
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
var TICK_SIZE = 6;
var AXIS_COLOR = "#64748b";
var LABEL_COLOR = "#475569";
var FONT = "ui-monospace, monospace";
var FONT_SIZE = 11;
function Axis({
scale: scale2,
side,
label,
tickFormat = String,
numTicks = 5
}) {
const isHorizontal = side === "bottom" || side === "top";
const tickValues = ticks(scale2, numTicks);
function tickPos(value) {
if (scale2.type === "ordinal") {
return scale2(value);
}
return scale2(value);
}
const [r0, r1] = scale2.range;
const lineLength = r1 - r0;
const tickDir = side === "bottom" || side === "right" ? 1 : -1;
if (isHorizontal) {
const labelOffset = side === "bottom" ? TICK_SIZE + 14 : -(TICK_SIZE + 14);
const axisLabelY = side === "bottom" ? TICK_SIZE + 28 : -(TICK_SIZE + 28);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: r0,
y1: 0,
x2: r1,
y2: 0,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
tickValues.map((v) => {
const x = tickPos(v);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${x}, 0)`, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: 0,
y1: 0,
x2: 0,
y2: tickDir * TICK_SIZE,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: 0,
y: labelOffset,
textAnchor: "middle",
dominantBaseline: side === "bottom" ? "hanging" : "auto",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR
},
children: tickFormat(v)
}
)
] }, String(v));
}),
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: (r0 + r1) / 2,
y: axisLabelY,
textAnchor: "middle",
dominantBaseline: side === "bottom" ? "hanging" : "auto",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR,
fontWeight: 500
},
children: label
}
)
] });
} else {
const labelOffset = side === "left" ? -(TICK_SIZE + 6) : TICK_SIZE + 6;
const textAnchor = side === "left" ? "end" : "start";
const axisLabelOffset = side === "left" ? -(TICK_SIZE + 36) : TICK_SIZE + 36;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: 0,
y1: r0,
x2: 0,
y2: lineLength < 0 ? r0 + lineLength : r1,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
tickValues.map((v) => {
const y = tickPos(v);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(0, ${y})`, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: 0,
y1: 0,
x2: tickDir * -TICK_SIZE,
y2: 0,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: labelOffset,
y: 0,
textAnchor,
dominantBaseline: "middle",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR
},
children: tickFormat(v)
}
)
] }, String(v));
}),
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: axisLabelOffset,
y: (r0 + (lineLength < 0 ? r0 + lineLength : r1)) / 2,
textAnchor: "middle",
transform: `rotate(-90, ${axisLabelOffset}, ${(r0 + (lineLength < 0 ? r0 + lineLength : r1)) / 2})`,
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR,
fontWeight: 500
},
children: label
}
)
] });
}
}
// src/widgets/plot/Frame.tsx
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
var DEFAULT_MARGIN = { top: 10, right: 10, bottom: 30, left: 40 };
function Frame({
width,
height,
margin: marginProp,
xScale,
yScale,
xLabel,
yLabel,
xTickFormat,
yTickFormat,
xNumTicks,
yNumTicks,
children
}) {
const margin = {
top: marginProp?.top ?? DEFAULT_MARGIN.top,
right: marginProp?.right ?? DEFAULT_MARGIN.right,
bottom: marginProp?.bottom ?? DEFAULT_MARGIN.bottom,
left: marginProp?.left ?? DEFAULT_MARGIN.left
};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const renderArgs = {
xScale,
yScale,
innerWidth,
innerHeight
};
const content = typeof children === "function" ? children(renderArgs) : children;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"svg",
{
viewBox: `0 0 ${width} ${height}`,
width,
height,
style: { display: "block", maxWidth: "100%" },
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${margin.left}, ${margin.top})`, children: [
content,
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: `translate(0, ${innerHeight})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Axis,
{
scale: xScale,
side: "bottom",
label: xLabel,
tickFormat: xTickFormat,
numTicks: xNumTicks
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: "translate(0, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Axis,
{
scale: yScale,
side: "left",
label: yLabel,
tickFormat: yTickFormat,
numTicks: yNumTicks
}
) })
] })
}
);
}
// src/widgets/plot/scale.ts
function makeLinear(domain, range) {
const [d0, d1] = domain;
const [r0, r1] = range;
const fn = (value) => {
return (value - d0) / (d1 - d0) * (r1 - r0) + r0;
};
const s = fn;
s.invert = (n) => (n - r0) / (r1 - r0) * (d1 - d0) + d0;
s.domain = domain;
s.range = range;
s.type = "linear";
return s;
}
function makeLog(domain, range, base) {
const [d0, d1] = domain;
if (d0 <= 0 || d1 <= 0) {
throw new Error(
`scale.log: domain values must be > 0, got [${d0}, ${d1}]`
);
}
const logBase = Math.log(base);
const logD0 = Math.log(d0) / logBase;
const logD1 = Math.log(d1) / logBase;
const [r0, r1] = range;
const fn = (value) => {
const logV = Math.log(value) / logBase;
return (logV - logD0) / (logD1 - logD0) * (r1 - r0) + r0;
};
const s = fn;
s.invert = (n) => {
const logV = (n - r0) / (r1 - r0) * (logD1 - logD0) + logD0;
return Math.pow(base, logV);
};
s.domain = domain;
s.range = range;
s.type = "log";
return s;
}
function makeOrdinal(domain, range) {
const [r0, r1] = range;
const bw = (r1 - r0) / domain.length;
const fn = (value) => {
const idx = domain.indexOf(value);
if (idx === -1) {
throw new Error(
`scale.ordinal: value ${String(value)} not in domain [${domain.join(", ")}]`
);
}
return r0 + idx * bw + bw / 2;
};
const s = fn;
s.domain = domain;
s.range = range;
s.bandwidth = bw;
s.type = "ordinal";
return s;
}
var scale = {
linear({
domain,
range
}) {
return makeLinear(domain, range);
},
log({
domain,
range,
base = 10
}) {
return makeLog(domain, range, base);
},
ordinal({
domain,
range
}) {
return makeOrdinal(domain, range);
}
};
// src/widgets/plot/Heatmap.tsx
var import_react3 = __toESM(require_react(), 1);
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
function dataExtent(data, invalid = (v) => !Number.isFinite(v)) {
const nx = data.length;
if (nx === 0) return null;
const ny = data[0].length;
if (ny === 0) return null;
let lo = Infinity;
let hi = -Infinity;
for (let i = 0; i < nx; i++) {
const col = data[i];
for (let j = 0; j < ny; j++) {
const v = col[j];
if (invalid(v)) continue;
if (v < lo) lo = v;
if (v > hi) hi = v;
}
}
if (!Number.isFinite(lo) || !Number.isFinite(hi)) return null;
return [lo, hi];
}
var defaultInvalid = (v) => !Number.isFinite(v);
function Heatmap({
data,
width,
height,
colorScale,
domain,
invalid = defaultInvalid,
flipY = true,
onCellClick
}) {
const nx = data.length;
const ny = nx > 0 ? data[0].length : 0;
if (nx === 0 || ny === 0) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", {});
}
let lo;
let hi;
if (domain) {
[lo, hi] = domain;
} else {
const ex = dataExtent(data, invalid);
if (!ex) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", {});
[lo, hi] = ex;
}
const span = hi - lo || 1;
const cw = width / nx;
const ch = height / ny;
const eps = 0.5;
const cells = [];
for (let i = 0; i < nx; i++) {
const col = data[i];
for (let j = 0; j < ny; j++) {
const v = col[j];
if (invalid(v)) continue;
const t = Math.max(0, Math.min(1, (v - lo) / span));
const x = i * cw;
const y = flipY ? height - (j + 1) * ch : j * ch;
cells.push(
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"rect",
{
x,
y,
width: cw + eps,
height: ch + eps,
fill: colorScale(t),
...onCellClick && {
style: { cursor: "pointer" },
onClick: () => onCellClick(i, j, v)
}
},
`${i}-${j}`
)
);
}
}
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { children: cells });
}
// src/widgets/plot/Histogram.tsx
var import_react4 = __toESM(require_react(), 1);
var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
// src/widgets/draw/palette.ts
function parseHex(hex) {
if (!/^#[0-9a-fA-F]{6}$/.test(hex)) {
throw new Error(
`palette.sequential: invalid hex colour "${hex}". Only 6-digit hex (#rrggbb) is accepted.`
);
}
const v = parseInt(hex.slice(1), 16);
return [v >> 16 & 255, v >> 8 & 255, v & 255];
}
function toHex(r, g, b) {
const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
return "#" + [clamp(r), clamp(g), clamp(b)].map((c) => c.toString(16).padStart(2, "0")).join("");
}
var VIRIDIS_STOPS = [
"#440154",
"#482475",
"#414487",
"#355f8d",
"#2a788e",
"#21918c",
"#22a884",
"#44bf70",
"#7ad151",
"#bddf26",
"#fde725"
];
var MAGMA_STOPS = [
"#000004",
"#180f3d",
"#440f76",
"#721f81",
"#9e2f7f",
"#cd4071",
"#f1605d",
"#fd9668",
"#feca8d",
"#fcfdbf"
];
var PLASMA_STOPS = [
"#0d0887",
"#46039f",
"#7201a8",
"#9c179e",
"#bd3786",
"#d8576b",
"#ed7953",
"#fb9f3a",
"#fdc926",
"#f0f921"
];
function sequential(stops, t) {
const parsed = stops.map(parseHex);
const clamped = Math.max(0, Math.min(1, t));
const n = parsed.length;
if (n === 1) return toHex(...parsed[0]);
const scaled = clamped * (n - 1);
const lo = Math.min(Math.floor(scaled), n - 2);
const hi = lo + 1;
const localT = scaled - lo;
const [r0, g0, b0] = parsed[lo];
const [r1, g1, b1] = parsed[hi];
return toHex(r0 + (r1 - r0) * localT, g0 + (g1 - g0) * localT, b0 + (b1 - b0) * localT);
}
var palette = {
math: {
accent: "#4f46e5",
// indigo-600
accent2: "#0ea5e9",
// sky-500
dim: "#cbd5e1",
// slate-300
surface: "#ffffff",
text: "#0f172a",
// slate-900
textDim: "#475569"
// slate-600
},
neuro: {
accent: "#f87171",
// red-400 — spike colour
accent2: "#fbbf24",
// amber-400 — threshold marker
dim: "#475569",
// slate-600 — axis lines on dark bg
surface: "#1e293b",
// slate-800 — dark stage
text: "#f1f5f9",
// slate-100
textDim: "#94a3b8"
// slate-400
},
network: {
// six-stop sequential for degree-coloured nodes lives in sequential();
// these fields cover axes, labels, stage
accent: "#6366f1",
// indigo-500 — low-degree nodes
accent2: "#ef4444",
// red-500 — high-degree nodes
dim: "#334155",
// slate-700
surface: "#0f172a",
// slate-900
text: "#f8fafc",
// slate-50
textDim: "#94a3b8"
// slate-400
},
algo: {
accent: "#0ea5e9",
// sky-500 — compare highlight
accent2: "#f43f5e",
// rose-500 — swap highlight
dim: "#334155",
// slate-700
surface: "#0f172a",
// slate-900
text: "#f8fafc",
textDim: "#94a3b8"
},
sequential,
viridis: (t) => sequential(VIRIDIS_STOPS, t),
magma: (t) => sequential(MAGMA_STOPS, t),
plasma: (t) => sequential(PLASMA_STOPS, t),
viridisStops: VIRIDIS_STOPS,
magmaStops: MAGMA_STOPS,
plasmaStops: PLASMA_STOPS
};
// src/widgets/primitives/index.tsx
var import_react7 = __toESM(require_react());
// src/presentation/components/ui/Label.tsx
var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
// src/presentation/components/ui/Slider.tsx
var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
// src/presentation/components/ui/Switch.tsx
var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
// src/widgets/primitives/WidgetLayout.tsx
var import_react5 = __toESM(require_react(), 1);
var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
function VisualSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
}
function ControlsSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
}
function AsideSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children });
}
VisualSlot.__widgetSlot = "visual";
ControlsSlot.__widgetSlot = "controls";
AsideSlot.__widgetSlot = "aside";
function extractSlots(children) {
const slots = {};
import_react5.default.Children.forEach(children, (child) => {
if (import_react5.default.isValidElement(child)) {
const t = child.type;
if (t?.__widgetSlot) {
slots[t.__widgetSlot] = child;
}
}
});
return slots;
}
function WidgetLayoutImpl(props) {
const arrangement = props.arrangement ?? "visual-left";
const slots = extractSlots(props.children);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `readrun-widget readrun-widget--${arrangement}`, children: [
(props.title || props.subtitle || props.headMeta) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"div",
{
className: "readrun-widget__head",
style: { display: "flex", justifyContent: "space-between" },
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
props.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "readrun-widget__title", children: props.title }),
props.subtitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "readrun-widget__subtitle", children: props.subtitle })
] }),
props.headMeta && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: props.headMeta })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "readrun-widget__body", children: [
slots["visual"] && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "readrun-widget__visual", children: slots["visual"] }),
(slots["controls"] || slots["aside"]) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "readrun-widget__sidebar", children: [
slots["controls"] && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "readrun-widget__controls", children: slots["controls"] }),
slots["aside"] && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "readrun-widget__aside", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "readrun-widget__aside-label", children: "What to notice" }),
slots["aside"]
] })
] })
] })
] });
}
var WidgetLayout = Object.assign(WidgetLayoutImpl, {
Visual: VisualSlot,
Controls: ControlsSlot,
Aside: AsideSlot
});
// src/widgets/primitives/FormulaSteps.tsx
var import_react6 = __toESM(require_react(), 1);
var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
// src/widgets/primitives/index.tsx
function Shell({
title,
meta,
children
}) {
return /* @__PURE__ */ import_react7.default.createElement("div", { className: "viz-shell" }, (title || meta) && /* @__PURE__ */ import_react7.default.createElement("div", { className: "viz-shell-head" }, title && /* @__PURE__ */ import_react7.default.createElement("h2", null, title), meta && /* @__PURE__ */ import_react7.default.createElement("div", { className: "viz-shell-meta" }, meta)), children);
}
function Sub({ children }) {
return /* @__PURE__ */ import_react7.default.createElement("p", { className: "viz-sub" }, children);
}
function SectionLabel({
children,
style
}) {
return /* @__PURE__ */ import_react7.default.createElement("div", { className: "viz-section-label", style }, children);
}
function Tabs({
value,
onChange,
items
}) {
return /* @__PURE__ */ import_react7.default.createElement("div", { className: "viz-tabs" }, items.map((it) => /* @__PURE__ */ import_react7.default.createElement(
"button",
{
key: it.id,
className: `viz-tab${value === it.id ? " active" : ""}`,
onClick: () => onChange(it.id)
},
it.label
)));
}
function Stat({
label,
value,
color
}) {
return /* @__PURE__ */ import_react7.default.createElement("span", { className: "viz-stat" }, /* @__PURE__ */ import_react7.default.createElement("span", null, label), /* @__PURE__ */ import_react7.default.createElement("strong", { className: "viz-stat-value", style: color ? { color } : void 0 }, value));
}
// docs/.readrun/widgets/heatmap-demo.tsx
var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
var MAPS = [
{ id: "viridis", label: "viridis" },
{ id: "magma", label: "magma" },
{ id: "plasma", label: "plasma" }
];
function field(x, y) {
return 1.2 * (x - 1) * (x - 1) + 0.6 * (y + 0.5) * (y + 0.5) + 0.6 * Math.sin(2 * x) * Math.cos(2 * y);
}
var N = 60;
var X_DOMAIN = [-2, 4];
var Y_DOMAIN = [-2, 2];
var grid = [];
for (let i = 0; i < N; i++) {
grid[i] = [];
for (let j = 0; j < N; j++) {
const x = X_DOMAIN[0] + i / (N - 1) * (X_DOMAIN[1] - X_DOMAIN[0]);
const y = Y_DOMAIN[0] + j / (N - 1) * (Y_DOMAIN[1] - Y_DOMAIN[0]);
grid[i][j] = field(x, y);
}
}
var W = 480;
var H = 360;
var INNER_W = W - 50;
var INNER_H = H - 40;
function HeatmapDemo() {
const [cmap, setCmap] = (0, import_react8.useState)("viridis");
const [picked, setPicked] = (0, import_react8.useState)(null);
const xScale = scale.linear({ domain: X_DOMAIN, range: [0, INNER_W] });
const yScale = scale.linear({ domain: Y_DOMAIN, range: [INNER_H, 0] });
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Shell, { title: "Heatmap + perceptual colormaps", children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Sub, { children: "Click any cell to pick a sample. Heatmap renders inside Frame's render-prop \u2014 cells share viewBox coordinates with the axes." }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Tabs, { value: cmap, onChange: (id) => setCmap(id), items: MAPS }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
Frame,
{
width: W,
height: H,
xScale,
yScale,
margin: { top: 10, right: 10, bottom: 30, left: 40 },
xLabel: "x",
yLabel: "y",
children: ({ innerWidth, innerHeight }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
Heatmap,
{
data: grid,
width: innerWidth,
height: innerHeight,
colorScale: palette[cmap],
onCellClick: (i, j, v) => setPicked({ i, j, v })
}
),
picked && (() => {
const x = X_DOMAIN[0] + picked.i / (N - 1) * (X_DOMAIN[1] - X_DOMAIN[0]);
const y = Y_DOMAIN[0] + picked.j / (N - 1) * (Y_DOMAIN[1] - Y_DOMAIN[0]);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"circle",
{
cx: xScale(x),
cy: yScale(y),
r: 6,
fill: "var(--accent)",
stroke: "var(--bg)",
strokeWidth: 2
}
);
})()
] })
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SectionLabel, { style: { marginTop: 16 }, children: "Sampled cell" }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", gap: 16 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Stat, { label: "i, j", value: picked ? `${picked.i}, ${picked.j}` : "\u2014" }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Stat, { label: "value", value: picked ? picked.v.toFixed(3) : "\u2014" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SectionLabel, { style: { marginTop: 16 }, children: "Colormap stops" }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", height: 24, border: "1px solid var(--border)" }, children: Array.from({ length: 60 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { flex: 1, background: palette[cmap](i / 59) } }, i)) })
] });
}
// docs/.readrun/widgets/heatmap-demo.readrun-entry.ts
render(<HeatmapDemo />);
Histogram
jsx
// generated by @readrun/widgets — edit .readrun/widgets/histogram-demo.tsx, then re-run rr
// @readrun/widgets@10f3ae2 — generated 2026-08-01T09:21:00Z
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
// globals:react
var require_react = __commonJS({
"globals:react"(exports, module) {
module.exports = globalThis.React;
}
});
// globals:react/jsx-runtime
var require_jsx_runtime = __commonJS({
"globals:react/jsx-runtime"(exports, module) {
var React37 = globalThis.React;
function jsx11(type, props, key) {
const nextProps = key === void 0 ? props : Object.assign({}, props, { key });
return React37.createElement(type, nextProps);
}
module.exports = { Fragment: React37.Fragment, jsx: jsx11, jsxs: jsx11 };
}
});
// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
var require_use_sync_external_store_shim_development = __commonJS({
"node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
"use strict";
(function() {
function is(x, y) {
return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
}
function useSyncExternalStore$2(subscribe2, getSnapshot2) {
didWarnOld18Alpha || void 0 === React37.startTransition || (didWarnOld18Alpha = true, console.error(
"You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
));
var value = getSnapshot2();
if (!didWarnUncachedGetSnapshot) {
var cachedValue = getSnapshot2();
objectIs(value, cachedValue) || (console.error(
"The result of getSnapshot should be cached to avoid an infinite loop"
), didWarnUncachedGetSnapshot = true);
}
cachedValue = useState8({
inst: { value, getSnapshot: getSnapshot2 }
});
var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
useLayoutEffect2(
function() {
inst.value = value;
inst.getSnapshot = getSnapshot2;
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
},
[subscribe2, value, getSnapshot2]
);
useEffect6(
function() {
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
return subscribe2(function() {
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
});
},
[subscribe2]
);
useDebugValue(value);
return value;
}
function checkIfSnapshotChanged(inst) {
var latestGetSnapshot = inst.getSnapshot;
inst = inst.value;
try {
var nextValue = latestGetSnapshot();
return !objectIs(inst, nextValue);
} catch (error2) {
return true;
}
}
function useSyncExternalStore$1(subscribe2, getSnapshot2) {
return getSnapshot2();
}
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
var React37 = require_react(), objectIs = "function" === typeof Object.is ? Object.is : is, useState8 = React37.useState, useEffect6 = React37.useEffect, useLayoutEffect2 = React37.useLayoutEffect, useDebugValue = React37.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
exports.useSyncExternalStore = void 0 !== React37.useSyncExternalStore ? React37.useSyncExternalStore : shim;
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
})();
}
});
// node_modules/use-sync-external-store/shim/index.js
var require_shim = __commonJS({
"node_modules/use-sync-external-store/shim/index.js"(exports, module) {
"use strict";
if (false) {
module.exports = null;
} else {
module.exports = require_use_sync_external_store_shim_development();
}
}
});
// docs/.readrun/widgets/histogram-demo.tsx
var import_react9 = __toESM(require_react(), 1);
// src/widgets/plot/Frame.tsx
var import_react2 = __toESM(require_react(), 1);
// src/widgets/plot/Axis.tsx
var import_react = __toESM(require_react(), 1);
// src/widgets/plot/ticks.ts
function ticks(s, n) {
if (s.type === "ordinal") {
return [...s.domain];
}
const cs = s;
if (cs.type === "log") {
return logTicks(cs);
}
return linearTicks(cs, n);
}
function linearTicks(s, n) {
const [d0, d1] = s.domain;
const span = d1 - d0;
const count = Math.max(n, 2);
const roughStep = span / count;
const mag = Math.floor(Math.log10(roughStep));
const base = Math.pow(10, mag);
let step;
const r2 = roughStep / base;
if (r2 <= 1) {
step = base;
} else if (r2 <= 2) {
step = 2 * base;
} else if (r2 <= 5) {
step = 5 * base;
} else {
step = 10 * base;
}
const start = Math.ceil(d0 / step) * step;
const end = Math.floor(d1 / step) * step;
const result = [];
const numSteps = Math.round((end - start) / step);
for (let i = 0; i <= numSteps; i++) {
const v = start + i * step;
const rounded = parseFloat(v.toPrecision(12));
result.push(rounded);
}
if (result.length < 2) {
return [d0, d1];
}
return result;
}
function logTicks(s) {
const [d0, d1] = s.domain;
const result = [];
const logD0 = Math.log10(d0);
const logD1 = Math.log10(d1);
const startExp = Math.floor(logD0);
const endExp = Math.ceil(logD1);
for (let exp = startExp; exp <= endExp; exp++) {
const v = Math.pow(10, exp);
if (v >= d0 && v <= d1) {
result.push(v);
}
}
if (result.length < 2) {
return [d0, d1];
}
return result;
}
// src/widgets/plot/Axis.tsx
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
var TICK_SIZE = 6;
var AXIS_COLOR = "#64748b";
var LABEL_COLOR = "#475569";
var FONT = "ui-monospace, monospace";
var FONT_SIZE = 11;
function Axis({
scale: scale2,
side,
label,
tickFormat = String,
numTicks = 5
}) {
const isHorizontal = side === "bottom" || side === "top";
const tickValues = ticks(scale2, numTicks);
function tickPos(value) {
if (scale2.type === "ordinal") {
return scale2(value);
}
return scale2(value);
}
const [r0, r1] = scale2.range;
const lineLength = r1 - r0;
const tickDir = side === "bottom" || side === "right" ? 1 : -1;
if (isHorizontal) {
const labelOffset = side === "bottom" ? TICK_SIZE + 14 : -(TICK_SIZE + 14);
const axisLabelY = side === "bottom" ? TICK_SIZE + 28 : -(TICK_SIZE + 28);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: r0,
y1: 0,
x2: r1,
y2: 0,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
tickValues.map((v) => {
const x = tickPos(v);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${x}, 0)`, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: 0,
y1: 0,
x2: 0,
y2: tickDir * TICK_SIZE,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: 0,
y: labelOffset,
textAnchor: "middle",
dominantBaseline: side === "bottom" ? "hanging" : "auto",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR
},
children: tickFormat(v)
}
)
] }, String(v));
}),
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: (r0 + r1) / 2,
y: axisLabelY,
textAnchor: "middle",
dominantBaseline: side === "bottom" ? "hanging" : "auto",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR,
fontWeight: 500
},
children: label
}
)
] });
} else {
const labelOffset = side === "left" ? -(TICK_SIZE + 6) : TICK_SIZE + 6;
const textAnchor = side === "left" ? "end" : "start";
const axisLabelOffset = side === "left" ? -(TICK_SIZE + 36) : TICK_SIZE + 36;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: 0,
y1: r0,
x2: 0,
y2: lineLength < 0 ? r0 + lineLength : r1,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
tickValues.map((v) => {
const y = tickPos(v);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(0, ${y})`, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"line",
{
x1: 0,
y1: 0,
x2: tickDir * -TICK_SIZE,
y2: 0,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: labelOffset,
y: 0,
textAnchor,
dominantBaseline: "middle",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR
},
children: tickFormat(v)
}
)
] }, String(v));
}),
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
x: axisLabelOffset,
y: (r0 + (lineLength < 0 ? r0 + lineLength : r1)) / 2,
textAnchor: "middle",
transform: `rotate(-90, ${axisLabelOffset}, ${(r0 + (lineLength < 0 ? r0 + lineLength : r1)) / 2})`,
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR,
fontWeight: 500
},
children: label
}
)
] });
}
}
// src/widgets/plot/Frame.tsx
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
var DEFAULT_MARGIN = { top: 10, right: 10, bottom: 30, left: 40 };
function Frame({
width,
height,
margin: marginProp,
xScale,
yScale,
xLabel,
yLabel,
xTickFormat,
yTickFormat,
xNumTicks,
yNumTicks,
children
}) {
const margin = {
top: marginProp?.top ?? DEFAULT_MARGIN.top,
right: marginProp?.right ?? DEFAULT_MARGIN.right,
bottom: marginProp?.bottom ?? DEFAULT_MARGIN.bottom,
left: marginProp?.left ?? DEFAULT_MARGIN.left
};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const renderArgs = {
xScale,
yScale,
innerWidth,
innerHeight
};
const content = typeof children === "function" ? children(renderArgs) : children;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"svg",
{
viewBox: `0 0 ${width} ${height}`,
width,
height,
style: { display: "block", maxWidth: "100%" },
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${margin.left}, ${margin.top})`, children: [
content,
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: `translate(0, ${innerHeight})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Axis,
{
scale: xScale,
side: "bottom",
label: xLabel,
tickFormat: xTickFormat,
numTicks: xNumTicks
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: "translate(0, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Axis,
{
scale: yScale,
side: "left",
label: yLabel,
tickFormat: yTickFormat,
numTicks: yNumTicks
}
) })
] })
}
);
}
// src/widgets/plot/scale.ts
function makeLinear(domain, range) {
const [d0, d1] = domain;
const [r0, r1] = range;
const fn = (value) => {
return (value - d0) / (d1 - d0) * (r1 - r0) + r0;
};
const s = fn;
s.invert = (n) => (n - r0) / (r1 - r0) * (d1 - d0) + d0;
s.domain = domain;
s.range = range;
s.type = "linear";
return s;
}
function makeLog(domain, range, base) {
const [d0, d1] = domain;
if (d0 <= 0 || d1 <= 0) {
throw new Error(
`scale.log: domain values must be > 0, got [${d0}, ${d1}]`
);
}
const logBase = Math.log(base);
const logD0 = Math.log(d0) / logBase;
const logD1 = Math.log(d1) / logBase;
const [r0, r1] = range;
const fn = (value) => {
const logV = Math.log(value) / logBase;
return (logV - logD0) / (logD1 - logD0) * (r1 - r0) + r0;
};
const s = fn;
s.invert = (n) => {
const logV = (n - r0) / (r1 - r0) * (logD1 - logD0) + logD0;
return Math.pow(base, logV);
};
s.domain = domain;
s.range = range;
s.type = "log";
return s;
}
function makeOrdinal(domain, range) {
const [r0, r1] = range;
const bw = (r1 - r0) / domain.length;
const fn = (value) => {
const idx = domain.indexOf(value);
if (idx === -1) {
throw new Error(
`scale.ordinal: value ${String(value)} not in domain [${domain.join(", ")}]`
);
}
return r0 + idx * bw + bw / 2;
};
const s = fn;
s.domain = domain;
s.range = range;
s.bandwidth = bw;
s.type = "ordinal";
return s;
}
var scale = {
linear({
domain,
range
}) {
return makeLinear(domain, range);
},
log({
domain,
range,
base = 10
}) {
return makeLog(domain, range, base);
},
ordinal({
domain,
range
}) {
return makeOrdinal(domain, range);
}
};
// src/widgets/plot/Heatmap.tsx
var import_react3 = __toESM(require_react(), 1);
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
// src/widgets/plot/Histogram.tsx
var import_react4 = __toESM(require_react(), 1);
var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
function binCounts(values, bins, domain) {
const finite = [];
for (const v of values) if (Number.isFinite(v)) finite.push(v);
if (finite.length === 0 || bins <= 0) {
return { counts: [], lo: 0, hi: 0, binW: 0 };
}
let lo;
let hi;
if (domain) {
[lo, hi] = domain;
} else {
lo = Infinity;
hi = -Infinity;
for (const v of finite) {
if (v < lo) lo = v;
if (v > hi) hi = v;
}
}
const span = hi - lo || 1;
const binW = span / bins;
const counts = new Array(bins).fill(0);
for (const v of finite) {
let idx = Math.floor((v - lo) / binW);
if (idx === bins) idx = bins - 1;
if (idx >= 0 && idx < bins) counts[idx]++;
}
return { counts, lo, hi, binW };
}
function Histogram({
values,
bins,
width,
height,
domain,
highlight,
fillIn = "var(--accent)",
fillOut = "var(--text-muted)",
maxCount,
gap = 1
}) {
const { counts, lo, binW } = binCounts(values, bins, domain);
if (counts.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("g", {});
const cap = maxCount ?? Math.max(...counts, 1);
const barWidth = width / bins;
const bars = [];
for (let i = 0; i < bins; i++) {
const c = counts[i];
const h = c / cap * height;
const x = i * barWidth;
const y = height - h;
const centre = lo + (i + 0.5) * binW;
const useIn = highlight ? highlight(centre) : true;
bars.push(
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"rect",
{
x: x + gap / 2,
y,
width: Math.max(0, barWidth - gap),
height: h,
fill: useIn ? fillIn : fillOut
},
i
)
);
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("g", { children: bars });
}
// src/widgets/primitives/index.tsx
var import_react8 = __toESM(require_react());
// node_modules/clsx/dist/clsx.mjs
function r(e) {
var t, f, n = "";
if ("string" == typeof e || "number" == typeof e) n += e;
else if ("object" == typeof e) if (Array.isArray(e)) {
var o = e.length;
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
} else for (f in e) e[f] && (n && (n += " "), n += f);
return n;
}
function clsx() {
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
return n;
}
// node_modules/tailwind-merge/dist/bundle-mjs.mjs
var concatArrays = (array1, array2) => {
const combinedArray = new Array(array1.length + array2.length);
for (let i = 0; i < array1.length; i++) {
combinedArray[i] = array1[i];
}
for (let i = 0; i < array2.length; i++) {
combinedArray[array1.length + i] = array2[i];
}
return combinedArray;
};
var createClassValidatorObject = (classGroupId, validator) => ({
classGroupId,
validator
});
var createClassPartObject = (nextPart = /* @__PURE__ */ new Map(), validators = null, classGroupId) => ({
nextPart,
validators,
classGroupId
});
var CLASS_PART_SEPARATOR = "-";
var EMPTY_CONFLICTS = [];
var ARBITRARY_PROPERTY_PREFIX = "arbitrary..";
var createClassGroupUtils = (config) => {
const classMap = createClassMap(config);
const {
conflictingClassGroups,
conflictingClassGroupModifiers
} = config;
const getClassGroupId = (className) => {
if (className.startsWith("[") && className.endsWith("]")) {
return getGroupIdForArbitraryProperty(className);
}
const classParts = className.split(CLASS_PART_SEPARATOR);
const startIndex = classParts[0] === "" && classParts.length > 1 ? 1 : 0;
return getGroupRecursive(classParts, startIndex, classMap);
};
const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
if (hasPostfixModifier) {
const modifierConflicts = conflictingClassGroupModifiers[classGroupId];
const baseConflicts = conflictingClassGroups[classGroupId];
if (modifierConflicts) {
if (baseConflicts) {
return concatArrays(baseConflicts, modifierConflicts);
}
return modifierConflicts;
}
return baseConflicts || EMPTY_CONFLICTS;
}
return conflictingClassGroups[classGroupId] || EMPTY_CONFLICTS;
};
return {
getClassGroupId,
getConflictingClassGroupIds
};
};
var getGroupRecursive = (classParts, startIndex, classPartObject) => {
const classPathsLength = classParts.length - startIndex;
if (classPathsLength === 0) {
return classPartObject.classGroupId;
}
const currentClassPart = classParts[startIndex];
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
if (nextClassPartObject) {
const result = getGroupRecursive(classParts, startIndex + 1, nextClassPartObject);
if (result) return result;
}
const validators = classPartObject.validators;
if (validators === null) {
return void 0;
}
const classRest = startIndex === 0 ? classParts.join(CLASS_PART_SEPARATOR) : classParts.slice(startIndex).join(CLASS_PART_SEPARATOR);
const validatorsLength = validators.length;
for (let i = 0; i < validatorsLength; i++) {
const validatorObj = validators[i];
if (validatorObj.validator(classRest)) {
return validatorObj.classGroupId;
}
}
return void 0;
};
var getGroupIdForArbitraryProperty = (className) => className.slice(1, -1).indexOf(":") === -1 ? void 0 : (() => {
const content = className.slice(1, -1);
const colonIndex = content.indexOf(":");
const property = content.slice(0, colonIndex);
return property ? ARBITRARY_PROPERTY_PREFIX + property : void 0;
})();
var createClassMap = (config) => {
const {
theme,
classGroups
} = config;
return processClassGroups(classGroups, theme);
};
var processClassGroups = (classGroups, theme) => {
const classMap = createClassPartObject();
for (const classGroupId in classGroups) {
const group = classGroups[classGroupId];
processClassesRecursively(group, classMap, classGroupId, theme);
}
return classMap;
};
var processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
const len = classGroup.length;
for (let i = 0; i < len; i++) {
const classDefinition = classGroup[i];
processClassDefinition(classDefinition, classPartObject, classGroupId, theme);
}
};
var processClassDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
if (typeof classDefinition === "string") {
processStringDefinition(classDefinition, classPartObject, classGroupId);
return;
}
if (typeof classDefinition === "function") {
processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme);
return;
}
processObjectDefinition(classDefinition, classPartObject, classGroupId, theme);
};
var processStringDefinition = (classDefinition, classPartObject, classGroupId) => {
const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
classPartObjectToEdit.classGroupId = classGroupId;
};
var processFunctionDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
return;
}
if (classPartObject.validators === null) {
classPartObject.validators = [];
}
classPartObject.validators.push(createClassValidatorObject(classGroupId, classDefinition));
};
var processObjectDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
const entries = Object.entries(classDefinition);
const len = entries.length;
for (let i = 0; i < len; i++) {
const [key, value] = entries[i];
processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
}
};
var getPart = (classPartObject, path) => {
let current = classPartObject;
const parts = path.split(CLASS_PART_SEPARATOR);
const len = parts.length;
for (let i = 0; i < len; i++) {
const part = parts[i];
let next = current.nextPart.get(part);
if (!next) {
next = createClassPartObject();
current.nextPart.set(part, next);
}
current = next;
}
return current;
};
var isThemeGetter = (func) => "isThemeGetter" in func && func.isThemeGetter === true;
var createLruCache = (maxCacheSize) => {
if (maxCacheSize < 1) {
return {
get: () => void 0,
set: () => {
}
};
}
let cacheSize = 0;
let cache2 = /* @__PURE__ */ Object.create(null);
let previousCache = /* @__PURE__ */ Object.create(null);
const update2 = (key, value) => {
cache2[key] = value;
cacheSize++;
if (cacheSize > maxCacheSize) {
cacheSize = 0;
previousCache = cache2;
cache2 = /* @__PURE__ */ Object.create(null);
}
};
return {
get(key) {
let value = cache2[key];
if (value !== void 0) {
return value;
}
if ((value = previousCache[key]) !== void 0) {
update2(key, value);
return value;
}
},
set(key, value) {
if (key in cache2) {
cache2[key] = value;
} else {
update2(key, value);
}
}
};
};
var IMPORTANT_MODIFIER = "!";
var MODIFIER_SEPARATOR = ":";
var EMPTY_MODIFIERS = [];
var createResultObject = (modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition, isExternal) => ({
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition,
isExternal
});
var createParseClassName = (config) => {
const {
prefix,
experimentalParseClassName
} = config;
let parseClassName = (className) => {
const modifiers = [];
let bracketDepth = 0;
let parenDepth = 0;
let modifierStart = 0;
let postfixModifierPosition;
const len = className.length;
for (let index = 0; index < len; index++) {
const currentCharacter = className[index];
if (bracketDepth === 0 && parenDepth === 0) {
if (currentCharacter === MODIFIER_SEPARATOR) {
modifiers.push(className.slice(modifierStart, index));
modifierStart = index + 1;
continue;
}
if (currentCharacter === "/") {
postfixModifierPosition = index;
continue;
}
}
if (currentCharacter === "[") bracketDepth++;
else if (currentCharacter === "]") bracketDepth--;
else if (currentCharacter === "(") parenDepth++;
else if (currentCharacter === ")") parenDepth--;
}
const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.slice(modifierStart);
let baseClassName = baseClassNameWithImportantModifier;
let hasImportantModifier = false;
if (baseClassNameWithImportantModifier.endsWith(IMPORTANT_MODIFIER)) {
baseClassName = baseClassNameWithImportantModifier.slice(0, -1);
hasImportantModifier = true;
} else if (
/**
* In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
* @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
*/
baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER)
) {
baseClassName = baseClassNameWithImportantModifier.slice(1);
hasImportantModifier = true;
}
const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : void 0;
return createResultObject(modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition);
};
if (prefix) {
const fullPrefix = prefix + MODIFIER_SEPARATOR;
const parseClassNameOriginal = parseClassName;
parseClassName = (className) => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.slice(fullPrefix.length)) : createResultObject(EMPTY_MODIFIERS, false, className, void 0, true);
}
if (experimentalParseClassName) {
const parseClassNameOriginal = parseClassName;
parseClassName = (className) => experimentalParseClassName({
className,
parseClassName: parseClassNameOriginal
});
}
return parseClassName;
};
var createSortModifiers = (config) => {
const modifierWeights = /* @__PURE__ */ new Map();
config.orderSensitiveModifiers.forEach((mod, index) => {
modifierWeights.set(mod, 1e6 + index);
});
return (modifiers) => {
const result = [];
let currentSegment = [];
for (let i = 0; i < modifiers.length; i++) {
const modifier = modifiers[i];
const isArbitrary = modifier[0] === "[";
const isOrderSensitive = modifierWeights.has(modifier);
if (isArbitrary || isOrderSensitive) {
if (currentSegment.length > 0) {
currentSegment.sort();
result.push(...currentSegment);
currentSegment = [];
}
result.push(modifier);
} else {
currentSegment.push(modifier);
}
}
if (currentSegment.length > 0) {
currentSegment.sort();
result.push(...currentSegment);
}
return result;
};
};
var createConfigUtils = (config) => ({
cache: createLruCache(config.cacheSize),
parseClassName: createParseClassName(config),
sortModifiers: createSortModifiers(config),
postfixLookupClassGroupIds: createPostfixLookupClassGroupIds(config),
...createClassGroupUtils(config)
});
var createPostfixLookupClassGroupIds = (config) => {
const lookup = /* @__PURE__ */ Object.create(null);
const classGroupIds = config.postfixLookupClassGroups;
if (classGroupIds) {
for (let i = 0; i < classGroupIds.length; i++) {
lookup[classGroupIds[i]] = true;
}
}
return lookup;
};
var SPLIT_CLASSES_REGEX = /\s+/;
var mergeClassList = (classList, configUtils) => {
const {
parseClassName,
getClassGroupId,
getConflictingClassGroupIds,
sortModifiers,
postfixLookupClassGroupIds
} = configUtils;
const classGroupsInConflict = [];
const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
let result = "";
for (let index = classNames.length - 1; index >= 0; index -= 1) {
const originalClassName = classNames[index];
const {
isExternal,
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition
} = parseClassName(originalClassName);
if (isExternal) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
let hasPostfixModifier = !!maybePostfixModifierPosition;
let classGroupId;
if (hasPostfixModifier) {
const baseClassNameWithoutPostfix = baseClassName.substring(0, maybePostfixModifierPosition);
classGroupId = getClassGroupId(baseClassNameWithoutPostfix);
const classGroupIdWithPostfix = classGroupId && postfixLookupClassGroupIds[classGroupId] ? getClassGroupId(baseClassName) : void 0;
if (classGroupIdWithPostfix && classGroupIdWithPostfix !== classGroupId) {
classGroupId = classGroupIdWithPostfix;
hasPostfixModifier = false;
}
} else {
classGroupId = getClassGroupId(baseClassName);
}
if (!classGroupId) {
if (!hasPostfixModifier) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
classGroupId = getClassGroupId(baseClassName);
if (!classGroupId) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
hasPostfixModifier = false;
}
const variantModifier = modifiers.length === 0 ? "" : modifiers.length === 1 ? modifiers[0] : sortModifiers(modifiers).join(":");
const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
const classId = modifierId + classGroupId;
if (classGroupsInConflict.indexOf(classId) > -1) {
continue;
}
classGroupsInConflict.push(classId);
const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
for (let i = 0; i < conflictGroups.length; ++i) {
const group = conflictGroups[i];
classGroupsInConflict.push(modifierId + group);
}
result = originalClassName + (result.length > 0 ? " " + result : result);
}
return result;
};
var twJoin = (...classLists) => {
let index = 0;
let argument;
let resolvedValue;
let string = "";
while (index < classLists.length) {
if (argument = classLists[index++]) {
if (resolvedValue = toValue(argument)) {
string && (string += " ");
string += resolvedValue;
}
}
}
return string;
};
var toValue = (mix) => {
if (typeof mix === "string") {
return mix;
}
let resolvedValue;
let string = "";
for (let k = 0; k < mix.length; k++) {
if (mix[k]) {
if (resolvedValue = toValue(mix[k])) {
string && (string += " ");
string += resolvedValue;
}
}
}
return string;
};
var createTailwindMerge = (createConfigFirst, ...createConfigRest) => {
let configUtils;
let cacheGet;
let cacheSet;
let functionToCall;
const initTailwindMerge = (classList) => {
const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
configUtils = createConfigUtils(config);
cacheGet = configUtils.cache.get;
cacheSet = configUtils.cache.set;
functionToCall = tailwindMerge;
return tailwindMerge(classList);
};
const tailwindMerge = (classList) => {
const cachedResult = cacheGet(classList);
if (cachedResult) {
return cachedResult;
}
const result = mergeClassList(classList, configUtils);
cacheSet(classList, result);
return result;
};
functionToCall = initTailwindMerge;
return (...args) => functionToCall(twJoin(...args));
};
var fallbackThemeArr = [];
var fromTheme = (key) => {
const themeGetter = (theme) => theme[key] || fallbackThemeArr;
themeGetter.isThemeGetter = true;
return themeGetter;
};
var arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
var arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
var fractionRegex = /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/;
var tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
var lengthUnitRegex = /\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$/;
var colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
var shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
var imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
var isFraction = (value) => fractionRegex.test(value);
var isNumber = (value) => !!value && !Number.isNaN(Number(value));
var isInteger = (value) => !!value && Number.isInteger(Number(value));
var isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
var isTshirtSize = (value) => tshirtUnitRegex.test(value);
var isAny = () => true;
var isLengthOnly = (value) => (
// `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.
lengthUnitRegex.test(value) && !colorFunctionRegex.test(value)
);
var isNever = () => false;
var isShadow = (value) => shadowRegex.test(value);
var isImage = (value) => imageRegex.test(value);
var isAnyNonArbitrary = (value) => !isArbitraryValue(value) && !isArbitraryVariable(value);
var isNamedContainerQuery = (value) => value.startsWith("@container") && (value[10] === "/" && value[11] !== void 0 || value[11] === "s" && value[16] !== void 0 && value.startsWith("-size/", 10) || value[11] === "n" && value[18] !== void 0 && value.startsWith("-normal/", 10));
var isArbitrarySize = (value) => getIsArbitraryValue(value, isLabelSize, isNever);
var isArbitraryValue = (value) => arbitraryValueRegex.test(value);
var isArbitraryLength = (value) => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
var isArbitraryNumber = (value) => getIsArbitraryValue(value, isLabelNumber, isNumber);
var isArbitraryWeight = (value) => getIsArbitraryValue(value, isLabelWeight, isAny);
var isArbitraryFamilyName = (value) => getIsArbitraryValue(value, isLabelFamilyName, isNever);
var isArbitraryPosition = (value) => getIsArbitraryValue(value, isLabelPosition, isNever);
var isArbitraryImage = (value) => getIsArbitraryValue(value, isLabelImage, isImage);
var isArbitraryShadow = (value) => getIsArbitraryValue(value, isLabelShadow, isShadow);
var isArbitraryVariable = (value) => arbitraryVariableRegex.test(value);
var isArbitraryVariableLength = (value) => getIsArbitraryVariable(value, isLabelLength);
var isArbitraryVariableFamilyName = (value) => getIsArbitraryVariable(value, isLabelFamilyName);
var isArbitraryVariablePosition = (value) => getIsArbitraryVariable(value, isLabelPosition);
var isArbitraryVariableSize = (value) => getIsArbitraryVariable(value, isLabelSize);
var isArbitraryVariableImage = (value) => getIsArbitraryVariable(value, isLabelImage);
var isArbitraryVariableShadow = (value) => getIsArbitraryVariable(value, isLabelShadow, true);
var isArbitraryVariableWeight = (value) => getIsArbitraryVariable(value, isLabelWeight, true);
var getIsArbitraryValue = (value, testLabel, testValue) => {
const result = arbitraryValueRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return testValue(result[2]);
}
return false;
};
var getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
const result = arbitraryVariableRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return shouldMatchNoLabel;
}
return false;
};
var isLabelPosition = (label) => label === "position" || label === "percentage";
var isLabelImage = (label) => label === "image" || label === "url";
var isLabelSize = (label) => label === "length" || label === "size" || label === "bg-size";
var isLabelLength = (label) => label === "length";
var isLabelNumber = (label) => label === "number";
var isLabelFamilyName = (label) => label === "family-name";
var isLabelWeight = (label) => label === "number" || label === "weight";
var isLabelShadow = (label) => label === "shadow";
var getDefaultConfig = () => {
const themeColor = fromTheme("color");
const themeFont = fromTheme("font");
const themeText = fromTheme("text");
const themeFontWeight = fromTheme("font-weight");
const themeTracking = fromTheme("tracking");
const themeLeading = fromTheme("leading");
const themeBreakpoint = fromTheme("breakpoint");
const themeContainer = fromTheme("container");
const themeSpacing = fromTheme("spacing");
const themeRadius = fromTheme("radius");
const themeShadow = fromTheme("shadow");
const themeInsetShadow = fromTheme("inset-shadow");
const themeTextShadow = fromTheme("text-shadow");
const themeDropShadow = fromTheme("drop-shadow");
const themeBlur = fromTheme("blur");
const themePerspective = fromTheme("perspective");
const themeAspect = fromTheme("aspect");
const themeEase = fromTheme("ease");
const themeAnimate = fromTheme("animate");
const scaleBreak = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
const scalePosition = () => [
"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"
];
const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
const scaleOverflow = () => ["auto", "hidden", "clip", "visible", "scroll"];
const scaleOverscroll = () => ["auto", "contain", "none"];
const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
const scaleInset = () => [isFraction, "full", "auto", ...scaleUnambiguousSpacing()];
const scaleGridTemplateColsRows = () => [isInteger, "none", "subgrid", isArbitraryVariable, isArbitraryValue];
const scaleGridColRowStartAndEnd = () => ["auto", {
span: ["full", isInteger, isArbitraryVariable, isArbitraryValue]
}, isInteger, isArbitraryVariable, isArbitraryValue];
const scaleGridColRowStartOrEnd = () => [isInteger, "auto", isArbitraryVariable, isArbitraryValue];
const scaleGridAutoColsRows = () => ["auto", "min", "max", "fr", isArbitraryVariable, isArbitraryValue];
const scaleAlignPrimaryAxis = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"];
const scaleAlignSecondaryAxis = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"];
const scaleMargin = () => ["auto", ...scaleUnambiguousSpacing()];
const scaleSizing = () => [isFraction, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
const scaleSizingInline = () => [isFraction, "screen", "full", "dvw", "lvw", "svw", "min", "max", "fit", ...scaleUnambiguousSpacing()];
const scaleSizingBlock = () => [isFraction, "screen", "full", "lh", "dvh", "lvh", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
position: [isArbitraryVariable, isArbitraryValue]
}];
const scaleBgRepeat = () => ["no-repeat", {
repeat: ["", "x", "y", "space", "round"]
}];
const scaleBgSize = () => ["auto", "cover", "contain", isArbitraryVariableSize, isArbitrarySize, {
size: [isArbitraryVariable, isArbitraryValue]
}];
const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
const scaleRadius = () => [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
"full",
themeRadius,
isArbitraryVariable,
isArbitraryValue
];
const scaleBorderWidth = () => ["", isNumber, isArbitraryVariableLength, isArbitraryLength];
const scaleLineStyle = () => ["solid", "dashed", "dotted", "double"];
const scaleBlendMode = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
const scaleBlur = () => [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
themeBlur,
isArbitraryVariable,
isArbitraryValue
];
const scaleRotate = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
const scaleScale = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
const scaleTranslate = () => [isFraction, "full", ...scaleUnambiguousSpacing()];
return {
cacheSize: 500,
theme: {
animate: ["spin", "ping", "pulse", "bounce"],
aspect: ["video"],
blur: [isTshirtSize],
breakpoint: [isTshirtSize],
color: [isAny],
container: [isTshirtSize],
"drop-shadow": [isTshirtSize],
ease: ["in", "out", "in-out"],
font: [isAnyNonArbitrary],
"font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
"inset-shadow": [isTshirtSize],
leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
radius: [isTshirtSize],
shadow: [isTshirtSize],
spacing: ["px", isNumber],
text: [isTshirtSize],
"text-shadow": [isTshirtSize],
tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
},
classGroups: {
// --------------
// --- Layout ---
// --------------
/**
* Aspect Ratio
* @see https://tailwindcss.com/docs/aspect-ratio
*/
aspect: [{
aspect: ["auto", "square", isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
}],
/**
* Container
* @see https://tailwindcss.com/docs/container
* @deprecated since Tailwind CSS v4.0.0
*/
container: ["container"],
/**
* Container Type
* @see https://tailwindcss.com/docs/responsive-design#container-queries
*/
"container-type": [{
"@container": ["", "normal", "size", isArbitraryVariable, isArbitraryValue]
}],
/**
* Container Name
* @see https://tailwindcss.com/docs/responsive-design#named-containers
*/
"container-named": [isNamedContainerQuery],
/**
* Columns
* @see https://tailwindcss.com/docs/columns
*/
columns: [{
columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
}],
/**
* Break After
* @see https://tailwindcss.com/docs/break-after
*/
"break-after": [{
"break-after": scaleBreak()
}],
/**
* Break Before
* @see https://tailwindcss.com/docs/break-before
*/
"break-before": [{
"break-before": scaleBreak()
}],
/**
* 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: scalePositionWithArbitrary()
}],
/**
* Overflow
* @see https://tailwindcss.com/docs/overflow
*/
overflow: [{
overflow: scaleOverflow()
}],
/**
* Overflow X
* @see https://tailwindcss.com/docs/overflow
*/
"overflow-x": [{
"overflow-x": scaleOverflow()
}],
/**
* Overflow Y
* @see https://tailwindcss.com/docs/overflow
*/
"overflow-y": [{
"overflow-y": scaleOverflow()
}],
/**
* Overscroll Behavior
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
overscroll: [{
overscroll: scaleOverscroll()
}],
/**
* Overscroll Behavior X
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
"overscroll-x": [{
"overscroll-x": scaleOverscroll()
}],
/**
* Overscroll Behavior Y
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
"overscroll-y": [{
"overscroll-y": scaleOverscroll()
}],
/**
* Position
* @see https://tailwindcss.com/docs/position
*/
position: ["static", "fixed", "absolute", "relative", "sticky"],
/**
* Inset
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
inset: [{
inset: scaleInset()
}],
/**
* Inset Inline
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-x": [{
"inset-x": scaleInset()
}],
/**
* Inset Block
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-y": [{
"inset-y": scaleInset()
}],
/**
* Inset Inline Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
* @todo class group will be renamed to `inset-s` in next major release
*/
start: [{
"inset-s": scaleInset(),
/**
* @deprecated since Tailwind CSS v4.2.0 in favor of `inset-s-*` utilities.
* @see https://github.com/tailwindlabs/tailwindcss/pull/19613
*/
start: scaleInset()
}],
/**
* Inset Inline End
* @see https://tailwindcss.com/docs/top-right-bottom-left
* @todo class group will be renamed to `inset-e` in next major release
*/
end: [{
"inset-e": scaleInset(),
/**
* @deprecated since Tailwind CSS v4.2.0 in favor of `inset-e-*` utilities.
* @see https://github.com/tailwindlabs/tailwindcss/pull/19613
*/
end: scaleInset()
}],
/**
* Inset Block Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-bs": [{
"inset-bs": scaleInset()
}],
/**
* Inset Block End
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-be": [{
"inset-be": scaleInset()
}],
/**
* Top
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
top: [{
top: scaleInset()
}],
/**
* Right
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
right: [{
right: scaleInset()
}],
/**
* Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
bottom: [{
bottom: scaleInset()
}],
/**
* Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
left: [{
left: scaleInset()
}],
/**
* Visibility
* @see https://tailwindcss.com/docs/visibility
*/
visibility: ["visible", "invisible", "collapse"],
/**
* Z-Index
* @see https://tailwindcss.com/docs/z-index
*/
z: [{
z: [isInteger, "auto", isArbitraryVariable, isArbitraryValue]
}],
// ------------------------
// --- Flexbox and Grid ---
// ------------------------
/**
* Flex Basis
* @see https://tailwindcss.com/docs/flex-basis
*/
basis: [{
basis: [isFraction, "full", "auto", themeContainer, ...scaleUnambiguousSpacing()]
}],
/**
* 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: [isNumber, isFraction, "auto", "initial", "none", isArbitraryValue]
}],
/**
* Flex Grow
* @see https://tailwindcss.com/docs/flex-grow
*/
grow: [{
grow: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Flex Shrink
* @see https://tailwindcss.com/docs/flex-shrink
*/
shrink: [{
shrink: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Order
* @see https://tailwindcss.com/docs/order
*/
order: [{
order: [isInteger, "first", "last", "none", isArbitraryVariable, isArbitraryValue]
}],
/**
* Grid Template Columns
* @see https://tailwindcss.com/docs/grid-template-columns
*/
"grid-cols": [{
"grid-cols": scaleGridTemplateColsRows()
}],
/**
* Grid Column Start / End
* @see https://tailwindcss.com/docs/grid-column
*/
"col-start-end": [{
col: scaleGridColRowStartAndEnd()
}],
/**
* Grid Column Start
* @see https://tailwindcss.com/docs/grid-column
*/
"col-start": [{
"col-start": scaleGridColRowStartOrEnd()
}],
/**
* Grid Column End
* @see https://tailwindcss.com/docs/grid-column
*/
"col-end": [{
"col-end": scaleGridColRowStartOrEnd()
}],
/**
* Grid Template Rows
* @see https://tailwindcss.com/docs/grid-template-rows
*/
"grid-rows": [{
"grid-rows": scaleGridTemplateColsRows()
}],
/**
* Grid Row Start / End
* @see https://tailwindcss.com/docs/grid-row
*/
"row-start-end": [{
row: scaleGridColRowStartAndEnd()
}],
/**
* Grid Row Start
* @see https://tailwindcss.com/docs/grid-row
*/
"row-start": [{
"row-start": scaleGridColRowStartOrEnd()
}],
/**
* Grid Row End
* @see https://tailwindcss.com/docs/grid-row
*/
"row-end": [{
"row-end": scaleGridColRowStartOrEnd()
}],
/**
* 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": scaleGridAutoColsRows()
}],
/**
* Grid Auto Rows
* @see https://tailwindcss.com/docs/grid-auto-rows
*/
"auto-rows": [{
"auto-rows": scaleGridAutoColsRows()
}],
/**
* Gap
* @see https://tailwindcss.com/docs/gap
*/
gap: [{
gap: scaleUnambiguousSpacing()
}],
/**
* Gap X
* @see https://tailwindcss.com/docs/gap
*/
"gap-x": [{
"gap-x": scaleUnambiguousSpacing()
}],
/**
* Gap Y
* @see https://tailwindcss.com/docs/gap
*/
"gap-y": [{
"gap-y": scaleUnambiguousSpacing()
}],
/**
* Justify Content
* @see https://tailwindcss.com/docs/justify-content
*/
"justify-content": [{
justify: [...scaleAlignPrimaryAxis(), "normal"]
}],
/**
* Justify Items
* @see https://tailwindcss.com/docs/justify-items
*/
"justify-items": [{
"justify-items": [...scaleAlignSecondaryAxis(), "normal"]
}],
/**
* Justify Self
* @see https://tailwindcss.com/docs/justify-self
*/
"justify-self": [{
"justify-self": ["auto", ...scaleAlignSecondaryAxis()]
}],
/**
* Align Content
* @see https://tailwindcss.com/docs/align-content
*/
"align-content": [{
content: ["normal", ...scaleAlignPrimaryAxis()]
}],
/**
* Align Items
* @see https://tailwindcss.com/docs/align-items
*/
"align-items": [{
items: [...scaleAlignSecondaryAxis(), {
baseline: ["", "last"]
}]
}],
/**
* Align Self
* @see https://tailwindcss.com/docs/align-self
*/
"align-self": [{
self: ["auto", ...scaleAlignSecondaryAxis(), {
baseline: ["", "last"]
}]
}],
/**
* Place Content
* @see https://tailwindcss.com/docs/place-content
*/
"place-content": [{
"place-content": scaleAlignPrimaryAxis()
}],
/**
* Place Items
* @see https://tailwindcss.com/docs/place-items
*/
"place-items": [{
"place-items": [...scaleAlignSecondaryAxis(), "baseline"]
}],
/**
* Place Self
* @see https://tailwindcss.com/docs/place-self
*/
"place-self": [{
"place-self": ["auto", ...scaleAlignSecondaryAxis()]
}],
// Spacing
/**
* Padding
* @see https://tailwindcss.com/docs/padding
*/
p: [{
p: scaleUnambiguousSpacing()
}],
/**
* Padding Inline
* @see https://tailwindcss.com/docs/padding
*/
px: [{
px: scaleUnambiguousSpacing()
}],
/**
* Padding Block
* @see https://tailwindcss.com/docs/padding
*/
py: [{
py: scaleUnambiguousSpacing()
}],
/**
* Padding Inline Start
* @see https://tailwindcss.com/docs/padding
*/
ps: [{
ps: scaleUnambiguousSpacing()
}],
/**
* Padding Inline End
* @see https://tailwindcss.com/docs/padding
*/
pe: [{
pe: scaleUnambiguousSpacing()
}],
/**
* Padding Block Start
* @see https://tailwindcss.com/docs/padding
*/
pbs: [{
pbs: scaleUnambiguousSpacing()
}],
/**
* Padding Block End
* @see https://tailwindcss.com/docs/padding
*/
pbe: [{
pbe: scaleUnambiguousSpacing()
}],
/**
* Padding Top
* @see https://tailwindcss.com/docs/padding
*/
pt: [{
pt: scaleUnambiguousSpacing()
}],
/**
* Padding Right
* @see https://tailwindcss.com/docs/padding
*/
pr: [{
pr: scaleUnambiguousSpacing()
}],
/**
* Padding Bottom
* @see https://tailwindcss.com/docs/padding
*/
pb: [{
pb: scaleUnambiguousSpacing()
}],
/**
* Padding Left
* @see https://tailwindcss.com/docs/padding
*/
pl: [{
pl: scaleUnambiguousSpacing()
}],
/**
* Margin
* @see https://tailwindcss.com/docs/margin
*/
m: [{
m: scaleMargin()
}],
/**
* Margin Inline
* @see https://tailwindcss.com/docs/margin
*/
mx: [{
mx: scaleMargin()
}],
/**
* Margin Block
* @see https://tailwindcss.com/docs/margin
*/
my: [{
my: scaleMargin()
}],
/**
* Margin Inline Start
* @see https://tailwindcss.com/docs/margin
*/
ms: [{
ms: scaleMargin()
}],
/**
* Margin Inline End
* @see https://tailwindcss.com/docs/margin
*/
me: [{
me: scaleMargin()
}],
/**
* Margin Block Start
* @see https://tailwindcss.com/docs/margin
*/
mbs: [{
mbs: scaleMargin()
}],
/**
* Margin Block End
* @see https://tailwindcss.com/docs/margin
*/
mbe: [{
mbe: scaleMargin()
}],
/**
* Margin Top
* @see https://tailwindcss.com/docs/margin
*/
mt: [{
mt: scaleMargin()
}],
/**
* Margin Right
* @see https://tailwindcss.com/docs/margin
*/
mr: [{
mr: scaleMargin()
}],
/**
* Margin Bottom
* @see https://tailwindcss.com/docs/margin
*/
mb: [{
mb: scaleMargin()
}],
/**
* Margin Left
* @see https://tailwindcss.com/docs/margin
*/
ml: [{
ml: scaleMargin()
}],
/**
* Space Between X
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
"space-x": [{
"space-x": scaleUnambiguousSpacing()
}],
/**
* 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": scaleUnambiguousSpacing()
}],
/**
* 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: scaleSizing()
}],
/**
* Inline Size
* @see https://tailwindcss.com/docs/width
*/
"inline-size": [{
inline: ["auto", ...scaleSizingInline()]
}],
/**
* Min-Inline Size
* @see https://tailwindcss.com/docs/min-width
*/
"min-inline-size": [{
"min-inline": ["auto", ...scaleSizingInline()]
}],
/**
* Max-Inline Size
* @see https://tailwindcss.com/docs/max-width
*/
"max-inline-size": [{
"max-inline": ["none", ...scaleSizingInline()]
}],
/**
* Block Size
* @see https://tailwindcss.com/docs/height
*/
"block-size": [{
block: ["auto", ...scaleSizingBlock()]
}],
/**
* Min-Block Size
* @see https://tailwindcss.com/docs/min-height
*/
"min-block-size": [{
"min-block": ["auto", ...scaleSizingBlock()]
}],
/**
* Max-Block Size
* @see https://tailwindcss.com/docs/max-height
*/
"max-block-size": [{
"max-block": ["none", ...scaleSizingBlock()]
}],
/**
* Width
* @see https://tailwindcss.com/docs/width
*/
w: [{
w: [themeContainer, "screen", ...scaleSizing()]
}],
/**
* Min-Width
* @see https://tailwindcss.com/docs/min-width
*/
"min-w": [{
"min-w": [
themeContainer,
"screen",
/** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
"none",
...scaleSizing()
]
}],
/**
* Max-Width
* @see https://tailwindcss.com/docs/max-width
*/
"max-w": [{
"max-w": [
themeContainer,
"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: [themeBreakpoint]
},
...scaleSizing()
]
}],
/**
* Height
* @see https://tailwindcss.com/docs/height
*/
h: [{
h: ["screen", "lh", ...scaleSizing()]
}],
/**
* Min-Height
* @see https://tailwindcss.com/docs/min-height
*/
"min-h": [{
"min-h": ["screen", "lh", "none", ...scaleSizing()]
}],
/**
* Max-Height
* @see https://tailwindcss.com/docs/max-height
*/
"max-h": [{
"max-h": ["screen", "lh", ...scaleSizing()]
}],
// ------------------
// --- Typography ---
// ------------------
/**
* Font Size
* @see https://tailwindcss.com/docs/font-size
*/
"font-size": [{
text: ["base", themeText, isArbitraryVariableLength, isArbitraryLength]
}],
/**
* 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: [themeFontWeight, isArbitraryVariableWeight, isArbitraryWeight]
}],
/**
* 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", isPercent, isArbitraryValue]
}],
/**
* Font Family
* @see https://tailwindcss.com/docs/font-family
*/
"font-family": [{
font: [isArbitraryVariableFamilyName, isArbitraryFamilyName, themeFont]
}],
/**
* Font Feature Settings
* @see https://tailwindcss.com/docs/font-feature-settings
*/
"font-features": [{
"font-features": [isArbitraryValue]
}],
/**
* 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: [themeTracking, isArbitraryVariable, isArbitraryValue]
}],
/**
* Line Clamp
* @see https://tailwindcss.com/docs/line-clamp
*/
"line-clamp": [{
"line-clamp": [isNumber, "none", isArbitraryVariable, isArbitraryNumber]
}],
/**
* 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 */
themeLeading,
...scaleUnambiguousSpacing()
]
}],
/**
* List Style Image
* @see https://tailwindcss.com/docs/list-style-image
*/
"list-image": [{
"list-image": ["none", isArbitraryVariable, isArbitraryValue]
}],
/**
* 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", isArbitraryVariable, isArbitraryValue]
}],
/**
* 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: scaleColor()
}],
/**
* Text Color
* @see https://tailwindcss.com/docs/text-color
*/
"text-color": [{
text: scaleColor()
}],
/**
* 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: [...scaleLineStyle(), "wavy"]
}],
/**
* Text Decoration Thickness
* @see https://tailwindcss.com/docs/text-decoration-thickness
*/
"text-decoration-thickness": [{
decoration: [isNumber, "from-font", "auto", isArbitraryVariable, isArbitraryLength]
}],
/**
* Text Decoration Color
* @see https://tailwindcss.com/docs/text-decoration-color
*/
"text-decoration-color": [{
decoration: scaleColor()
}],
/**
* Text Underline Offset
* @see https://tailwindcss.com/docs/text-underline-offset
*/
"underline-offset": [{
"underline-offset": [isNumber, "auto", isArbitraryVariable, isArbitraryValue]
}],
/**
* 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: scaleUnambiguousSpacing()
}],
/**
* Tab Size
* @see https://tailwindcss.com/docs/tab-size
*/
"tab-size": [{
tab: [isInteger, isArbitraryVariable, isArbitraryValue]
}],
/**
* Vertical Alignment
* @see https://tailwindcss.com/docs/vertical-align
*/
"vertical-align": [{
align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryVariable, isArbitraryValue]
}],
/**
* 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", isArbitraryVariable, isArbitraryValue]
}],
// -------------------
// --- 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: scaleBgPosition()
}],
/**
* Background Repeat
* @see https://tailwindcss.com/docs/background-repeat
*/
"bg-repeat": [{
bg: scaleBgRepeat()
}],
/**
* Background Size
* @see https://tailwindcss.com/docs/background-size
*/
"bg-size": [{
bg: scaleBgSize()
}],
/**
* Background Image
* @see https://tailwindcss.com/docs/background-image
*/
"bg-image": [{
bg: ["none", {
linear: [{
to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
}, isInteger, isArbitraryVariable, isArbitraryValue],
radial: ["", isArbitraryVariable, isArbitraryValue],
conic: [isInteger, isArbitraryVariable, isArbitraryValue]
}, isArbitraryVariableImage, isArbitraryImage]
}],
/**
* Background Color
* @see https://tailwindcss.com/docs/background-color
*/
"bg-color": [{
bg: scaleColor()
}],
/**
* Gradient Color Stops From Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-from-pos": [{
from: scaleGradientStopPosition()
}],
/**
* Gradient Color Stops Via Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-via-pos": [{
via: scaleGradientStopPosition()
}],
/**
* Gradient Color Stops To Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-to-pos": [{
to: scaleGradientStopPosition()
}],
/**
* Gradient Color Stops From
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-from": [{
from: scaleColor()
}],
/**
* Gradient Color Stops Via
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-via": [{
via: scaleColor()
}],
/**
* Gradient Color Stops To
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-to": [{
to: scaleColor()
}],
// ---------------
// --- Borders ---
// ---------------
/**
* Border Radius
* @see https://tailwindcss.com/docs/border-radius
*/
rounded: [{
rounded: scaleRadius()
}],
/**
* Border Radius Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-s": [{
"rounded-s": scaleRadius()
}],
/**
* Border Radius End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-e": [{
"rounded-e": scaleRadius()
}],
/**
* Border Radius Top
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-t": [{
"rounded-t": scaleRadius()
}],
/**
* Border Radius Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-r": [{
"rounded-r": scaleRadius()
}],
/**
* Border Radius Bottom
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-b": [{
"rounded-b": scaleRadius()
}],
/**
* Border Radius Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-l": [{
"rounded-l": scaleRadius()
}],
/**
* Border Radius Start Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-ss": [{
"rounded-ss": scaleRadius()
}],
/**
* Border Radius Start End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-se": [{
"rounded-se": scaleRadius()
}],
/**
* Border Radius End End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-ee": [{
"rounded-ee": scaleRadius()
}],
/**
* Border Radius End Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-es": [{
"rounded-es": scaleRadius()
}],
/**
* Border Radius Top Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-tl": [{
"rounded-tl": scaleRadius()
}],
/**
* Border Radius Top Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-tr": [{
"rounded-tr": scaleRadius()
}],
/**
* Border Radius Bottom Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-br": [{
"rounded-br": scaleRadius()
}],
/**
* Border Radius Bottom Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-bl": [{
"rounded-bl": scaleRadius()
}],
/**
* Border Width
* @see https://tailwindcss.com/docs/border-width
*/
"border-w": [{
border: scaleBorderWidth()
}],
/**
* Border Width Inline
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-x": [{
"border-x": scaleBorderWidth()
}],
/**
* Border Width Block
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-y": [{
"border-y": scaleBorderWidth()
}],
/**
* Border Width Inline Start
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-s": [{
"border-s": scaleBorderWidth()
}],
/**
* Border Width Inline End
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-e": [{
"border-e": scaleBorderWidth()
}],
/**
* Border Width Block Start
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-bs": [{
"border-bs": scaleBorderWidth()
}],
/**
* Border Width Block End
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-be": [{
"border-be": scaleBorderWidth()
}],
/**
* Border Width Top
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-t": [{
"border-t": scaleBorderWidth()
}],
/**
* Border Width Right
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-r": [{
"border-r": scaleBorderWidth()
}],
/**
* Border Width Bottom
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-b": [{
"border-b": scaleBorderWidth()
}],
/**
* Border Width Left
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-l": [{
"border-l": scaleBorderWidth()
}],
/**
* Divide Width X
* @see https://tailwindcss.com/docs/border-width#between-children
*/
"divide-x": [{
"divide-x": scaleBorderWidth()
}],
/**
* 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": scaleBorderWidth()
}],
/**
* 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: [...scaleLineStyle(), "hidden", "none"]
}],
/**
* Divide Style
* @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
*/
"divide-style": [{
divide: [...scaleLineStyle(), "hidden", "none"]
}],
/**
* Border Color
* @see https://tailwindcss.com/docs/border-color
*/
"border-color": [{
border: scaleColor()
}],
/**
* Border Color Inline
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-x": [{
"border-x": scaleColor()
}],
/**
* Border Color Block
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-y": [{
"border-y": scaleColor()
}],
/**
* Border Color Inline Start
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-s": [{
"border-s": scaleColor()
}],
/**
* Border Color Inline End
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-e": [{
"border-e": scaleColor()
}],
/**
* Border Color Block Start
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-bs": [{
"border-bs": scaleColor()
}],
/**
* Border Color Block End
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-be": [{
"border-be": scaleColor()
}],
/**
* Border Color Top
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-t": [{
"border-t": scaleColor()
}],
/**
* Border Color Right
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-r": [{
"border-r": scaleColor()
}],
/**
* Border Color Bottom
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-b": [{
"border-b": scaleColor()
}],
/**
* Border Color Left
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-l": [{
"border-l": scaleColor()
}],
/**
* Divide Color
* @see https://tailwindcss.com/docs/divide-color
*/
"divide-color": [{
divide: scaleColor()
}],
/**
* Outline Style
* @see https://tailwindcss.com/docs/outline-style
*/
"outline-style": [{
outline: [...scaleLineStyle(), "none", "hidden"]
}],
/**
* Outline Offset
* @see https://tailwindcss.com/docs/outline-offset
*/
"outline-offset": [{
"outline-offset": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Outline Width
* @see https://tailwindcss.com/docs/outline-width
*/
"outline-w": [{
outline: ["", isNumber, isArbitraryVariableLength, isArbitraryLength]
}],
/**
* Outline Color
* @see https://tailwindcss.com/docs/outline-color
*/
"outline-color": [{
outline: scaleColor()
}],
// ---------------
// --- Effects ---
// ---------------
/**
* Box Shadow
* @see https://tailwindcss.com/docs/box-shadow
*/
shadow: [{
shadow: [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
themeShadow,
isArbitraryVariableShadow,
isArbitraryShadow
]
}],
/**
* Box Shadow Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
*/
"shadow-color": [{
shadow: scaleColor()
}],
/**
* Inset Box Shadow
* @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
*/
"inset-shadow": [{
"inset-shadow": ["none", themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
}],
/**
* Inset Box Shadow Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
*/
"inset-shadow-color": [{
"inset-shadow": scaleColor()
}],
/**
* Ring Width
* @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
*/
"ring-w": [{
ring: scaleBorderWidth()
}],
/**
* 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: scaleColor()
}],
/**
* 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": [isNumber, isArbitraryLength]
}],
/**
* 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": scaleColor()
}],
/**
* Inset Ring Width
* @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
*/
"inset-ring-w": [{
"inset-ring": scaleBorderWidth()
}],
/**
* Inset Ring Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
*/
"inset-ring-color": [{
"inset-ring": scaleColor()
}],
/**
* Text Shadow
* @see https://tailwindcss.com/docs/text-shadow
*/
"text-shadow": [{
"text-shadow": ["none", themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
}],
/**
* Text Shadow Color
* @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
*/
"text-shadow-color": [{
"text-shadow": scaleColor()
}],
/**
* Opacity
* @see https://tailwindcss.com/docs/opacity
*/
opacity: [{
opacity: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Mix Blend Mode
* @see https://tailwindcss.com/docs/mix-blend-mode
*/
"mix-blend": [{
"mix-blend": [...scaleBlendMode(), "plus-darker", "plus-lighter"]
}],
/**
* Background Blend Mode
* @see https://tailwindcss.com/docs/background-blend-mode
*/
"bg-blend": [{
"bg-blend": scaleBlendMode()
}],
/**
* Mask Clip
* @see https://tailwindcss.com/docs/mask-clip
*/
"mask-clip": [{
"mask-clip": ["border", "padding", "content", "fill", "stroke", "view"]
}, "mask-no-clip"],
/**
* Mask Composite
* @see https://tailwindcss.com/docs/mask-composite
*/
"mask-composite": [{
mask: ["add", "subtract", "intersect", "exclude"]
}],
/**
* Mask Image
* @see https://tailwindcss.com/docs/mask-image
*/
"mask-image-linear-pos": [{
"mask-linear": [isNumber]
}],
"mask-image-linear-from-pos": [{
"mask-linear-from": scaleMaskImagePosition()
}],
"mask-image-linear-to-pos": [{
"mask-linear-to": scaleMaskImagePosition()
}],
"mask-image-linear-from-color": [{
"mask-linear-from": scaleColor()
}],
"mask-image-linear-to-color": [{
"mask-linear-to": scaleColor()
}],
"mask-image-t-from-pos": [{
"mask-t-from": scaleMaskImagePosition()
}],
"mask-image-t-to-pos": [{
"mask-t-to": scaleMaskImagePosition()
}],
"mask-image-t-from-color": [{
"mask-t-from": scaleColor()
}],
"mask-image-t-to-color": [{
"mask-t-to": scaleColor()
}],
"mask-image-r-from-pos": [{
"mask-r-from": scaleMaskImagePosition()
}],
"mask-image-r-to-pos": [{
"mask-r-to": scaleMaskImagePosition()
}],
"mask-image-r-from-color": [{
"mask-r-from": scaleColor()
}],
"mask-image-r-to-color": [{
"mask-r-to": scaleColor()
}],
"mask-image-b-from-pos": [{
"mask-b-from": scaleMaskImagePosition()
}],
"mask-image-b-to-pos": [{
"mask-b-to": scaleMaskImagePosition()
}],
"mask-image-b-from-color": [{
"mask-b-from": scaleColor()
}],
"mask-image-b-to-color": [{
"mask-b-to": scaleColor()
}],
"mask-image-l-from-pos": [{
"mask-l-from": scaleMaskImagePosition()
}],
"mask-image-l-to-pos": [{
"mask-l-to": scaleMaskImagePosition()
}],
"mask-image-l-from-color": [{
"mask-l-from": scaleColor()
}],
"mask-image-l-to-color": [{
"mask-l-to": scaleColor()
}],
"mask-image-x-from-pos": [{
"mask-x-from": scaleMaskImagePosition()
}],
"mask-image-x-to-pos": [{
"mask-x-to": scaleMaskImagePosition()
}],
"mask-image-x-from-color": [{
"mask-x-from": scaleColor()
}],
"mask-image-x-to-color": [{
"mask-x-to": scaleColor()
}],
"mask-image-y-from-pos": [{
"mask-y-from": scaleMaskImagePosition()
}],
"mask-image-y-to-pos": [{
"mask-y-to": scaleMaskImagePosition()
}],
"mask-image-y-from-color": [{
"mask-y-from": scaleColor()
}],
"mask-image-y-to-color": [{
"mask-y-to": scaleColor()
}],
"mask-image-radial": [{
"mask-radial": [isArbitraryVariable, isArbitraryValue]
}],
"mask-image-radial-from-pos": [{
"mask-radial-from": scaleMaskImagePosition()
}],
"mask-image-radial-to-pos": [{
"mask-radial-to": scaleMaskImagePosition()
}],
"mask-image-radial-from-color": [{
"mask-radial-from": scaleColor()
}],
"mask-image-radial-to-color": [{
"mask-radial-to": scaleColor()
}],
"mask-image-radial-shape": [{
"mask-radial": ["circle", "ellipse"]
}],
"mask-image-radial-size": [{
"mask-radial": [{
closest: ["side", "corner"],
farthest: ["side", "corner"]
}]
}],
"mask-image-radial-pos": [{
"mask-radial-at": scalePosition()
}],
"mask-image-conic-pos": [{
"mask-conic": [isNumber]
}],
"mask-image-conic-from-pos": [{
"mask-conic-from": scaleMaskImagePosition()
}],
"mask-image-conic-to-pos": [{
"mask-conic-to": scaleMaskImagePosition()
}],
"mask-image-conic-from-color": [{
"mask-conic-from": scaleColor()
}],
"mask-image-conic-to-color": [{
"mask-conic-to": scaleColor()
}],
/**
* Mask Mode
* @see https://tailwindcss.com/docs/mask-mode
*/
"mask-mode": [{
mask: ["alpha", "luminance", "match"]
}],
/**
* Mask Origin
* @see https://tailwindcss.com/docs/mask-origin
*/
"mask-origin": [{
"mask-origin": ["border", "padding", "content", "fill", "stroke", "view"]
}],
/**
* Mask Position
* @see https://tailwindcss.com/docs/mask-position
*/
"mask-position": [{
mask: scaleBgPosition()
}],
/**
* Mask Repeat
* @see https://tailwindcss.com/docs/mask-repeat
*/
"mask-repeat": [{
mask: scaleBgRepeat()
}],
/**
* Mask Size
* @see https://tailwindcss.com/docs/mask-size
*/
"mask-size": [{
mask: scaleBgSize()
}],
/**
* Mask Type
* @see https://tailwindcss.com/docs/mask-type
*/
"mask-type": [{
"mask-type": ["alpha", "luminance"]
}],
/**
* Mask Image
* @see https://tailwindcss.com/docs/mask-image
*/
"mask-image": [{
mask: ["none", isArbitraryVariable, isArbitraryValue]
}],
// ---------------
// --- Filters ---
// ---------------
/**
* Filter
* @see https://tailwindcss.com/docs/filter
*/
filter: [{
filter: [
// Deprecated since Tailwind CSS v3.0.0
"",
"none",
isArbitraryVariable,
isArbitraryValue
]
}],
/**
* Blur
* @see https://tailwindcss.com/docs/blur
*/
blur: [{
blur: scaleBlur()
}],
/**
* Brightness
* @see https://tailwindcss.com/docs/brightness
*/
brightness: [{
brightness: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Contrast
* @see https://tailwindcss.com/docs/contrast
*/
contrast: [{
contrast: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Drop Shadow
* @see https://tailwindcss.com/docs/drop-shadow
*/
"drop-shadow": [{
"drop-shadow": [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
themeDropShadow,
isArbitraryVariableShadow,
isArbitraryShadow
]
}],
/**
* Drop Shadow Color
* @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
*/
"drop-shadow-color": [{
"drop-shadow": scaleColor()
}],
/**
* Grayscale
* @see https://tailwindcss.com/docs/grayscale
*/
grayscale: [{
grayscale: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Hue Rotate
* @see https://tailwindcss.com/docs/hue-rotate
*/
"hue-rotate": [{
"hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Invert
* @see https://tailwindcss.com/docs/invert
*/
invert: [{
invert: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Saturate
* @see https://tailwindcss.com/docs/saturate
*/
saturate: [{
saturate: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Sepia
* @see https://tailwindcss.com/docs/sepia
*/
sepia: [{
sepia: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Filter
* @see https://tailwindcss.com/docs/backdrop-filter
*/
"backdrop-filter": [{
"backdrop-filter": [
// Deprecated since Tailwind CSS v3.0.0
"",
"none",
isArbitraryVariable,
isArbitraryValue
]
}],
/**
* Backdrop Blur
* @see https://tailwindcss.com/docs/backdrop-blur
*/
"backdrop-blur": [{
"backdrop-blur": scaleBlur()
}],
/**
* Backdrop Brightness
* @see https://tailwindcss.com/docs/backdrop-brightness
*/
"backdrop-brightness": [{
"backdrop-brightness": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Contrast
* @see https://tailwindcss.com/docs/backdrop-contrast
*/
"backdrop-contrast": [{
"backdrop-contrast": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Grayscale
* @see https://tailwindcss.com/docs/backdrop-grayscale
*/
"backdrop-grayscale": [{
"backdrop-grayscale": ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Hue Rotate
* @see https://tailwindcss.com/docs/backdrop-hue-rotate
*/
"backdrop-hue-rotate": [{
"backdrop-hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Invert
* @see https://tailwindcss.com/docs/backdrop-invert
*/
"backdrop-invert": [{
"backdrop-invert": ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Opacity
* @see https://tailwindcss.com/docs/backdrop-opacity
*/
"backdrop-opacity": [{
"backdrop-opacity": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Saturate
* @see https://tailwindcss.com/docs/backdrop-saturate
*/
"backdrop-saturate": [{
"backdrop-saturate": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Sepia
* @see https://tailwindcss.com/docs/backdrop-sepia
*/
"backdrop-sepia": [{
"backdrop-sepia": ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
// --------------
// --- Tables ---
// --------------
/**
* Border Collapse
* @see https://tailwindcss.com/docs/border-collapse
*/
"border-collapse": [{
border: ["collapse", "separate"]
}],
/**
* Border Spacing
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing": [{
"border-spacing": scaleUnambiguousSpacing()
}],
/**
* Border Spacing X
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing-x": [{
"border-spacing-x": scaleUnambiguousSpacing()
}],
/**
* Border Spacing Y
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing-y": [{
"border-spacing-y": scaleUnambiguousSpacing()
}],
/**
* Table Layout
* @see https://tailwindcss.com/docs/table-layout
*/
"table-layout": [{
table: ["auto", "fixed"]
}],
/**
* Caption Side
* @see https://tailwindcss.com/docs/caption-side
*/
caption: [{
caption: ["top", "bottom"]
}],
// ---------------------------------
// --- Transitions and Animation ---
// ---------------------------------
/**
* Transition Property
* @see https://tailwindcss.com/docs/transition-property
*/
transition: [{
transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", isArbitraryVariable, isArbitraryValue]
}],
/**
* Transition Behavior
* @see https://tailwindcss.com/docs/transition-behavior
*/
"transition-behavior": [{
transition: ["normal", "discrete"]
}],
/**
* Transition Duration
* @see https://tailwindcss.com/docs/transition-duration
*/
duration: [{
duration: [isNumber, "initial", isArbitraryVariable, isArbitraryValue]
}],
/**
* Transition Timing Function
* @see https://tailwindcss.com/docs/transition-timing-function
*/
ease: [{
ease: ["linear", "initial", themeEase, isArbitraryVariable, isArbitraryValue]
}],
/**
* Transition Delay
* @see https://tailwindcss.com/docs/transition-delay
*/
delay: [{
delay: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Animation
* @see https://tailwindcss.com/docs/animation
*/
animate: [{
animate: ["none", themeAnimate, isArbitraryVariable, isArbitraryValue]
}],
// ------------------
// --- Transforms ---
// ------------------
/**
* Backface Visibility
* @see https://tailwindcss.com/docs/backface-visibility
*/
backface: [{
backface: ["hidden", "visible"]
}],
/**
* Perspective
* @see https://tailwindcss.com/docs/perspective
*/
perspective: [{
perspective: [themePerspective, isArbitraryVariable, isArbitraryValue]
}],
/**
* Perspective Origin
* @see https://tailwindcss.com/docs/perspective-origin
*/
"perspective-origin": [{
"perspective-origin": scalePositionWithArbitrary()
}],
/**
* Rotate
* @see https://tailwindcss.com/docs/rotate
*/
rotate: [{
rotate: scaleRotate()
}],
/**
* Rotate X
* @see https://tailwindcss.com/docs/rotate
*/
"rotate-x": [{
"rotate-x": scaleRotate()
}],
/**
* Rotate Y
* @see https://tailwindcss.com/docs/rotate
*/
"rotate-y": [{
"rotate-y": scaleRotate()
}],
/**
* Rotate Z
* @see https://tailwindcss.com/docs/rotate
*/
"rotate-z": [{
"rotate-z": scaleRotate()
}],
/**
* Scale
* @see https://tailwindcss.com/docs/scale
*/
scale: [{
scale: scaleScale()
}],
/**
* Scale X
* @see https://tailwindcss.com/docs/scale
*/
"scale-x": [{
"scale-x": scaleScale()
}],
/**
* Scale Y
* @see https://tailwindcss.com/docs/scale
*/
"scale-y": [{
"scale-y": scaleScale()
}],
/**
* Scale Z
* @see https://tailwindcss.com/docs/scale
*/
"scale-z": [{
"scale-z": scaleScale()
}],
/**
* Scale 3D
* @see https://tailwindcss.com/docs/scale
*/
"scale-3d": ["scale-3d"],
/**
* Skew
* @see https://tailwindcss.com/docs/skew
*/
skew: [{
skew: scaleSkew()
}],
/**
* Skew X
* @see https://tailwindcss.com/docs/skew
*/
"skew-x": [{
"skew-x": scaleSkew()
}],
/**
* Skew Y
* @see https://tailwindcss.com/docs/skew
*/
"skew-y": [{
"skew-y": scaleSkew()
}],
/**
* Transform
* @see https://tailwindcss.com/docs/transform
*/
transform: [{
transform: [isArbitraryVariable, isArbitraryValue, "", "none", "gpu", "cpu"]
}],
/**
* Transform Origin
* @see https://tailwindcss.com/docs/transform-origin
*/
"transform-origin": [{
origin: scalePositionWithArbitrary()
}],
/**
* Transform Style
* @see https://tailwindcss.com/docs/transform-style
*/
"transform-style": [{
transform: ["3d", "flat"]
}],
/**
* Translate
* @see https://tailwindcss.com/docs/translate
*/
translate: [{
translate: scaleTranslate()
}],
/**
* Translate X
* @see https://tailwindcss.com/docs/translate
*/
"translate-x": [{
"translate-x": scaleTranslate()
}],
/**
* Translate Y
* @see https://tailwindcss.com/docs/translate
*/
"translate-y": [{
"translate-y": scaleTranslate()
}],
/**
* Translate Z
* @see https://tailwindcss.com/docs/translate
*/
"translate-z": [{
"translate-z": scaleTranslate()
}],
/**
* Translate None
* @see https://tailwindcss.com/docs/translate
*/
"translate-none": ["translate-none"],
/**
* Zoom
* @see https://tailwindcss.com/docs/zoom
*/
zoom: [{
zoom: [isInteger, isArbitraryVariable, isArbitraryValue]
}],
// ---------------------
// --- Interactivity ---
// ---------------------
/**
* Accent Color
* @see https://tailwindcss.com/docs/accent-color
*/
accent: [{
accent: scaleColor()
}],
/**
* Appearance
* @see https://tailwindcss.com/docs/appearance
*/
appearance: [{
appearance: ["none", "auto"]
}],
/**
* Caret Color
* @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
*/
"caret-color": [{
caret: scaleColor()
}],
/**
* Color Scheme
* @see https://tailwindcss.com/docs/color-scheme
*/
"color-scheme": [{
scheme: ["normal", "dark", "light", "light-dark", "only-dark", "only-light"]
}],
/**
* Cursor
* @see https://tailwindcss.com/docs/cursor
*/
cursor: [{
cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", isArbitraryVariable, isArbitraryValue]
}],
/**
* Field Sizing
* @see https://tailwindcss.com/docs/field-sizing
*/
"field-sizing": [{
"field-sizing": ["fixed", "content"]
}],
/**
* Pointer Events
* @see https://tailwindcss.com/docs/pointer-events
*/
"pointer-events": [{
"pointer-events": ["auto", "none"]
}],
/**
* Resize
* @see https://tailwindcss.com/docs/resize
*/
resize: [{
resize: ["none", "", "y", "x"]
}],
/**
* Scroll Behavior
* @see https://tailwindcss.com/docs/scroll-behavior
*/
"scroll-behavior": [{
scroll: ["auto", "smooth"]
}],
/**
* Scrollbar Thumb Color
* @see https://tailwindcss.com/docs/scrollbar-color
*/
"scrollbar-thumb-color": [{
"scrollbar-thumb": scaleColor()
}],
/**
* Scrollbar Track Color
* @see https://tailwindcss.com/docs/scrollbar-color
*/
"scrollbar-track-color": [{
"scrollbar-track": scaleColor()
}],
/**
* Scrollbar Gutter
* @see https://tailwindcss.com/docs/scrollbar-gutter
*/
"scrollbar-gutter": [{
"scrollbar-gutter": ["auto", "stable", "both"]
}],
/**
* Scrollbar Width
* @see https://tailwindcss.com/docs/scrollbar-width
*/
"scrollbar-w": [{
scrollbar: ["auto", "thin", "none"]
}],
/**
* Scroll Margin
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-m": [{
"scroll-m": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Inline
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mx": [{
"scroll-mx": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Block
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-my": [{
"scroll-my": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Inline Start
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-ms": [{
"scroll-ms": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Inline End
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-me": [{
"scroll-me": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Block Start
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mbs": [{
"scroll-mbs": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Block End
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mbe": [{
"scroll-mbe": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Top
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mt": [{
"scroll-mt": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Right
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mr": [{
"scroll-mr": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Bottom
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mb": [{
"scroll-mb": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Left
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-ml": [{
"scroll-ml": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-p": [{
"scroll-p": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Inline
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-px": [{
"scroll-px": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Block
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-py": [{
"scroll-py": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Inline Start
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-ps": [{
"scroll-ps": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Inline End
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pe": [{
"scroll-pe": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Block Start
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pbs": [{
"scroll-pbs": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Block End
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pbe": [{
"scroll-pbe": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Top
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pt": [{
"scroll-pt": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Right
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pr": [{
"scroll-pr": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Bottom
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pb": [{
"scroll-pb": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Left
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pl": [{
"scroll-pl": scaleUnambiguousSpacing()
}],
/**
* Scroll Snap Align
* @see https://tailwindcss.com/docs/scroll-snap-align
*/
"snap-align": [{
snap: ["start", "end", "center", "align-none"]
}],
/**
* Scroll Snap Stop
* @see https://tailwindcss.com/docs/scroll-snap-stop
*/
"snap-stop": [{
snap: ["normal", "always"]
}],
/**
* Scroll Snap Type
* @see https://tailwindcss.com/docs/scroll-snap-type
*/
"snap-type": [{
snap: ["none", "x", "y", "both"]
}],
/**
* Scroll Snap Type Strictness
* @see https://tailwindcss.com/docs/scroll-snap-type
*/
"snap-strictness": [{
snap: ["mandatory", "proximity"]
}],
/**
* Touch Action
* @see https://tailwindcss.com/docs/touch-action
*/
touch: [{
touch: ["auto", "none", "manipulation"]
}],
/**
* Touch Action X
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-x": [{
"touch-pan": ["x", "left", "right"]
}],
/**
* Touch Action Y
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-y": [{
"touch-pan": ["y", "up", "down"]
}],
/**
* Touch Action Pinch Zoom
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-pz": ["touch-pinch-zoom"],
/**
* User Select
* @see https://tailwindcss.com/docs/user-select
*/
select: [{
select: ["none", "text", "all", "auto"]
}],
/**
* Will Change
* @see https://tailwindcss.com/docs/will-change
*/
"will-change": [{
"will-change": ["auto", "scroll", "contents", "transform", isArbitraryVariable, isArbitraryValue]
}],
// -----------
// --- SVG ---
// -----------
/**
* Fill
* @see https://tailwindcss.com/docs/fill
*/
fill: [{
fill: ["none", ...scaleColor()]
}],
/**
* Stroke Width
* @see https://tailwindcss.com/docs/stroke-width
*/
"stroke-w": [{
stroke: [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber]
}],
/**
* Stroke
* @see https://tailwindcss.com/docs/stroke
*/
stroke: [{
stroke: ["none", ...scaleColor()]
}],
// ---------------------
// --- Accessibility ---
// ---------------------
/**
* Forced Color Adjust
* @see https://tailwindcss.com/docs/forced-color-adjust
*/
"forced-color-adjust": [{
"forced-color-adjust": ["auto", "none"]
}]
},
conflictingClassGroups: {
"container-named": ["container-type"],
overflow: ["overflow-x", "overflow-y"],
overscroll: ["overscroll-x", "overscroll-y"],
inset: ["inset-x", "inset-y", "inset-bs", "inset-be", "start", "end", "top", "right", "bottom", "left"],
"inset-x": ["right", "left"],
"inset-y": ["top", "bottom"],
flex: ["basis", "grow", "shrink"],
gap: ["gap-x", "gap-y"],
p: ["px", "py", "ps", "pe", "pbs", "pbe", "pt", "pr", "pb", "pl"],
px: ["pr", "pl"],
py: ["pt", "pb"],
m: ["mx", "my", "ms", "me", "mbs", "mbe", "mt", "mr", "mb", "ml"],
mx: ["mr", "ml"],
my: ["mt", "mb"],
size: ["w", "h"],
"font-size": ["leading"],
"fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
"fvn-ordinal": ["fvn-normal"],
"fvn-slashed-zero": ["fvn-normal"],
"fvn-figure": ["fvn-normal"],
"fvn-spacing": ["fvn-normal"],
"fvn-fraction": ["fvn-normal"],
"line-clamp": ["display", "overflow"],
rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
"rounded-s": ["rounded-ss", "rounded-es"],
"rounded-e": ["rounded-se", "rounded-ee"],
"rounded-t": ["rounded-tl", "rounded-tr"],
"rounded-r": ["rounded-tr", "rounded-br"],
"rounded-b": ["rounded-br", "rounded-bl"],
"rounded-l": ["rounded-tl", "rounded-bl"],
"border-spacing": ["border-spacing-x", "border-spacing-y"],
"border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-bs", "border-w-be", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
"border-w-x": ["border-w-r", "border-w-l"],
"border-w-y": ["border-w-t", "border-w-b"],
"border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-bs", "border-color-be", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
"border-color-x": ["border-color-r", "border-color-l"],
"border-color-y": ["border-color-t", "border-color-b"],
translate: ["translate-x", "translate-y", "translate-none"],
"translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
"scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mbs", "scroll-mbe", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
"scroll-mx": ["scroll-mr", "scroll-ml"],
"scroll-my": ["scroll-mt", "scroll-mb"],
"scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pbs", "scroll-pbe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
"scroll-px": ["scroll-pr", "scroll-pl"],
"scroll-py": ["scroll-pt", "scroll-pb"],
touch: ["touch-x", "touch-y", "touch-pz"],
"touch-x": ["touch"],
"touch-y": ["touch"],
"touch-pz": ["touch"]
},
conflictingClassGroupModifiers: {
"font-size": ["leading"]
},
postfixLookupClassGroups: ["container-type"],
orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
};
};
var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
// src/presentation/components/ui/cn.ts
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// src/presentation/components/ui/Label.tsx
var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
// node_modules/@base-ui/react/slider/index.parts.mjs
var index_parts_exports = {};
__export(index_parts_exports, {
Control: () => SliderControl,
Indicator: () => SliderIndicator,
Label: () => SliderLabel,
Root: () => SliderRoot,
Thumb: () => SliderThumb,
Track: () => SliderTrack,
Value: () => SliderValue
});
// node_modules/@base-ui/react/slider/root/SliderRoot.mjs
var React21 = __toESM(require_react(), 1);
// node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
function hasWindow() {
return typeof window !== "undefined";
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function isElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Element || value instanceof getWindow(value).Element;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || typeof ShadowRoot === "undefined") {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
}
// node_modules/@base-ui/utils/owner.mjs
function ownerDocument(node) {
return node?.ownerDocument || document;
}
// node_modules/@base-ui/utils/useControlled.mjs
var React5 = __toESM(require_react(), 1);
// node_modules/@base-ui/utils/error.mjs
var set;
if (true) {
set = /* @__PURE__ */ new Set();
}
function error(...messages) {
if (true) {
const messageKey = messages.join(" ");
if (!set.has(messageKey)) {
set.add(messageKey);
console.error(`Base UI: ${messageKey}`);
}
}
}
// node_modules/@base-ui/utils/useControlled.mjs
function useControlled({
controlled,
default: defaultProp,
name,
state = "value"
}) {
const {
current: isControlled
} = React5.useRef(controlled !== void 0);
const [valueState, setValue] = React5.useState(defaultProp);
const value = isControlled ? controlled : valueState;
if (true) {
React5.useEffect(() => {
if (isControlled !== (controlled !== void 0)) {
error([`A component is changing the ${isControlled ? "" : "un"}controlled ${state} state of ${name} to be ${isControlled ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join("\n"));
}
}, [state, name, controlled]);
const {
current: defaultValue
} = React5.useRef(defaultProp);
React5.useEffect(() => {
if (!isControlled && serializeToDevModeString(defaultValue) !== serializeToDevModeString(defaultProp)) {
error([`A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. To suppress this warning opt to use a controlled ${name}.`].join("\n"));
}
}, [defaultProp]);
}
const setValueIfUncontrolled = React5.useCallback((newValue) => {
if (!isControlled) {
setValue(newValue);
}
}, []);
return [value, setValueIfUncontrolled];
}
function serializeToDevModeString(input) {
let nextId = 0;
const seen = /* @__PURE__ */ new WeakMap();
try {
const result = JSON.stringify(input, function replacer(key, value) {
if (key === "_owner" && this != null && typeof this === "object" && "$$typeof" in this) {
return void 0;
}
if (typeof value === "bigint") {
return `__bigint__:${value}`;
}
if (value !== null && typeof value === "object") {
const id = seen.get(value);
if (id !== void 0) {
return `__object__:${id}`;
}
seen.set(value, nextId);
nextId += 1;
}
return value;
});
return result ?? `__top__:${typeof input}`;
} catch {
return "__unserializable__";
}
}
// node_modules/@base-ui/utils/safeReact.mjs
var React6 = __toESM(require_react(), 1);
var SafeReact = {
...React6
};
// node_modules/@base-ui/utils/useRefWithInit.mjs
var React7 = __toESM(require_react(), 1);
var UNINITIALIZED = {};
function useRefWithInit(init, initArg) {
const ref = React7.useRef(UNINITIALIZED);
if (ref.current === UNINITIALIZED) {
ref.current = init(initArg);
}
return ref;
}
// node_modules/@base-ui/utils/useStableCallback.mjs
var useInsertionEffect = SafeReact.useInsertionEffect;
var useSafeInsertionEffect = (
// React 17 doesn't have useInsertionEffect.
useInsertionEffect && // Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
useInsertionEffect !== SafeReact.useLayoutEffect ? useInsertionEffect : (fn) => fn()
);
function useStableCallback(callback) {
const stable = useRefWithInit(createStableCallback).current;
stable.next = callback;
useSafeInsertionEffect(stable.effect);
return stable.trampoline;
}
function createStableCallback() {
const stable = {
next: void 0,
callback: assertNotCalled,
trampoline: (...args) => stable.callback?.(...args),
effect: () => {
stable.callback = stable.next;
}
};
return stable;
}
function assertNotCalled() {
if (true) {
throw (
/* minify-error-disabled */
new Error("Base UI: Cannot call an event handler while rendering.")
);
}
}
// node_modules/@base-ui/utils/useIsoLayoutEffect.mjs
var React8 = __toESM(require_react(), 1);
var noop = () => {
};
var useIsoLayoutEffect = typeof document !== "undefined" ? React8.useLayoutEffect : noop;
// node_modules/@base-ui/utils/useValueAsRef.mjs
function useValueAsRef(value) {
const latest = useRefWithInit(createLatestRef, value).current;
latest.next = value;
useIsoLayoutEffect(latest.effect);
return latest;
}
function createLatestRef(value) {
const latest = {
current: value,
next: value,
effect: () => {
latest.current = latest.next;
}
};
return latest;
}
// node_modules/@base-ui/utils/warn.mjs
var set2;
if (true) {
set2 = /* @__PURE__ */ new Set();
}
function warn(...messages) {
if (true) {
const messageKey = messages.join(" ");
if (!set2.has(messageKey)) {
set2.add(messageKey);
console.warn(`Base UI: ${messageKey}`);
}
}
}
// node_modules/@base-ui/utils/empty.mjs
function NOOP() {
}
var EMPTY_ARRAY = Object.freeze([]);
var EMPTY_OBJECT = Object.freeze({});
// node_modules/@base-ui/react/internals/reason-parts.mjs
var reason_parts_exports = {};
__export(reason_parts_exports, {
cancelOpen: () => cancelOpen,
chipRemovePress: () => chipRemovePress,
clearPress: () => clearPress,
closePress: () => closePress,
closeWatcher: () => closeWatcher,
decrementPress: () => decrementPress,
disabled: () => disabled,
drag: () => drag,
escapeKey: () => escapeKey,
focusOut: () => focusOut,
imperativeAction: () => imperativeAction,
incrementPress: () => incrementPress,
initial: () => initial,
inputBlur: () => inputBlur,
inputChange: () => inputChange,
inputClear: () => inputClear,
inputPaste: () => inputPaste,
inputPress: () => inputPress,
itemPress: () => itemPress,
keyboard: () => keyboard,
linkPress: () => linkPress,
listNavigation: () => listNavigation,
missing: () => missing,
none: () => none,
outsidePress: () => outsidePress,
pointer: () => pointer,
scrub: () => scrub,
siblingOpen: () => siblingOpen,
swipe: () => swipe,
trackPress: () => trackPress,
triggerFocus: () => triggerFocus,
triggerHover: () => triggerHover,
triggerPress: () => triggerPress,
wheel: () => wheel,
windowResize: () => windowResize
});
var none = "none";
var triggerPress = "trigger-press";
var triggerHover = "trigger-hover";
var triggerFocus = "trigger-focus";
var outsidePress = "outside-press";
var itemPress = "item-press";
var closePress = "close-press";
var linkPress = "link-press";
var clearPress = "clear-press";
var chipRemovePress = "chip-remove-press";
var trackPress = "track-press";
var incrementPress = "increment-press";
var decrementPress = "decrement-press";
var inputChange = "input-change";
var inputClear = "input-clear";
var inputBlur = "input-blur";
var inputPaste = "input-paste";
var inputPress = "input-press";
var focusOut = "focus-out";
var escapeKey = "escape-key";
var closeWatcher = "close-watcher";
var listNavigation = "list-navigation";
var keyboard = "keyboard";
var pointer = "pointer";
var drag = "drag";
var wheel = "wheel";
var scrub = "scrub";
var cancelOpen = "cancel-open";
var siblingOpen = "sibling-open";
var disabled = "disabled";
var missing = "missing";
var initial = "initial";
var imperativeAction = "imperative-action";
var swipe = "swipe";
var windowResize = "window-resize";
// node_modules/@base-ui/react/internals/createBaseUIEventDetails.mjs
function createChangeEventDetails(reason, event, trigger, customProperties) {
let canceled = false;
let allowPropagation = false;
const custom = customProperties ?? EMPTY_OBJECT;
const details = {
reason,
event: event ?? new Event("base-ui"),
cancel() {
canceled = true;
},
allowPropagation() {
allowPropagation = true;
},
get isCanceled() {
return canceled;
},
get isPropagationAllowed() {
return allowPropagation;
},
trigger,
...custom
};
return details;
}
function createGenericEventDetails(reason, event, customProperties) {
const custom = customProperties ?? EMPTY_OBJECT;
const details = {
reason,
event: event ?? new Event("base-ui"),
...custom
};
return details;
}
// node_modules/@base-ui/react/internals/useValueChanged.mjs
var React9 = __toESM(require_react(), 1);
function useValueChanged(value, onChange) {
const valueRef = React9.useRef(value);
const onChangeCallback = useStableCallback(onChange);
useIsoLayoutEffect(() => {
if (valueRef.current === value) {
return;
}
onChangeCallback(valueRef.current);
}, [value, onChangeCallback]);
useIsoLayoutEffect(() => {
valueRef.current = value;
}, [value]);
}
// node_modules/@base-ui/utils/useId.mjs
var React10 = __toESM(require_react(), 1);
var globalId = 0;
function useGlobalId(idOverride, prefix = "mui") {
const [defaultId, setDefaultId] = React10.useState(idOverride);
const id = idOverride || defaultId;
React10.useEffect(() => {
if (defaultId == null) {
globalId += 1;
setDefaultId(`${prefix}-${globalId}`);
}
}, [defaultId, prefix]);
return id;
}
var maybeReactUseId = SafeReact.useId;
function useId(idOverride, prefix) {
if (maybeReactUseId !== void 0) {
const reactId = maybeReactUseId();
return idOverride ?? (prefix ? `${prefix}-${reactId}` : reactId);
}
return useGlobalId(idOverride, prefix);
}
// node_modules/@base-ui/react/internals/useBaseUiId.mjs
function useBaseUiId(idOverride) {
return useId(idOverride, "base-ui");
}
// node_modules/@base-ui/react/internals/useRenderElement.mjs
var React13 = __toESM(require_react(), 1);
// node_modules/@base-ui/utils/useMergedRefs.mjs
function useMergedRefs(a, b, c, d) {
const forkRef = useRefWithInit(createForkRef).current;
if (didChange(forkRef, a, b, c, d)) {
update(forkRef, [a, b, c, d]);
}
return forkRef.callback;
}
function useMergedRefsN(refs) {
const forkRef = useRefWithInit(createForkRef).current;
if (didChangeN(forkRef, refs)) {
update(forkRef, refs);
}
return forkRef.callback;
}
function createForkRef() {
return {
callback: null,
cleanup: null,
refs: []
};
}
function didChange(forkRef, a, b, c, d) {
return forkRef.refs[0] !== a || forkRef.refs[1] !== b || forkRef.refs[2] !== c || forkRef.refs[3] !== d;
}
function didChangeN(forkRef, newRefs) {
return forkRef.refs.length !== newRefs.length || forkRef.refs.some((ref, index) => ref !== newRefs[index]);
}
function update(forkRef, refs) {
forkRef.refs = refs;
if (refs.every((ref) => ref == null)) {
forkRef.callback = null;
return;
}
forkRef.callback = (instance) => {
if (forkRef.cleanup) {
forkRef.cleanup();
forkRef.cleanup = null;
}
if (instance != null) {
const cleanupCallbacks = Array(refs.length).fill(null);
for (let i = 0; i < refs.length; i += 1) {
const ref = refs[i];
if (ref == null) {
continue;
}
switch (typeof ref) {
case "function": {
const refCleanup = ref(instance);
if (typeof refCleanup === "function") {
cleanupCallbacks[i] = refCleanup;
}
break;
}
case "object": {
ref.current = instance;
break;
}
default:
}
}
forkRef.cleanup = () => {
for (let i = 0; i < refs.length; i += 1) {
const ref = refs[i];
if (ref == null) {
continue;
}
switch (typeof ref) {
case "function": {
const cleanupCallback = cleanupCallbacks[i];
if (typeof cleanupCallback === "function") {
cleanupCallback();
} else {
ref(null);
}
break;
}
case "object": {
ref.current = null;
break;
}
default:
}
}
};
}
};
}
// node_modules/@base-ui/utils/getReactElementRef.mjs
var React12 = __toESM(require_react(), 1);
// node_modules/@base-ui/utils/reactVersion.mjs
var React11 = __toESM(require_react(), 1);
var majorVersion = parseInt(React11.version, 10);
function isReactVersionAtLeast(reactVersionToCheck) {
return majorVersion >= reactVersionToCheck;
}
// node_modules/@base-ui/utils/getReactElementRef.mjs
function getReactElementRef(element) {
if (!/* @__PURE__ */ React12.isValidElement(element)) {
return null;
}
const reactElement = element;
const propsWithRef = reactElement.props;
return (isReactVersionAtLeast(19) ? propsWithRef?.ref : reactElement.ref) ?? null;
}
// node_modules/@base-ui/utils/mergeObjects.mjs
function mergeObjects(a, b) {
if (a && !b) {
return a;
}
if (!a && b) {
return b;
}
if (a || b) {
return {
...a,
...b
};
}
return void 0;
}
// node_modules/@base-ui/react/internals/getStateAttributesProps.mjs
function getStateAttributesProps(state, customMapping) {
const props = {};
for (const key in state) {
const value = state[key];
if (customMapping?.hasOwnProperty(key)) {
const customProps = customMapping[key](value);
if (customProps != null) {
Object.assign(props, customProps);
}
continue;
}
if (value === true) {
props[`data-${key.toLowerCase()}`] = "";
} else if (value) {
props[`data-${key.toLowerCase()}`] = value.toString();
}
}
return props;
}
// node_modules/@base-ui/react/utils/resolveClassName.mjs
function resolveClassName(className, state) {
return typeof className === "function" ? className(state) : className;
}
// node_modules/@base-ui/react/utils/resolveStyle.mjs
function resolveStyle(style, state) {
return typeof style === "function" ? style(state) : style;
}
// node_modules/@base-ui/react/merge-props/mergeProps.mjs
var EMPTY_PROPS = {};
function mergeProps(a, b, c, d, e) {
if (!c && !d && !e && !a) {
return createInitialMergedProps(b);
}
let merged = createInitialMergedProps(a);
if (b) {
merged = mergeInto(merged, b);
}
if (c) {
merged = mergeInto(merged, c);
}
if (d) {
merged = mergeInto(merged, d);
}
if (e) {
merged = mergeInto(merged, e);
}
return merged;
}
function mergePropsN(props) {
if (props.length === 0) {
return EMPTY_PROPS;
}
if (props.length === 1) {
return createInitialMergedProps(props[0]);
}
let merged = createInitialMergedProps(props[0]);
for (let i = 1; i < props.length; i += 1) {
merged = mergeInto(merged, props[i]);
}
return merged;
}
function createInitialMergedProps(inputProps) {
if (isPropsGetter(inputProps)) {
return {
...resolvePropsGetter(inputProps, EMPTY_PROPS)
};
}
return copyInitialProps(inputProps);
}
function mergeInto(merged, inputProps) {
if (isPropsGetter(inputProps)) {
return resolvePropsGetter(inputProps, merged);
}
return mutablyMergeInto(merged, inputProps);
}
function copyInitialProps(inputProps) {
const copiedProps = {
...inputProps
};
for (const propName in copiedProps) {
const propValue = copiedProps[propName];
if (isEventHandler(propName, propValue)) {
copiedProps[propName] = wrapEventHandler(propValue);
}
}
return copiedProps;
}
function mutablyMergeInto(mergedProps, externalProps) {
if (!externalProps) {
return mergedProps;
}
for (const propName in externalProps) {
const externalPropValue = externalProps[propName];
switch (propName) {
case "style": {
mergedProps[propName] = mergeObjects(mergedProps.style, externalPropValue);
break;
}
case "className": {
mergedProps[propName] = mergeClassNames(mergedProps.className, externalPropValue);
break;
}
default: {
if (isEventHandler(propName, externalPropValue)) {
mergedProps[propName] = mergeEventHandlers(mergedProps[propName], externalPropValue);
} else {
mergedProps[propName] = externalPropValue;
}
}
}
}
return mergedProps;
}
function isEventHandler(key, value) {
const code0 = key.charCodeAt(0);
const code1 = key.charCodeAt(1);
const code2 = key.charCodeAt(2);
return code0 === 111 && code1 === 110 && code2 >= 65 && code2 <= 90 && (typeof value === "function" || typeof value === "undefined");
}
function isPropsGetter(inputProps) {
return typeof inputProps === "function";
}
function resolvePropsGetter(inputProps, previousProps) {
if (isPropsGetter(inputProps)) {
return inputProps(previousProps);
}
return inputProps ?? EMPTY_PROPS;
}
function mergeEventHandlers(ourHandler, theirHandler) {
if (!theirHandler) {
return ourHandler;
}
if (!ourHandler) {
return wrapEventHandler(theirHandler);
}
return (...args) => {
const event = args[0];
if (isSyntheticEvent(event)) {
const baseUIEvent = event;
makeEventPreventable(baseUIEvent);
const result2 = theirHandler(...args);
if (!baseUIEvent.baseUIHandlerPrevented) {
ourHandler?.(...args);
}
return result2;
}
const result = theirHandler(...args);
ourHandler?.(...args);
return result;
};
}
function wrapEventHandler(handler) {
if (!handler) {
return handler;
}
return (...args) => {
const event = args[0];
if (isSyntheticEvent(event)) {
makeEventPreventable(event);
}
return handler(...args);
};
}
function makeEventPreventable(event) {
event.preventBaseUIHandler = () => {
event.baseUIHandlerPrevented = true;
};
return event;
}
function mergeClassNames(ourClassName, theirClassName) {
if (theirClassName) {
if (ourClassName) {
return theirClassName + " " + ourClassName;
}
return theirClassName;
}
return ourClassName;
}
function isSyntheticEvent(event) {
return event != null && typeof event === "object" && "nativeEvent" in event;
}
// node_modules/@base-ui/react/internals/useRenderElement.mjs
var import_react5 = __toESM(require_react(), 1);
function useRenderElement(element, componentProps, params = {}) {
const renderProp = componentProps.render;
const outProps = useRenderElementProps(componentProps, params);
if (params.enabled === false) {
return null;
}
const state = params.state ?? EMPTY_OBJECT;
return evaluateRenderProp(element, renderProp, outProps, state);
}
function useRenderElementProps(componentProps, params = {}) {
const {
className: classNameProp,
style: styleProp,
render: renderProp
} = componentProps;
const {
state = EMPTY_OBJECT,
ref,
props,
stateAttributesMapping,
enabled = true
} = params;
const className = enabled ? resolveClassName(classNameProp, state) : void 0;
const style = enabled ? resolveStyle(styleProp, state) : void 0;
const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping) : EMPTY_OBJECT;
const resolvedProps = enabled && props ? resolveRenderFunctionProps(props) : void 0;
const outProps = enabled ? mergeObjects(stateProps, resolvedProps) ?? {} : EMPTY_OBJECT;
if (typeof document !== "undefined") {
if (!enabled) {
useMergedRefs(null, null);
} else if (Array.isArray(ref)) {
outProps.ref = useMergedRefsN([outProps.ref, getReactElementRef(renderProp), ...ref]);
} else {
outProps.ref = useMergedRefs(outProps.ref, getReactElementRef(renderProp), ref);
}
}
if (!enabled) {
return EMPTY_OBJECT;
}
if (className !== void 0) {
outProps.className = mergeClassNames(outProps.className, className);
}
if (style !== void 0) {
outProps.style = mergeObjects(outProps.style, style);
}
return outProps;
}
function resolveRenderFunctionProps(props) {
if (Array.isArray(props)) {
return mergePropsN(props);
}
return mergeProps(void 0, props);
}
var REACT_LAZY_TYPE = Symbol.for("react.lazy");
var COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
var LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
function evaluateRenderProp(element, render, props, state) {
if (render) {
if (typeof render === "function") {
if (true) {
warnIfRenderPropLooksLikeComponent(render);
}
return render(props, state);
}
const mergedProps = mergeProps(props, render.props);
mergedProps.ref = props.ref;
let newElement = render;
if (newElement?.$$typeof === REACT_LAZY_TYPE) {
const children = React13.Children.toArray(render);
newElement = children[0];
}
if (true) {
if (!/* @__PURE__ */ React13.isValidElement(newElement)) {
throw new Error(["Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.", "A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.", "https://base-ui.com/r/invalid-render-prop"].join("\n"));
}
}
return /* @__PURE__ */ React13.cloneElement(newElement, mergedProps);
}
if (element) {
if (typeof element === "string") {
return renderTag(element, props);
}
}
throw new Error(true ? "Base UI: Render element or function are not defined." : formatErrorMessage_default(8));
}
function warnIfRenderPropLooksLikeComponent(renderFn) {
const functionName = renderFn.name;
if (functionName.length === 0) {
return;
}
if (!COMPONENT_IDENTIFIER_PATTERN.test(functionName)) {
return;
}
if (!LOWERCASE_CHARACTER_PATTERN.test(functionName)) {
return;
}
warn(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, "This usually means a React component was passed directly as `render={Component}`.", "Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.", "If this is an intentional render callback, rename it to start with a lowercase letter.", "Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.", "https://base-ui.com/r/invalid-render-prop");
}
function renderTag(Tag, props) {
if (Tag === "button") {
return /* @__PURE__ */ (0, import_react5.createElement)("button", {
type: "button",
...props,
key: props.key
});
}
if (Tag === "img") {
return /* @__PURE__ */ (0, import_react5.createElement)("img", {
alt: "",
...props,
key: props.key
});
}
return /* @__PURE__ */ React13.createElement(Tag, props);
}
// node_modules/@base-ui/react/internals/clamp.mjs
function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
return Math.max(min, Math.min(val, max));
}
// node_modules/@base-ui/react/internals/areArraysEqual.mjs
function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
}
// node_modules/@base-ui/utils/platform/parts.mjs
var parts_exports = {};
__export(parts_exports, {
engine: () => engine_exports,
env: () => env_exports,
os: () => os_exports,
screenReader: () => screen_reader_exports
});
// node_modules/@base-ui/utils/platform/os.mjs
var os_exports = {};
__export(os_exports, {
android: () => android,
apple: () => apple,
ios: () => ios,
linux: () => linux,
mac: () => mac,
windows: () => windows
});
// node_modules/@base-ui/utils/platform/shared.mjs
function readRawData() {
if (typeof navigator === "undefined") {
return {
userAgent: "",
platform: "",
maxTouchPoints: 0
};
}
if (true) {
const uaData = navigator.userAgentData;
if (uaData && Array.isArray(uaData.brands)) {
return {
userAgent: uaData.brands.map(({
brand,
version: version2
}) => `${brand}/${version2}`).join(" "),
platform: uaData.platform ?? navigator.platform ?? "",
maxTouchPoints: navigator.maxTouchPoints ?? 0
};
}
}
return {
userAgent: navigator.userAgent,
platform: navigator.platform ?? "",
maxTouchPoints: navigator.maxTouchPoints ?? 0
};
}
var {
userAgent,
platform,
maxTouchPoints
} = readRawData();
var lowerUserAgent = userAgent.toLowerCase();
var lowerPlatform = platform.toLowerCase();
// node_modules/@base-ui/utils/platform/os.mjs
var ios = /^i(os$|p)/.test(lowerPlatform) || lowerPlatform === "macintel" && maxTouchPoints > 1;
var ANDROID_STRING = "android";
var android = lowerPlatform === ANDROID_STRING || lowerUserAgent.includes(ANDROID_STRING);
var mac = !ios && lowerPlatform.startsWith("mac");
var windows = lowerPlatform.startsWith("win");
var linux = !android && /^(linux|chrome os)/.test(lowerPlatform);
var apple = mac || ios;
// node_modules/@base-ui/utils/platform/engine.mjs
var engine_exports = {};
__export(engine_exports, {
blink: () => blink,
gecko: () => gecko,
webkit: () => webkit
});
var webkit = typeof CSS !== "undefined" && !!CSS.supports?.("-webkit-backdrop-filter:none");
var gecko = !webkit && lowerUserAgent.includes("firefox");
var blink = !webkit && lowerUserAgent.includes("chrom");
// node_modules/@base-ui/utils/platform/screen-reader.mjs
var screen_reader_exports = {};
__export(screen_reader_exports, {
voiceOver: () => voiceOver
});
var voiceOver = apple;
// node_modules/@base-ui/utils/platform/env.mjs
var env_exports = {};
__export(env_exports, {
jsdom: () => jsdom
});
var jsdom = /jsdom|happydom/.test(lowerUserAgent);
// node_modules/@base-ui/react/internals/shadowDom.mjs
function activeElement(doc) {
let element = doc.activeElement;
while (element?.shadowRoot?.activeElement != null) {
element = element.shadowRoot.activeElement;
}
return element;
}
function contains(parent, child) {
if (!parent || !child) {
return false;
}
const rootNode = child.getRootNode?.();
if (parent.contains(child)) {
return true;
}
if (rootNode && isShadowRoot(rootNode)) {
let next = child;
while (next) {
if (parent === next) {
return true;
}
next = next.parentNode || next.host;
}
}
return false;
}
function getTarget(event) {
if ("composedPath" in event) {
return event.composedPath()[0];
}
return event.target;
}
// node_modules/@base-ui/react/floating-ui-react/utils/element.mjs
function matchesFocusVisible(element) {
if (!element || parts_exports.env.jsdom) {
return true;
}
try {
return element.matches(":focus-visible");
} catch (_e) {
return true;
}
}
// node_modules/@base-ui/react/internals/composite/list/CompositeList.mjs
var React15 = __toESM(require_react(), 1);
// node_modules/@base-ui/react/internals/composite/list/CompositeListContext.mjs
var React14 = __toESM(require_react(), 1);
var CompositeListContext = /* @__PURE__ */ React14.createContext({
register: () => {
},
unregister: () => {
},
subscribeMapChange: () => {
return () => {
};
},
elementsRef: {
current: []
},
nextIndexRef: {
current: 0
}
});
if (true) CompositeListContext.displayName = "CompositeListContext";
function useCompositeListContext() {
return React14.useContext(CompositeListContext);
}
// node_modules/@base-ui/react/internals/composite/list/CompositeList.mjs
var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
function CompositeList(props) {
const {
children,
elementsRef,
labelsRef,
onMapChange: onMapChangeProp
} = props;
const onMapChange = useStableCallback(onMapChangeProp);
const nextIndexRef = React15.useRef(0);
const listeners = useRefWithInit(createListeners).current;
const map = useRefWithInit(createMap).current;
const [mapTick, setMapTick] = React15.useState(0);
const lastTickRef = React15.useRef(mapTick);
const register = useStableCallback((node, metadata) => {
map.set(node, metadata ?? null);
lastTickRef.current += 1;
setMapTick(lastTickRef.current);
});
const unregister = useStableCallback((node) => {
map.delete(node);
lastTickRef.current += 1;
setMapTick(lastTickRef.current);
});
const sortedMap = React15.useMemo(() => {
disableEslintWarning(mapTick);
const newMap = /* @__PURE__ */ new Map();
const sortedNodes = Array.from(map.keys()).filter((node) => node.isConnected).sort(sortByDocumentPosition);
sortedNodes.forEach((node, index) => {
const metadata = map.get(node) ?? {};
newMap.set(node, {
...metadata,
index
});
});
return newMap;
}, [map, mapTick]);
useIsoLayoutEffect(() => {
if (typeof MutationObserver !== "function" || sortedMap.size === 0) {
return void 0;
}
const mutationObserver = new MutationObserver((entries) => {
const diff = /* @__PURE__ */ new Set();
const updateDiff = (node) => diff.has(node) ? diff.delete(node) : diff.add(node);
entries.forEach((entry) => {
entry.removedNodes.forEach(updateDiff);
entry.addedNodes.forEach(updateDiff);
});
if (diff.size === 0) {
lastTickRef.current += 1;
setMapTick(lastTickRef.current);
}
});
sortedMap.forEach((_, node) => {
if (node.parentElement) {
mutationObserver.observe(node.parentElement, {
childList: true
});
}
});
return () => {
mutationObserver.disconnect();
};
}, [sortedMap]);
useIsoLayoutEffect(() => {
const shouldUpdateLengths = lastTickRef.current === mapTick;
if (shouldUpdateLengths) {
if (elementsRef.current.length !== sortedMap.size) {
elementsRef.current.length = sortedMap.size;
}
if (labelsRef && labelsRef.current.length !== sortedMap.size) {
labelsRef.current.length = sortedMap.size;
}
nextIndexRef.current = sortedMap.size;
}
onMapChange(sortedMap);
}, [onMapChange, sortedMap, elementsRef, labelsRef, mapTick]);
useIsoLayoutEffect(() => {
return () => {
elementsRef.current = [];
};
}, [elementsRef]);
useIsoLayoutEffect(() => {
return () => {
if (labelsRef) {
labelsRef.current = [];
}
};
}, [labelsRef]);
const subscribeMapChange = useStableCallback((fn) => {
listeners.add(fn);
return () => {
listeners.delete(fn);
};
});
useIsoLayoutEffect(() => {
listeners.forEach((l) => l(sortedMap));
}, [listeners, sortedMap]);
const contextValue = React15.useMemo(() => ({
register,
unregister,
subscribeMapChange,
elementsRef,
labelsRef,
nextIndexRef
}), [register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef]);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CompositeListContext.Provider, {
value: contextValue,
children
});
}
function createMap() {
return /* @__PURE__ */ new Map();
}
function createListeners() {
return /* @__PURE__ */ new Set();
}
function sortByDocumentPosition(a, b) {
const position = a.compareDocumentPosition(b);
if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
return -1;
}
if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
return 1;
}
return 0;
}
function disableEslintWarning(_) {
}
// node_modules/@base-ui/react/internals/field-root-context/FieldRootContext.mjs
var React16 = __toESM(require_react(), 1);
// node_modules/@base-ui/react/field/control/FieldControlDataAttributes.mjs
var FieldControlDataAttributes = /* @__PURE__ */ function(FieldControlDataAttributes2) {
FieldControlDataAttributes2["disabled"] = "data-disabled";
FieldControlDataAttributes2["valid"] = "data-valid";
FieldControlDataAttributes2["invalid"] = "data-invalid";
FieldControlDataAttributes2["touched"] = "data-touched";
FieldControlDataAttributes2["dirty"] = "data-dirty";
FieldControlDataAttributes2["filled"] = "data-filled";
FieldControlDataAttributes2["focused"] = "data-focused";
return FieldControlDataAttributes2;
}({});
// node_modules/@base-ui/react/internals/field-constants/constants.mjs
var DEFAULT_VALIDITY_STATE = {
badInput: false,
customError: false,
patternMismatch: false,
rangeOverflow: false,
rangeUnderflow: false,
stepMismatch: false,
tooLong: false,
tooShort: false,
typeMismatch: false,
valid: null,
valueMissing: false
};
var DEFAULT_FIELD_STATE_ATTRIBUTES = {
valid: null,
touched: false,
dirty: false,
filled: false,
focused: false
};
var DEFAULT_FIELD_ROOT_STATE = {
disabled: false,
...DEFAULT_FIELD_STATE_ATTRIBUTES
};
var fieldValidityMapping = {
valid(value) {
if (value === null) {
return null;
}
if (value) {
return {
[FieldControlDataAttributes.valid]: ""
};
}
return {
[FieldControlDataAttributes.invalid]: ""
};
}
};
// node_modules/@base-ui/react/internals/field-root-context/FieldRootContext.mjs
var DEFAULT_FIELD_ROOT_CONTEXT = {
invalid: void 0,
name: void 0,
validityData: {
state: DEFAULT_VALIDITY_STATE,
errors: [],
error: "",
value: "",
initialValue: null
},
setValidityData: NOOP,
disabled: void 0,
touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
setTouched: NOOP,
dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
setDirty: NOOP,
filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
setFilled: NOOP,
focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
setFocused: NOOP,
validate: () => null,
validationMode: "onSubmit",
validationDebounceTime: 0,
shouldValidateOnChange: () => false,
state: DEFAULT_FIELD_ROOT_STATE,
markedDirtyRef: {
current: false
},
registerFieldControl: NOOP,
validation: {
getValidationProps: (_disabled, props = EMPTY_OBJECT) => props,
inputRef: {
current: null
},
registerInput: NOOP,
commit: async () => {
},
change: NOOP
}
};
var FieldRootContext = /* @__PURE__ */ React16.createContext(DEFAULT_FIELD_ROOT_CONTEXT);
if (true) FieldRootContext.displayName = "FieldRootContext";
function useFieldRootContext(optional = true) {
const context = React16.useContext(FieldRootContext);
if (context.setValidityData === NOOP && !optional) {
throw new Error(true ? "Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>." : formatErrorMessage_default(28));
}
return context;
}
// node_modules/@base-ui/react/internals/field-register-control/useRegisterFieldControl.mjs
var React17 = __toESM(require_react(), 1);
function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, enabled = true, name) {
const {
registerFieldControl
} = useFieldRootContext();
const sourceRef = React17.useRef(null);
if (!sourceRef.current) {
sourceRef.current = Symbol();
}
useIsoLayoutEffect(() => {
const source = sourceRef.current;
if (!source || !enabled) {
return void 0;
}
const registration = {
controlRef,
getValue: getFormValueOverride,
id,
name,
value
};
registerFieldControl(source, registration);
return () => {
registerFieldControl(source, void 0);
};
}, [controlRef, enabled, getFormValueOverride, id, name, registerFieldControl, value]);
}
// node_modules/@base-ui/react/internals/form-context/FormContext.mjs
var React18 = __toESM(require_react(), 1);
var FormContext = /* @__PURE__ */ React18.createContext({
formRef: {
current: {
fields: /* @__PURE__ */ new Map()
}
},
errors: {},
clearErrors: NOOP,
validationMode: "onSubmit",
submitAttemptedRef: {
current: false
}
});
if (true) FormContext.displayName = "FormContext";
function useFormContext() {
return React18.useContext(FormContext);
}
// node_modules/@base-ui/react/internals/labelable-provider/LabelableContext.mjs
var React19 = __toESM(require_react(), 1);
var LabelableContext = /* @__PURE__ */ React19.createContext({
controlId: void 0,
registerControlId: NOOP,
labelId: void 0,
setLabelId: NOOP,
messageIds: [],
setMessageIds: NOOP,
getDescriptionProps: (externalProps) => externalProps
});
if (true) LabelableContext.displayName = "LabelableContext";
function useLabelableContext() {
return React19.useContext(LabelableContext);
}
// node_modules/@base-ui/react/utils/resolveAriaLabelledBy.mjs
function getDefaultLabelId(id) {
return id == null ? void 0 : `${id}-label`;
}
function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
return fieldLabelId ?? localLabelId;
}
// node_modules/@base-ui/react/slider/utils/asc.mjs
function asc(a, b) {
return a - b;
}
// node_modules/@base-ui/react/slider/utils/replaceArrayItemAtIndex.mjs
function replaceArrayItemAtIndex(array, index, newValue) {
const output = array.slice();
output[index] = newValue;
return output.sort(asc);
}
// node_modules/@base-ui/react/slider/utils/getSliderValue.mjs
function getSliderValue(valueInput, index, min, max, range, values) {
let newValue = valueInput;
newValue = clamp(newValue, min, max);
if (range) {
newValue = replaceArrayItemAtIndex(
values,
index,
// Bound the new value to the thumb's neighbours.
clamp(newValue, values[index - 1] ?? -Infinity, values[index + 1] ?? Infinity)
);
}
return newValue;
}
// node_modules/@base-ui/react/slider/utils/validateMinimumDistance.mjs
function validateMinimumDistance(values, step, minStepsBetweenValues) {
if (!Array.isArray(values)) {
return true;
}
const distances = values.reduce((acc, val, index, vals) => {
if (index === vals.length - 1) {
return acc;
}
acc.push(Math.abs(val - vals[index + 1]));
return acc;
}, []);
return Math.min(...distances) >= step * minStepsBetweenValues;
}
// node_modules/@base-ui/react/slider/root/stateAttributesMapping.mjs
var sliderStateAttributesMapping = {
activeThumbIndex: () => null,
max: () => null,
min: () => null,
minStepsBetweenValues: () => null,
step: () => null,
values: () => null,
...fieldValidityMapping
};
// node_modules/@base-ui/react/slider/root/SliderRootContext.mjs
var React20 = __toESM(require_react(), 1);
var SliderRootContext = /* @__PURE__ */ React20.createContext(void 0);
if (true) SliderRootContext.displayName = "SliderRootContext";
function useSliderRootContext() {
const context = React20.useContext(SliderRootContext);
if (context === void 0) {
throw new Error(true ? "Base UI: SliderRootContext is missing. Slider parts must be placed within <Slider.Root>." : formatErrorMessage_default(62));
}
return context;
}
// node_modules/@base-ui/react/slider/root/SliderRoot.mjs
var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
function getSliderChangeEventReason(event) {
return "key" in event ? reason_parts_exports.keyboard : reason_parts_exports.inputChange;
}
function areValuesEqual(newValue, oldValue) {
if (typeof newValue === "number" && typeof oldValue === "number") {
return newValue === oldValue;
}
if (Array.isArray(newValue) && Array.isArray(oldValue)) {
return areArraysEqual(newValue, oldValue);
}
return false;
}
var SliderRoot = /* @__PURE__ */ React21.forwardRef(function SliderRoot2(componentProps, forwardedRef) {
const {
"aria-labelledby": ariaLabelledByProp,
className,
defaultValue,
disabled: disabledProp = false,
id: idProp,
format,
largeStep = 10,
locale,
render,
max = 100,
min = 0,
minStepsBetweenValues = 0,
form,
name: nameProp,
onValueChange: onValueChangeProp,
onValueCommitted: onValueCommittedProp,
orientation = "horizontal",
step = 1,
thumbCollisionBehavior = "push",
thumbAlignment = "center",
value: valueProp,
style,
...elementProps
} = componentProps;
const id = useBaseUiId(idProp);
const defaultLabelId = getDefaultLabelId(id);
const onValueChange = useStableCallback(onValueChangeProp);
const onValueCommitted = useStableCallback(onValueCommittedProp);
const {
clearErrors
} = useFormContext();
const {
state: fieldState,
disabled: fieldDisabled,
name: fieldName,
setTouched,
setDirty,
validityData,
validation
} = useFieldRootContext();
const {
labelId: fieldLabelId
} = useLabelableContext();
const [labelId, setLabelId] = React21.useState();
const ariaLabelledby = ariaLabelledByProp ?? resolveAriaLabelledBy(fieldLabelId, labelId);
const disabled2 = fieldDisabled || disabledProp;
const name = fieldName ?? nameProp;
const [valueUnwrapped, setValueUnwrapped] = useControlled({
controlled: valueProp,
default: defaultValue ?? min,
name: "Slider"
});
const sliderRef = React21.useRef(null);
const controlRef = React21.useRef(null);
const thumbRefs = React21.useRef([]);
const pressedInputRef = React21.useRef(null);
const pressedThumbCenterOffsetRef = React21.useRef(null);
const pressedThumbIndexRef = React21.useRef(-1);
const pressedValuesRef = React21.useRef(null);
const lastChangeReasonRef = React21.useRef("none");
const formatOptionsRef = useValueAsRef(format);
const [active, setActiveState] = React21.useState(-1);
const [lastUsedThumbIndex, setLastUsedThumbIndex] = React21.useState(-1);
const [dragging, setDragging] = React21.useState(false);
const [thumbMap, setThumbMap] = React21.useState(() => /* @__PURE__ */ new Map());
const [indicatorPosition, setIndicatorPosition] = React21.useState([void 0, void 0]);
const setActive = useStableCallback((value) => {
setActiveState(value);
if (value !== -1) {
setLastUsedThumbIndex(value);
}
});
useRegisterFieldControl(validation.inputRef, id, valueUnwrapped, void 0, !disabled2, nameProp);
useValueChanged(valueUnwrapped, () => {
clearErrors(name);
validation.change(valueUnwrapped);
const initialValue = validityData.initialValue;
let isDirty;
if (Array.isArray(valueUnwrapped) && Array.isArray(initialValue)) {
isDirty = !areArraysEqual(valueUnwrapped, initialValue);
} else {
isDirty = valueUnwrapped !== initialValue;
}
setDirty(isDirty);
});
const registerFieldControlRef = useStableCallback((element2) => {
if (element2) {
controlRef.current = element2;
}
});
const range = Array.isArray(valueUnwrapped);
const values = React21.useMemo(() => {
if (!range) {
return [clamp(valueUnwrapped, min, max)];
}
return valueUnwrapped.slice().sort(asc);
}, [max, min, range, valueUnwrapped]);
const setValue = useStableCallback((newValue, details) => {
if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped)) {
return false;
}
const changeDetails = details ?? createChangeEventDetails(reason_parts_exports.none, void 0, void 0, {
activeThumbIndex: -1
});
const nativeEvent = changeDetails.event;
const EventConstructor = nativeEvent.constructor ?? Event;
const clonedEvent = new EventConstructor(nativeEvent.type, nativeEvent);
Object.defineProperty(clonedEvent, "target", {
writable: true,
value: {
value: newValue,
name
}
});
changeDetails.event = clonedEvent;
onValueChange(newValue, changeDetails);
if (changeDetails.isCanceled) {
return false;
}
lastChangeReasonRef.current = changeDetails.reason;
setValueUnwrapped(newValue);
return true;
});
const handleInputChange = useStableCallback((valueInput, index, event) => {
const newValue = getSliderValue(valueInput, index, min, max, range, values);
if (validateMinimumDistance(newValue, step, minStepsBetweenValues)) {
const reason = getSliderChangeEventReason(event);
const applied = setValue(newValue, createChangeEventDetails(reason, event.nativeEvent, void 0, {
activeThumbIndex: index
}));
setTouched(true);
if (applied) {
onValueCommitted(newValue, createGenericEventDetails(reason, event.nativeEvent));
}
}
});
if (true) {
if (min >= max) {
warn("Slider `max` must be greater than `min`.");
}
}
useIsoLayoutEffect(() => {
const activeEl = activeElement(ownerDocument(sliderRef.current));
if (disabled2 && contains(sliderRef.current, activeEl)) {
activeEl.blur();
}
}, [disabled2]);
if (disabled2 && active !== -1) {
setActive(-1);
}
const state = React21.useMemo(() => ({
...fieldState,
activeThumbIndex: active,
disabled: disabled2,
dragging,
orientation,
max,
min,
minStepsBetweenValues,
step,
values
}), [fieldState, active, disabled2, dragging, max, min, minStepsBetweenValues, orientation, step, values]);
const contextValue = React21.useMemo(() => ({
active,
controlRef,
disabled: disabled2,
dragging,
validation,
formatOptionsRef,
handleInputChange,
indicatorPosition,
inset: thumbAlignment !== "center",
labelId: ariaLabelledby,
rootLabelId: defaultLabelId,
largeStep,
lastUsedThumbIndex,
lastChangeReasonRef,
form,
locale,
max,
min,
minStepsBetweenValues,
name,
onValueCommitted,
orientation,
pressedInputRef,
pressedThumbCenterOffsetRef,
pressedThumbIndexRef,
pressedValuesRef,
registerFieldControlRef,
renderBeforeHydration: thumbAlignment === "edge",
setActive,
setDragging,
setIndicatorPosition,
setLabelId,
setValue,
state,
step,
thumbCollisionBehavior,
thumbMap,
thumbRefs,
values
}), [active, controlRef, ariaLabelledby, defaultLabelId, disabled2, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangeReasonRef, form, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setLabelId, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
const element = useRenderElement("div", componentProps, {
state,
ref: [forwardedRef, sliderRef],
props: [{
"aria-labelledby": ariaLabelledby,
id,
role: "group"
}, elementProps, (props) => validation.getValidationProps(disabled2, props)],
stateAttributesMapping: sliderStateAttributesMapping
});
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SliderRootContext.Provider, {
value: contextValue,
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CompositeList, {
elementsRef: thumbRefs,
onMapChange: setThumbMap,
children: element
})
});
});
if (true) SliderRoot.displayName = "SliderRoot";
// node_modules/@base-ui/react/slider/label/SliderLabel.mjs
var React22 = __toESM(require_react(), 1);
// node_modules/@base-ui/react/utils/useRegisteredLabelId.mjs
function useRegisteredLabelId(idProp, setLabelId) {
const id = useBaseUiId(idProp);
useIsoLayoutEffect(() => {
setLabelId(id);
return () => {
setLabelId(void 0);
};
}, [id, setLabelId]);
return id;
}
// node_modules/@base-ui/react/internals/labelable-provider/useLabel.mjs
function useLabel(params = {}) {
const {
id: idProp,
fallbackControlId,
native = false,
setLabelId: setLabelIdProp,
focusControl: focusControlProp
} = params;
const {
controlId: contextControlId,
setLabelId: setContextLabelId
} = useLabelableContext();
const syncLabelId = useStableCallback((nextLabelId) => {
setContextLabelId(nextLabelId);
setLabelIdProp?.(nextLabelId);
});
const id = useRegisteredLabelId(idProp, syncLabelId);
const resolvedControlId = contextControlId ?? fallbackControlId;
function focusControl(event) {
if (focusControlProp) {
focusControlProp(event, resolvedControlId);
return;
}
if (!resolvedControlId) {
return;
}
const controlElement = ownerDocument(event.currentTarget).getElementById(resolvedControlId);
if (isHTMLElement(controlElement)) {
focusElementWithVisible(controlElement);
}
}
function handleInteraction(event) {
const target = getTarget(event.nativeEvent);
if (target?.closest("button,input,select,textarea")) {
return;
}
if (!event.defaultPrevented && event.detail > 1) {
event.preventDefault();
}
if (native) {
return;
}
focusControl(event);
}
return native ? {
id,
htmlFor: resolvedControlId ?? void 0,
onMouseDown: handleInteraction
} : {
id,
onClick: handleInteraction,
onPointerDown(event) {
event.preventDefault();
}
};
}
function focusElementWithVisible(element) {
element.focus({
// Available from Chrome 144+ (January 2026).
// Safari and Firefox already support it.
focusVisible: true
});
}
// node_modules/@base-ui/react/slider/label/SliderLabel.mjs
var SliderLabel = /* @__PURE__ */ React22.forwardRef(function SliderLabel2(componentProps, forwardedRef) {
const {
render,
className,
style,
...elementProps
} = componentProps;
const elementPropsWithoutId = elementProps;
delete elementPropsWithoutId.id;
const {
state,
setLabelId,
controlRef,
rootLabelId
} = useSliderRootContext();
function focusControl(event, controlId) {
if (controlId) {
const controlElement = ownerDocument(event.currentTarget).getElementById(controlId);
if (isHTMLElement(controlElement)) {
focusElementWithVisible(controlElement);
return;
}
}
const fallbackInputs = controlRef.current?.querySelectorAll('input[type="range"]');
const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null;
if (isHTMLElement(fallbackInput)) {
focusElementWithVisible(fallbackInput);
}
}
const labelProps = useLabel({
id: rootLabelId,
setLabelId,
focusControl
});
return useRenderElement("div", componentProps, {
ref: forwardedRef,
state,
props: [labelProps, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
});
if (true) SliderLabel.displayName = "SliderLabel";
// node_modules/@base-ui/react/slider/value/SliderValue.mjs
var React23 = __toESM(require_react(), 1);
// node_modules/@base-ui/react/utils/stringifyLocale.mjs
function stringifyLocale(locale) {
if (Array.isArray(locale)) {
return locale.map((value) => stringifyLocale(value)).join(",");
}
if (locale == null) {
return "";
}
return String(locale);
}
// node_modules/@base-ui/react/utils/formatNumber.mjs
var cache = /* @__PURE__ */ new Map();
function getFormatter(locale, options) {
const optionsString = JSON.stringify({
locale: stringifyLocale(locale),
options
});
const cachedFormatter = cache.get(optionsString);
if (cachedFormatter) {
return cachedFormatter;
}
const formatter = new Intl.NumberFormat(locale, options);
cache.set(optionsString, formatter);
return formatter;
}
function formatNumber(value, locale, options) {
if (value == null) {
return "";
}
return getFormatter(locale, options).format(value);
}
// node_modules/@base-ui/react/slider/value/SliderValue.mjs
var SliderValue = /* @__PURE__ */ React23.forwardRef(function SliderValue2(componentProps, forwardedRef) {
const {
"aria-live": ariaLive = "off",
render,
className,
children,
style,
...elementProps
} = componentProps;
const {
thumbMap,
state,
values,
formatOptionsRef,
locale
} = useSliderRootContext();
let htmlFor = "";
for (const thumbMetadata of thumbMap.values()) {
if (thumbMetadata?.inputId) {
htmlFor += `${thumbMetadata.inputId} `;
}
}
const outputFor = htmlFor.trim() === "" ? void 0 : htmlFor.trim();
const formattedValues = React23.useMemo(() => {
const arr = [];
for (let i = 0; i < values.length; i += 1) {
arr.push(formatNumber(values[i], locale, formatOptionsRef.current ?? void 0));
}
return arr;
}, [formatOptionsRef, locale, values]);
const defaultDisplayValue = values.map((v, i) => formattedValues[i] || v).join(" \u2013 ");
const element = useRenderElement("output", componentProps, {
state,
ref: forwardedRef,
props: [{
// off by default because it will keep announcing when the slider is being dragged
// and also when the value is changing (but not yet committed)
"aria-live": ariaLive,
children: typeof children === "function" ? children(formattedValues, values) : defaultDisplayValue,
htmlFor: outputFor
}, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
return element;
});
if (true) SliderValue.displayName = "SliderValue";
// node_modules/@base-ui/react/slider/control/SliderControl.mjs
var React26 = __toESM(require_react(), 1);
// node_modules/@base-ui/utils/addEventListener.mjs
function addEventListener(target, type, listener, options) {
target.addEventListener(type, listener, options);
return () => {
target.removeEventListener(type, listener, options);
};
}
// node_modules/@base-ui/utils/useOnMount.mjs
var React24 = __toESM(require_react(), 1);
var EMPTY = [];
function useOnMount(fn) {
React24.useEffect(fn, EMPTY);
}
// node_modules/@base-ui/utils/useAnimationFrame.mjs
var EMPTY2 = null;
var LAST_RAF = globalThis.requestAnimationFrame;
var Scheduler = class {
constructor() {
/* This implementation uses an array as a backing data-structure for frame callbacks.
* It allows `O(1)` callback cancelling by inserting a `null` in the array, though it
* never calls the native `cancelAnimationFrame` if there are no frames left. This can
* be much more efficient if there is a call pattern that alterns as
* "request-cancel-request-cancel-…".
* But in the case of "request-request-…-cancel-cancel-…", it leaves the final animation
* frame to run anyway. We turn that frame into a `O(1)` no-op via `callbacksCount`. */
__publicField(this, "callbacks", []);
__publicField(this, "callbacksCount", 0);
__publicField(this, "nextId", 1);
__publicField(this, "startId", 1);
__publicField(this, "isScheduled", false);
__publicField(this, "tick", (timestamp) => {
this.isScheduled = false;
const currentCallbacks = this.callbacks;
const currentCallbacksCount = this.callbacksCount;
this.callbacks = [];
this.callbacksCount = 0;
this.startId = this.nextId;
if (currentCallbacksCount > 0) {
for (let i = 0; i < currentCallbacks.length; i += 1) {
currentCallbacks[i]?.(timestamp);
}
}
});
}
request(fn) {
const id = this.nextId;
this.nextId += 1;
this.callbacks.push(fn);
this.callbacksCount += 1;
const didRAFChange = LAST_RAF !== requestAnimationFrame && (LAST_RAF = requestAnimationFrame, true);
if (!this.isScheduled || didRAFChange) {
requestAnimationFrame(this.tick);
this.isScheduled = true;
}
return id;
}
cancel(id) {
const index = id - this.startId;
if (index < 0 || index >= this.callbacks.length) {
return;
}
this.callbacks[index] = null;
this.callbacksCount -= 1;
}
};
var scheduler = new Scheduler();
var AnimationFrame = class _AnimationFrame {
constructor() {
__publicField(this, "currentId", EMPTY2);
__publicField(this, "cancel", () => {
if (this.currentId !== EMPTY2) {
scheduler.cancel(this.currentId);
this.currentId = EMPTY2;
}
});
__publicField(this, "disposeEffect", () => {
return this.cancel;
});
}
static create() {
return new _AnimationFrame();
}
static request(fn) {
return scheduler.request(fn);
}
static cancel(id) {
return scheduler.cancel(id);
}
/**
* Executes `fn` after `delay`, clearing any previously scheduled call.
*/
request(fn) {
this.cancel();
this.currentId = scheduler.request(() => {
this.currentId = EMPTY2;
fn();
});
}
};
function useAnimationFrame() {
const timeout = useRefWithInit(AnimationFrame.create).current;
useOnMount(timeout.disposeEffect);
return timeout;
}
// node_modules/@base-ui/react/internals/direction-context/DirectionContext.mjs
var React25 = __toESM(require_react(), 1);
var DirectionContext = /* @__PURE__ */ React25.createContext(void 0);
if (true) DirectionContext.displayName = "DirectionContext";
function useDirection() {
const context = React25.useContext(DirectionContext);
return context?.direction ?? "ltr";
}
// node_modules/@base-ui/react/slider/utils/getMidpoint.mjs
function getMidpoint(element) {
const rect = element.getBoundingClientRect();
return {
x: (rect.left + rect.right) / 2,
y: (rect.top + rect.bottom) / 2
};
}
// node_modules/@base-ui/react/slider/utils/roundValueToStep.mjs
function getDecimalPrecision(num) {
if (num === 0) {
return 0;
}
if (Math.abs(num) < 1) {
const parts = num.toExponential().split("e-");
const matissaDecimalPart = parts[0].split(".")[1];
return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
}
const decimalPart = num.toString().split(".")[1];
return decimalPart ? decimalPart.length : 0;
}
function roundValueToStep(value, step, min) {
const nearest = Math.round((value - min) / step) * step + min;
return Number(nearest.toFixed(Math.max(getDecimalPrecision(step), getDecimalPrecision(min))));
}
// node_modules/@base-ui/react/slider/utils/getPushedThumbValues.mjs
function getPushedThumbValues({
values,
index,
nextValue,
min,
max,
step,
minStepsBetweenValues,
initialValues
}) {
if (values.length === 0) {
return [];
}
const nextValues = values.slice();
const minValueDifference = step * minStepsBetweenValues;
const lastIndex = nextValues.length - 1;
const baseInitialValues = initialValues ?? values;
const indexMin = min + index * minValueDifference;
const indexMax = max - (lastIndex - index) * minValueDifference;
nextValues[index] = clamp(nextValue, indexMin, indexMax);
for (let i = index + 1; i <= lastIndex; i += 1) {
const minAllowed = nextValues[i - 1] + minValueDifference;
const maxAllowed = max - (lastIndex - i) * minValueDifference;
const initialValue = baseInitialValues[i] ?? nextValues[i];
let candidate = Math.max(nextValues[i], minAllowed);
if (initialValue < candidate) {
candidate = Math.max(initialValue, minAllowed);
}
nextValues[i] = clamp(candidate, minAllowed, maxAllowed);
}
for (let i = index - 1; i >= 0; i -= 1) {
const maxAllowed = nextValues[i + 1] - minValueDifference;
const minAllowed = min + i * minValueDifference;
const initialValue = baseInitialValues[i] ?? nextValues[i];
let candidate = Math.min(nextValues[i], maxAllowed);
if (initialValue > candidate) {
candidate = Math.min(initialValue, maxAllowed);
}
nextValues[i] = clamp(candidate, minAllowed, maxAllowed);
}
for (let i = 0; i <= lastIndex; i += 1) {
nextValues[i] = Number(nextValues[i].toFixed(12));
}
return nextValues;
}
// node_modules/@base-ui/react/slider/utils/resolveThumbCollision.mjs
function resolveThumbCollision({
behavior,
values,
currentValues,
initialValues,
pressedIndex,
nextValue,
min,
max,
step,
minStepsBetweenValues
}) {
const activeValues = currentValues ?? values;
const baselineValues = initialValues ?? values;
const range = activeValues.length > 1;
if (!range) {
return {
value: nextValue,
thumbIndex: 0,
didSwap: false
};
}
const minValueDifference = step * minStepsBetweenValues;
switch (behavior) {
case "swap": {
const pressedInitialValue = activeValues[pressedIndex];
const epsilon = 1e-7;
const candidateValues = activeValues.slice();
const previousNeighbor = candidateValues[pressedIndex - 1];
const nextNeighbor = candidateValues[pressedIndex + 1];
const lowerBound = previousNeighbor != null ? previousNeighbor + minValueDifference : min;
const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max;
const constrainedValue = clamp(nextValue, lowerBound, upperBound);
const pressedValueAfterClamp = Number(constrainedValue.toFixed(12));
candidateValues[pressedIndex] = pressedValueAfterClamp;
const movingForward = nextValue > pressedInitialValue;
const movingBackward = nextValue < pressedInitialValue;
const shouldSwapForward = movingForward && nextNeighbor != null && nextValue >= nextNeighbor - epsilon;
const shouldSwapBackward = movingBackward && previousNeighbor != null && nextValue <= previousNeighbor + epsilon;
if (!shouldSwapForward && !shouldSwapBackward) {
return {
value: candidateValues,
thumbIndex: pressedIndex,
didSwap: false
};
}
const targetIndex = shouldSwapForward ? pressedIndex + 1 : pressedIndex - 1;
const initialValuesForPush = candidateValues.map((_, index) => {
if (index === pressedIndex) {
return pressedValueAfterClamp;
}
const baseline = baselineValues[index];
if (baseline != null) {
return baseline;
}
return activeValues[index];
});
let nextValueForTarget = nextValue;
if (shouldSwapForward) {
nextValueForTarget = Math.max(nextValue, candidateValues[targetIndex]);
} else {
nextValueForTarget = Math.min(nextValue, candidateValues[targetIndex]);
}
const adjustedValues = getPushedThumbValues({
values: candidateValues,
index: targetIndex,
nextValue: nextValueForTarget,
min,
max,
step,
minStepsBetweenValues,
initialValues: initialValuesForPush
});
const neighborIndex = shouldSwapForward ? targetIndex - 1 : targetIndex + 1;
if (neighborIndex >= 0 && neighborIndex < adjustedValues.length) {
const previousValue = adjustedValues[neighborIndex - 1];
const nextValueAfter = adjustedValues[neighborIndex + 1];
let neighborLowerBound = previousValue != null ? previousValue + minValueDifference : min;
neighborLowerBound = Math.max(neighborLowerBound, min + neighborIndex * minValueDifference);
let neighborUpperBound = nextValueAfter != null ? nextValueAfter - minValueDifference : max;
neighborUpperBound = Math.min(neighborUpperBound, max - (adjustedValues.length - 1 - neighborIndex) * minValueDifference);
const restoredValue = clamp(pressedValueAfterClamp, neighborLowerBound, neighborUpperBound);
adjustedValues[neighborIndex] = Number(restoredValue.toFixed(12));
}
return {
value: adjustedValues,
thumbIndex: targetIndex,
didSwap: true
};
}
case "push": {
const nextValues = getPushedThumbValues({
values: activeValues,
index: pressedIndex,
nextValue,
min,
max,
step,
minStepsBetweenValues
});
return {
value: nextValues,
thumbIndex: pressedIndex,
didSwap: false
};
}
case "none":
default: {
const candidateValues = activeValues.slice();
const previousNeighbor = candidateValues[pressedIndex - 1];
const nextNeighbor = candidateValues[pressedIndex + 1];
const lowerBound = previousNeighbor != null ? previousNeighbor + minValueDifference : min;
const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max;
const constrainedValue = clamp(nextValue, lowerBound, upperBound);
candidateValues[pressedIndex] = Number(constrainedValue.toFixed(12));
return {
value: candidateValues,
thumbIndex: pressedIndex,
didSwap: false
};
}
}
}
// node_modules/@base-ui/react/slider/control/SliderControl.mjs
var INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
function getControlOffset(styles, vertical) {
if (!styles) {
return {
start: 0,
end: 0
};
}
function parseSize(value) {
const parsed = value != null ? parseFloat(value) : 0;
return Number.isNaN(parsed) ? 0 : parsed;
}
const start = !vertical ? "InlineStart" : "Top";
const end = !vertical ? "InlineEnd" : "Bottom";
return {
start: parseSize(styles[`border${start}Width`]) + parseSize(styles[`padding${start}`]),
end: parseSize(styles[`border${end}Width`]) + parseSize(styles[`padding${end}`])
};
}
function getFingerCoords(event, touchIdRef) {
if (touchIdRef.current != null && event.changedTouches) {
const touchEvent = event;
for (let i = 0; i < touchEvent.changedTouches.length; i += 1) {
const touch = touchEvent.changedTouches[i];
if (touch.identifier === touchIdRef.current) {
return {
x: touch.clientX,
y: touch.clientY
};
}
}
return null;
}
return {
x: event.clientX,
y: event.clientY
};
}
var SliderControl = /* @__PURE__ */ React26.forwardRef(function SliderControl2(componentProps, forwardedRef) {
const {
render: renderProp,
className,
style,
...elementProps
} = componentProps;
const {
disabled: disabled2,
dragging,
inset,
lastChangeReasonRef,
max,
min,
minStepsBetweenValues,
onValueCommitted,
orientation,
pressedInputRef,
pressedThumbCenterOffsetRef,
pressedThumbIndexRef,
pressedValuesRef,
registerFieldControlRef,
renderBeforeHydration,
setActive,
setDragging,
setValue,
state,
step,
thumbCollisionBehavior,
thumbRefs,
values
} = useSliderRootContext();
const direction = useDirection();
const range = values.length > 1;
const vertical = orientation === "vertical";
const controlRef = React26.useRef(null);
const stylesRef = React26.useRef(null);
const setStylesRef = useStableCallback((element2) => {
if (element2 && stylesRef.current == null) {
stylesRef.current = getWindow(element2).getComputedStyle(element2);
}
});
const touchIdRef = React26.useRef(null);
const moveCountRef = React26.useRef(0);
const insetThumbOffsetRef = React26.useRef(0);
const currentInteractionValueRef = React26.useRef(null);
const latestValuesRef = useValueAsRef(values);
function updatePressedThumb(nextIndex) {
if (pressedThumbIndexRef.current !== nextIndex) {
pressedThumbIndexRef.current = nextIndex;
}
const thumbElement = thumbRefs.current[nextIndex];
if (!thumbElement) {
pressedThumbCenterOffsetRef.current = null;
pressedInputRef.current = null;
return;
}
pressedInputRef.current = thumbElement.querySelector('input[type="range"]');
}
function resetPressedThumb() {
pressedThumbIndexRef.current = -1;
pressedThumbCenterOffsetRef.current = null;
pressedInputRef.current = null;
}
function isTargetDisabledThumb(target) {
if (!isElement(target)) {
return false;
}
return thumbRefs.current.some((thumbEl) => {
if (!isElement(thumbEl) || !contains(thumbEl, target)) {
return false;
}
return thumbEl.querySelector('input[type="range"]')?.disabled === true;
});
}
function getFingerState(fingerCoords) {
const control = controlRef.current;
const thumbIndex = pressedThumbIndexRef.current;
if (!control || !range && (thumbIndex < 0 || thumbIndex >= values.length)) {
return null;
}
const {
width,
height,
bottom,
left,
right
} = control.getBoundingClientRect();
const controlOffset = getControlOffset(stylesRef.current, vertical);
const insetThumbOffset = insetThumbOffsetRef.current;
const controlSize = (vertical ? height : width) - controlOffset.start - controlOffset.end - insetThumbOffset * 2;
const thumbCenterOffset = pressedThumbCenterOffsetRef.current ?? 0;
const fingerX = fingerCoords.x - thumbCenterOffset;
const fingerY = fingerCoords.y - thumbCenterOffset;
const valueSize = vertical ? bottom - fingerY - controlOffset.end : (direction === "rtl" ? right - fingerX : fingerX - left) - controlOffset.start;
const valueRescaled = clamp((valueSize - insetThumbOffset) / controlSize, 0, 1);
let newValue = (max - min) * valueRescaled + min;
newValue = roundValueToStep(newValue, step, min);
newValue = clamp(newValue, min, max);
if (!range) {
return {
value: newValue,
thumbIndex,
didSwap: false
};
}
if (thumbIndex < 0) {
return null;
}
const collisionResult = resolveThumbCollision({
behavior: thumbCollisionBehavior,
values,
currentValues: latestValuesRef.current ?? values,
initialValues: pressedValuesRef.current,
pressedIndex: thumbIndex,
nextValue: newValue,
min,
max,
step,
minStepsBetweenValues
});
return collisionResult;
}
function startPressing(fingerCoords) {
pressedValuesRef.current = range ? values.slice() : null;
currentInteractionValueRef.current = null;
latestValuesRef.current = values;
const pressedThumbIndex = pressedThumbIndexRef.current;
let closestThumbIndex = pressedThumbIndex;
if (pressedThumbIndex > -1 && pressedThumbIndex < values.length) {
if (values[pressedThumbIndex] === max) {
let candidateIndex = pressedThumbIndex;
while (candidateIndex > 0 && values[candidateIndex - 1] === max) {
candidateIndex -= 1;
}
closestThumbIndex = candidateIndex;
}
} else {
const axis = !vertical ? "x" : "y";
let minDistance;
closestThumbIndex = -1;
for (let i = 0; i < thumbRefs.current.length; i += 1) {
const thumbEl = thumbRefs.current[i];
if (isElement(thumbEl) && !thumbEl.querySelector('input[type="range"]')?.disabled) {
const midpoint = getMidpoint(thumbEl);
const distance = Math.abs(fingerCoords[axis] - midpoint[axis]);
if (minDistance === void 0 || distance <= minDistance) {
closestThumbIndex = i;
minDistance = distance;
}
}
}
}
if (closestThumbIndex > -1 && closestThumbIndex !== pressedThumbIndex) {
updatePressedThumb(closestThumbIndex);
}
if (inset) {
const thumbEl = thumbRefs.current[closestThumbIndex];
if (isElement(thumbEl)) {
const thumbRect = thumbEl.getBoundingClientRect();
const side = !vertical ? "width" : "height";
insetThumbOffsetRef.current = thumbRect[side] / 2;
}
}
}
function focusThumb(thumbIndex) {
const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
if (!input) {
return;
}
input.focus({
preventScroll: true,
// Prevent pointer-driven focus rings in browsers that support this option.
// Supported in Chrome from 144+.
focusVisible: false
});
}
function setValueFromPointer(finger, reason, nativeEvent) {
const applied = setValue(finger.value, createChangeEventDetails(reason, nativeEvent, void 0, {
activeThumbIndex: finger.thumbIndex
}));
if (applied) {
currentInteractionValueRef.current = finger.value;
latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];
if (finger.didSwap) {
updatePressedThumb(finger.thumbIndex);
}
}
return applied;
}
const handleTouchMove = useStableCallback((nativeEvent) => {
const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
if (fingerCoords == null) {
return;
}
moveCountRef.current += 1;
if (nativeEvent.type === "pointermove" && nativeEvent.buttons === 0) {
handleTouchEnd(nativeEvent);
return;
}
const finger = getFingerState(fingerCoords);
if (finger == null) {
return;
}
if (validateMinimumDistance(finger.value, step, minStepsBetweenValues)) {
if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
setDragging(true);
}
const applied = setValueFromPointer(finger, reason_parts_exports.drag, nativeEvent);
if (applied && finger.didSwap) {
focusThumb(finger.thumbIndex);
}
}
});
const handleTouchEnd = useStableCallback((nativeEvent) => {
setActive(-1);
setDragging(false);
pressedInputRef.current = null;
pressedThumbCenterOffsetRef.current = null;
if (currentInteractionValueRef.current != null) {
const commitReason = lastChangeReasonRef.current;
onValueCommitted(currentInteractionValueRef.current, createGenericEventDetails(commitReason, nativeEvent));
}
if ("pointerType" in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) {
controlRef.current?.releasePointerCapture(nativeEvent.pointerId);
}
pressedThumbIndexRef.current = -1;
touchIdRef.current = null;
pressedValuesRef.current = null;
currentInteractionValueRef.current = null;
stopListening();
});
const handleTouchStart = useStableCallback((nativeEvent) => {
if (disabled2) {
return;
}
if (isTargetDisabledThumb(getTarget(nativeEvent))) {
resetPressedThumb();
return;
}
const touch = nativeEvent.changedTouches[0];
if (touch != null) {
touchIdRef.current = touch.identifier;
}
const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
if (fingerCoords != null) {
startPressing(fingerCoords);
const finger = getFingerState(fingerCoords);
if (finger == null) {
return;
}
focusThumb(finger.thumbIndex);
const applied = setValueFromPointer(finger, reason_parts_exports.trackPress, nativeEvent);
if (applied && finger.didSwap) {
focusThumb(finger.thumbIndex);
}
}
moveCountRef.current = 0;
const doc = ownerDocument(controlRef.current);
doc.addEventListener("touchmove", handleTouchMove, {
passive: true
});
doc.addEventListener("touchend", handleTouchEnd, {
passive: true
});
});
const stopListening = useStableCallback(() => {
const doc = ownerDocument(controlRef.current);
doc.removeEventListener("pointermove", handleTouchMove);
doc.removeEventListener("pointerup", handleTouchEnd);
doc.removeEventListener("touchmove", handleTouchMove);
doc.removeEventListener("touchend", handleTouchEnd);
pressedValuesRef.current = null;
currentInteractionValueRef.current = null;
});
const focusFrame = useAnimationFrame();
React26.useEffect(() => {
const control = controlRef.current;
if (!control) {
return () => stopListening();
}
const unsubscribeTouchStart = addEventListener(control, "touchstart", handleTouchStart, {
passive: true
});
return () => {
unsubscribeTouchStart();
focusFrame.cancel();
stopListening();
};
}, [stopListening, handleTouchStart, controlRef, focusFrame]);
React26.useEffect(() => {
if (disabled2) {
stopListening();
}
}, [disabled2, stopListening]);
const element = useRenderElement("div", componentProps, {
state,
ref: [forwardedRef, registerFieldControlRef, controlRef, setStylesRef],
props: [{
["data-base-ui-slider-control"]: renderBeforeHydration ? "" : void 0,
onPointerDown(event) {
const control = controlRef.current;
const target = getTarget(event.nativeEvent);
if (!control || disabled2 || event.defaultPrevented || !isElement(target) || // Only handle left clicks
event.button !== 0) {
return;
}
if (isTargetDisabledThumb(target)) {
resetPressedThumb();
return;
}
const fingerCoords = getFingerCoords(event, touchIdRef);
if (fingerCoords != null) {
startPressing(fingerCoords);
const finger = getFingerState(fingerCoords);
if (finger == null) {
return;
}
const pressedOnFocusedThumb = contains(thumbRefs.current[finger.thumbIndex], activeElement(ownerDocument(control)));
if (pressedOnFocusedThumb) {
event.preventDefault();
} else {
focusFrame.request(() => {
focusThumb(finger.thumbIndex);
});
}
setDragging(true);
const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;
if (!pressedOnAnyThumb) {
const applied = setValueFromPointer(finger, reason_parts_exports.trackPress, event.nativeEvent);
if (applied && finger.didSwap) {
focusThumb(finger.thumbIndex);
}
}
}
if (event.nativeEvent.pointerId) {
control.setPointerCapture(event.nativeEvent.pointerId);
}
moveCountRef.current = 0;
const doc = ownerDocument(controlRef.current);
doc.addEventListener("pointermove", handleTouchMove, {
passive: true
});
doc.addEventListener("pointerup", handleTouchEnd, {
once: true
});
}
}, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
return element;
});
if (true) SliderControl.displayName = "SliderControl";
// node_modules/@base-ui/react/slider/track/SliderTrack.mjs
var React27 = __toESM(require_react(), 1);
var SliderTrack = /* @__PURE__ */ React27.forwardRef(function SliderTrack2(componentProps, forwardedRef) {
const {
render,
className,
style,
...elementProps
} = componentProps;
const {
state
} = useSliderRootContext();
const element = useRenderElement("div", componentProps, {
state,
ref: forwardedRef,
props: [{
style: {
position: "relative"
}
}, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
return element;
});
if (true) SliderTrack.displayName = "SliderTrack";
// node_modules/@base-ui/react/slider/thumb/SliderThumb.mjs
var React31 = __toESM(require_react(), 1);
// node_modules/@base-ui/utils/visuallyHidden.mjs
var visuallyHiddenBase = {
clipPath: "inset(50%)",
overflow: "hidden",
whiteSpace: "nowrap",
border: 0,
padding: 0,
width: 1,
height: 1,
margin: -1
};
var visuallyHidden = {
...visuallyHiddenBase,
position: "fixed",
top: 0,
left: 0
};
var visuallyHiddenInput = {
...visuallyHiddenBase,
position: "absolute"
};
// node_modules/@base-ui/react/utils/useIsHydrating.mjs
var import_shim = __toESM(require_shim(), 1);
function subscribe() {
return NOOP;
}
function getSnapshot() {
return false;
}
function getServerSnapshot() {
return true;
}
function useIsHydrating() {
return (0, import_shim.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
}
// node_modules/@base-ui/react/utils/valueToPercent.mjs
function valueToPercent(value, min, max) {
return (value - min) * 100 / (max - min);
}
// node_modules/@base-ui/react/internals/composite/composite.mjs
var ARROW_UP = "ArrowUp";
var ARROW_DOWN = "ArrowDown";
var ARROW_LEFT = "ArrowLeft";
var ARROW_RIGHT = "ArrowRight";
var HOME = "Home";
var END = "End";
var PAGE_UP = "PageUp";
var PAGE_DOWN = "PageDown";
var HORIZONTAL_KEYS = /* @__PURE__ */ new Set([ARROW_LEFT, ARROW_RIGHT]);
var VERTICAL_KEYS = /* @__PURE__ */ new Set([ARROW_UP, ARROW_DOWN]);
var ARROW_KEYS = /* @__PURE__ */ new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
var COMPOSITE_KEYS = /* @__PURE__ */ new Set([...ARROW_KEYS, HOME, END]);
// node_modules/@base-ui/react/internals/composite/list/useCompositeListItem.mjs
var React28 = __toESM(require_react(), 1);
var IndexGuessBehavior = /* @__PURE__ */ function(IndexGuessBehavior2) {
IndexGuessBehavior2[IndexGuessBehavior2["None"] = 0] = "None";
IndexGuessBehavior2[IndexGuessBehavior2["GuessFromOrder"] = 1] = "GuessFromOrder";
return IndexGuessBehavior2;
}({});
function useCompositeListItem(params = {}) {
const {
label,
metadata,
textRef,
indexGuessBehavior,
index: externalIndex
} = params;
const {
register,
unregister,
subscribeMapChange,
elementsRef,
labelsRef,
nextIndexRef
} = useCompositeListContext();
const indexRef = React28.useRef(-1);
const [index, setIndex] = React28.useState(externalIndex ?? (indexGuessBehavior === IndexGuessBehavior.GuessFromOrder ? () => {
if (indexRef.current === -1) {
const newIndex = nextIndexRef.current;
nextIndexRef.current += 1;
indexRef.current = newIndex;
}
return indexRef.current;
} : -1));
const componentRef = React28.useRef(null);
const ref = React28.useCallback((node) => {
componentRef.current = node;
if (index !== -1 && node !== null) {
elementsRef.current[index] = node;
if (labelsRef) {
const isLabelDefined = label !== void 0;
labelsRef.current[index] = isLabelDefined ? label : textRef?.current?.textContent ?? node.textContent;
}
}
}, [index, elementsRef, labelsRef, label, textRef]);
useIsoLayoutEffect(() => {
if (externalIndex != null) {
return void 0;
}
const node = componentRef.current;
if (node) {
register(node, metadata);
return () => {
unregister(node);
};
}
return void 0;
}, [externalIndex, register, unregister, metadata]);
useIsoLayoutEffect(() => {
if (externalIndex != null) {
return void 0;
}
return subscribeMapChange((map) => {
const i = componentRef.current ? map.get(componentRef.current)?.index : null;
if (i != null) {
setIndex(i);
}
});
}, [externalIndex, subscribeMapChange, setIndex]);
return {
ref,
index
};
}
// node_modules/@base-ui/react/internals/csp-context/CSPContext.mjs
var React29 = __toESM(require_react(), 1);
var CSPContext = /* @__PURE__ */ React29.createContext(void 0);
if (true) CSPContext.displayName = "CSPContext";
var DEFAULT_CSP_CONTEXT_VALUE = {
disableStyleElements: false
};
function useCSPContext() {
return React29.useContext(CSPContext) ?? DEFAULT_CSP_CONTEXT_VALUE;
}
// node_modules/@base-ui/react/internals/labelable-provider/useLabelableId.mjs
var React30 = __toESM(require_react(), 1);
function useLabelableId(params = {}) {
const {
id,
implicit = false,
controlRef
} = params;
const {
controlId,
registerControlId
} = useLabelableContext();
const defaultId = useBaseUiId(id);
const controlIdForEffect = implicit ? controlId : void 0;
const controlSourceRef = useRefWithInit(() => Symbol("labelable-control"));
const hasRegisteredRef = React30.useRef(false);
const hadExplicitIdRef = React30.useRef(id != null);
const unregisterControlId = useStableCallback(() => {
if (!hasRegisteredRef.current || registerControlId === NOOP) {
return;
}
hasRegisteredRef.current = false;
registerControlId(controlSourceRef.current, void 0);
});
useIsoLayoutEffect(() => {
if (registerControlId === NOOP) {
return void 0;
}
let nextId;
if (implicit) {
const elem = controlRef?.current;
if (isElement(elem) && elem.closest("label") != null) {
nextId = id ?? null;
} else {
nextId = controlIdForEffect ?? defaultId;
}
} else if (id != null) {
hadExplicitIdRef.current = true;
nextId = id;
} else if (hadExplicitIdRef.current) {
nextId = defaultId;
} else {
unregisterControlId();
return void 0;
}
if (nextId === void 0) {
unregisterControlId();
return void 0;
}
hasRegisteredRef.current = true;
registerControlId(controlSourceRef.current, nextId);
return void 0;
}, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
React30.useEffect(() => {
return unregisterControlId;
}, [unregisterControlId]);
return controlId ?? defaultId;
}
// node_modules/@base-ui/react/slider/thumb/SliderThumbDataAttributes.mjs
var SliderThumbDataAttributes = /* @__PURE__ */ function(SliderThumbDataAttributes2) {
SliderThumbDataAttributes2["index"] = "data-index";
SliderThumbDataAttributes2["dragging"] = "data-dragging";
SliderThumbDataAttributes2["orientation"] = "data-orientation";
SliderThumbDataAttributes2["disabled"] = "data-disabled";
SliderThumbDataAttributes2["valid"] = "data-valid";
SliderThumbDataAttributes2["invalid"] = "data-invalid";
SliderThumbDataAttributes2["touched"] = "data-touched";
SliderThumbDataAttributes2["dirty"] = "data-dirty";
SliderThumbDataAttributes2["focused"] = "data-focused";
return SliderThumbDataAttributes2;
}({});
// node_modules/@base-ui/react/slider/thumb/prehydrationScript.min.mjs
var script = '!function(){const t=document.currentScript?.parentElement;if(!t)return;const e=t.closest("[data-base-ui-slider-control]");if(!e)return;const r=e.querySelector("[data-base-ui-slider-indicator]"),i=e.getBoundingClientRect(),n="vertical"===e.getAttribute("data-orientation")?"height":"width",o=e.querySelectorAll(\'input[type="range"]\'),l=o.length>1,s=o.length-1;let a=null,u=null;for(let t=0;t<o.length;t+=1){const e=o[t],y=parseFloat(e.getAttribute("value")??"");if(Number.isNaN(y))return;const c=e.parentElement;if(!c)return;const p=parseFloat(e.getAttribute("max")??"100"),g=parseFloat(e.getAttribute("min")??"0"),b=c?.getBoundingClientRect(),d=i[n]-b[n],m=100*(y-g)/(p-g),v=(b[n]/2+d*m/100)/i[n]*100;c.style.setProperty("--position",`${v}%`),Number.isFinite(v)&&(c.style.removeProperty("visibility"),r&&(0===t?(a=v,r.style.setProperty("--start-position",`${v}%`),l||r.style.removeProperty("visibility")):t===s&&(u=v-(a??0),r.style.setProperty("--end-position",`${v}%`),r.style.setProperty("--relative-size",`${u}%`),r.style.removeProperty("visibility"))))}}();';
// node_modules/@base-ui/react/slider/thumb/SliderThumb.mjs
var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
var ALL_KEYS = /* @__PURE__ */ new Set([...COMPOSITE_KEYS, PAGE_UP, PAGE_DOWN]);
function getDefaultAriaValueText(values, index, format, locale) {
if (index < 0) {
return void 0;
}
if (values.length === 2) {
if (index === 0) {
return `${formatNumber(values[index], locale, format)} start range`;
}
return `${formatNumber(values[index], locale, format)} end range`;
}
return format ? formatNumber(values[index], locale, format) : void 0;
}
function getNewValue(thumbValue, increment, direction, min, max) {
const value = direction === 1 ? thumbValue + increment : thumbValue - increment;
const roundedValue = Number(value.toFixed(Math.max(getDecimalPrecision(thumbValue), getDecimalPrecision(increment), getDecimalPrecision(min))));
return clamp(roundedValue, min, max);
}
var SliderThumb = /* @__PURE__ */ React31.forwardRef(function SliderThumb2(componentProps, forwardedRef) {
const {
render,
children: childrenProp,
className,
"aria-describedby": ariaDescribedByProp,
"aria-label": ariaLabelProp,
"aria-labelledby": ariaLabelledByProp,
"aria-valuetext": ariaValueTextProp,
disabled: disabledProp = false,
getAriaLabel: getAriaLabelProp,
getAriaValueText: getAriaValueTextProp,
id: idProp,
index: indexProp,
inputRef: inputRefProp,
onBlur: onBlurProp,
onFocus: onFocusProp,
onKeyDown: onKeyDownProp,
tabIndex: tabIndexProp,
style,
...elementProps
} = componentProps;
const {
nonce
} = useCSPContext();
const id = useBaseUiId(idProp);
const {
active: activeIndex,
lastUsedThumbIndex,
controlRef,
disabled: contextDisabled,
validation,
formatOptionsRef,
handleInputChange,
inset,
labelId,
largeStep,
locale,
max,
min,
minStepsBetweenValues,
form,
name,
orientation,
pressedInputRef,
pressedThumbCenterOffsetRef,
pressedThumbIndexRef,
renderBeforeHydration,
setActive,
setIndicatorPosition,
state,
step,
values: sliderValues
} = useSliderRootContext();
const direction = useDirection();
const disabled2 = disabledProp || contextDisabled;
const range = sliderValues.length > 1;
const vertical = orientation === "vertical";
const rtl = direction === "rtl";
const {
setTouched,
setFocused,
validationMode
} = useFieldRootContext();
const thumbRef = React31.useRef(null);
const inputRef = React31.useRef(null);
const restoringFocusVisibleRef = React31.useRef(false);
const defaultInputId = useBaseUiId();
const labelableId = useLabelableId();
const inputId = range ? defaultInputId : labelableId;
const thumbMetadata = React31.useMemo(() => ({
inputId
}), [inputId]);
const {
ref: listItemRef,
index: compositeIndex
} = useCompositeListItem({
metadata: thumbMetadata
});
const index = !range ? 0 : indexProp ?? compositeIndex;
const last = index === sliderValues.length - 1;
const thumbValue = sliderValues[index];
const thumbValuePercent = valueToPercent(thumbValue, min, max);
const [positionPercent, setPositionPercent] = React31.useState();
const isHydrating = useIsHydrating();
const safeLastUsedThumbIndex = lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
const getInsetPosition = useStableCallback(() => {
const control = controlRef.current;
const thumb = thumbRef.current;
if (!control || !thumb) {
return;
}
const thumbRect = thumb.getBoundingClientRect();
const controlRect = control.getBoundingClientRect();
const side = vertical ? "height" : "width";
const controlSize = controlRect[side] - thumbRect[side];
const thumbOffsetFromControlEdge = thumbRect[side] / 2 + controlSize * thumbValuePercent / 100;
const nextPositionPercent = thumbOffsetFromControlEdge / controlRect[side] * 100;
const nextInsetPosition = Number.isFinite(nextPositionPercent) ? nextPositionPercent : void 0;
setPositionPercent(nextInsetPosition);
if (index === 0) {
setIndicatorPosition((prevPosition) => [nextInsetPosition, prevPosition[1]]);
} else if (last) {
setIndicatorPosition((prevPosition) => [prevPosition[0], nextInsetPosition]);
}
});
useIsoLayoutEffect(() => {
if (inset) {
queueMicrotask(getInsetPosition);
}
}, [getInsetPosition, inset]);
useIsoLayoutEffect(() => {
if (inset) {
getInsetPosition();
}
}, [getInsetPosition, inset, thumbValuePercent]);
useIsoLayoutEffect(() => {
if (!inset) {
return void 0;
}
const control = controlRef.current;
const thumb = thumbRef.current;
if (!control || !thumb) {
return void 0;
}
const ResizeObserverCtor = getWindow(control).ResizeObserver;
if (typeof ResizeObserverCtor !== "function") {
return void 0;
}
const resizeObserver = new ResizeObserverCtor(getInsetPosition);
resizeObserver.observe(control);
resizeObserver.observe(thumb);
return () => {
resizeObserver.disconnect();
};
}, [controlRef, getInsetPosition, inset]);
const startEdge = vertical ? "bottom" : "insetInlineStart";
const crossOffsetProperty = vertical ? "left" : "top";
let zIndex;
if (range) {
if (activeIndex === index) {
zIndex = 2;
} else if (safeLastUsedThumbIndex === index) {
zIndex = 1;
}
} else if (activeIndex === index) {
zIndex = 1;
}
let thumbStyle;
if (inset) {
thumbStyle = {
["--position"]: `${positionPercent ?? 0}%`,
visibility: renderBeforeHydration && isHydrating || positionPercent === void 0 ? "hidden" : void 0,
position: "absolute",
[startEdge]: "var(--position)",
[crossOffsetProperty]: "50%",
translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
zIndex
};
} else {
thumbStyle = !Number.isFinite(thumbValuePercent) ? visuallyHidden : {
position: "absolute",
[startEdge]: `${thumbValuePercent}%`,
[crossOffsetProperty]: "50%",
translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
zIndex
};
}
let cssWritingMode;
if (orientation === "vertical") {
cssWritingMode = rtl ? "vertical-rl" : "vertical-lr";
}
const ariaLabel = typeof getAriaLabelProp === "function" ? getAriaLabelProp(index) : ariaLabelProp;
const inputProps = mergeProps({
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledByProp ?? (ariaLabel == null ? labelId : void 0),
"aria-describedby": ariaDescribedByProp,
"aria-orientation": orientation,
"aria-valuenow": thumbValue,
"aria-valuetext": typeof getAriaValueTextProp === "function" ? getAriaValueTextProp(formatNumber(thumbValue, locale, formatOptionsRef.current ?? void 0), thumbValue, index) : ariaValueTextProp ?? getDefaultAriaValueText(sliderValues, index, formatOptionsRef.current ?? void 0, locale),
disabled: disabled2,
form,
id: inputId,
max,
min,
name,
onChange(event) {
handleInputChange(event.currentTarget.valueAsNumber, index, event);
},
onFocus(event) {
const isRestoringFocusVisible = restoringFocusVisibleRef.current;
restoringFocusVisibleRef.current = false;
setActive(index);
setFocused(true);
if (isRestoringFocusVisible) {
event.stopPropagation();
}
},
onBlur(event) {
if (restoringFocusVisibleRef.current) {
event.stopPropagation();
return;
}
if (!thumbRef.current) {
return;
}
setActive(-1);
setTouched(true);
setFocused(false);
if (validationMode === "onBlur") {
validation.commit(getSliderValue(thumbValue, index, min, max, range, sliderValues));
}
},
onKeyDown(event) {
if (event.defaultPrevented) {
return;
}
if (!ALL_KEYS.has(event.key)) {
return;
}
if (COMPOSITE_KEYS.has(event.key)) {
event.stopPropagation();
}
let newValue = null;
const roundedValue = roundValueToStep(thumbValue, step, min);
switch (event.key) {
case ARROW_UP:
newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, 1, min, max);
break;
case ARROW_RIGHT:
newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? -1 : 1, min, max);
break;
case ARROW_DOWN:
newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, -1, min, max);
break;
case ARROW_LEFT:
newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? 1 : -1, min, max);
break;
case PAGE_UP:
newValue = getNewValue(roundedValue, largeStep, 1, min, max);
break;
case PAGE_DOWN:
newValue = getNewValue(roundedValue, largeStep, -1, min, max);
break;
case END:
newValue = max;
if (range) {
newValue = Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
}
break;
case HOME:
newValue = min;
if (range) {
newValue = Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
}
break;
default:
break;
}
if (newValue !== null) {
const input = event.currentTarget;
if (!matchesFocusVisible(input)) {
restoringFocusVisibleRef.current = true;
input.blur();
input.focus({
preventScroll: true,
// Show `:focus-visible` after keyboard interaction, even if the
// thumb was previously focused by a pointer.
focusVisible: true
});
}
handleInputChange(newValue, index, event);
event.preventDefault();
}
},
step,
style: {
...visuallyHidden,
// So that VoiceOver's focus indicator matches the thumb's dimensions
width: "100%",
height: "100%",
writingMode: cssWritingMode
},
tabIndex: tabIndexProp ?? void 0,
type: "range",
value: thumbValue ?? ""
}, (props) => validation.getValidationProps(disabled2, props), {
onKeyDown: onKeyDownProp
});
const mergedInputRef = useMergedRefs(inputRef, validation.inputRef, inputRefProp);
const element = useRenderElement("div", componentProps, {
state,
ref: [forwardedRef, listItemRef, thumbRef],
props: [{
[SliderThumbDataAttributes.index]: index,
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(React31.Fragment, {
children: [childrenProp, /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", {
ref: mergedInputRef,
...inputProps,
suppressHydrationWarning: true
}), inset && isHydrating && renderBeforeHydration && // this must be rendered with the last thumb to ensure all
// preceding thumbs are already rendered in the DOM
last && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("script", {
nonce,
dangerouslySetInnerHTML: {
__html: script
},
suppressHydrationWarning: true
})]
}),
id,
onBlur: onBlurProp,
onFocus: onFocusProp,
onPointerDown(event) {
if (disabled2) {
return;
}
pressedThumbIndexRef.current = index;
if (thumbRef.current != null) {
const axis = orientation === "horizontal" ? "x" : "y";
const midpoint = getMidpoint(thumbRef.current);
const offset = (orientation === "horizontal" ? event.clientX : event.clientY) - midpoint[axis];
pressedThumbCenterOffsetRef.current = offset;
}
if (inputRef.current != null && pressedInputRef.current !== inputRef.current) {
pressedInputRef.current = inputRef.current;
}
},
style: thumbStyle,
suppressHydrationWarning: renderBeforeHydration || void 0
}, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
return element;
});
if (true) SliderThumb.displayName = "SliderThumb";
// node_modules/@base-ui/react/slider/indicator/SliderIndicator.mjs
var React32 = __toESM(require_react(), 1);
function getInsetStyles(vertical, range, start, end, renderBeforeHydration, hydrating) {
const visibility = start === void 0 || range && end === void 0 ? "hidden" : void 0;
const startEdge = vertical ? "bottom" : "insetInlineStart";
const mainSide = vertical ? "height" : "width";
const crossSide = vertical ? "width" : "height";
const styles = {
visibility: renderBeforeHydration && hydrating ? "hidden" : visibility,
position: vertical ? "absolute" : "relative",
[crossSide]: "inherit"
};
styles["--start-position"] = `${start ?? 0}%`;
if (!range) {
styles[startEdge] = 0;
styles[mainSide] = "var(--start-position)";
return styles;
}
styles["--relative-size"] = `${(end ?? 0) - (start ?? 0)}%`;
styles[startEdge] = "var(--start-position)";
styles[mainSide] = "var(--relative-size)";
return styles;
}
function getCenteredStyles(vertical, range, start, end) {
const startEdge = vertical ? "bottom" : "insetInlineStart";
const mainSide = vertical ? "height" : "width";
const crossSide = vertical ? "width" : "height";
const styles = {
position: vertical ? "absolute" : "relative",
[crossSide]: "inherit"
};
if (!range) {
styles[startEdge] = 0;
styles[mainSide] = `${start}%`;
return styles;
}
const size = end - start;
styles[startEdge] = `${start}%`;
styles[mainSide] = `${size}%`;
return styles;
}
var SliderIndicator = /* @__PURE__ */ React32.forwardRef(function SliderIndicator2(componentProps, forwardedRef) {
const {
render,
className,
style: styleProp,
...elementProps
} = componentProps;
const {
indicatorPosition,
inset,
max,
min,
orientation,
renderBeforeHydration,
state,
values
} = useSliderRootContext();
const isHydrating = useIsHydrating();
const vertical = orientation === "vertical";
const range = values.length > 1;
const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isHydrating) : getCenteredStyles(vertical, range, valueToPercent(values[0], min, max), valueToPercent(values[values.length - 1], min, max));
const element = useRenderElement("div", componentProps, {
state,
ref: forwardedRef,
props: [{
["data-base-ui-slider-indicator"]: renderBeforeHydration ? "" : void 0,
style,
suppressHydrationWarning: renderBeforeHydration || void 0
}, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
return element;
});
if (true) SliderIndicator.displayName = "SliderIndicator";
// src/presentation/components/ui/Slider.tsx
var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
function Slider({
className,
defaultValue,
value,
min = 0,
max = 100,
...props
}) {
const values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
index_parts_exports.Root,
{
className: cn(
"data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
className
),
"data-slot": "slider",
defaultValue,
value,
min,
max,
thumbAlignment: "edge",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(index_parts_exports.Control, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
index_parts_exports.Track,
{
"data-slot": "slider-track",
className: "relative grow overflow-hidden rounded-full bg-input select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
index_parts_exports.Indicator,
{
"data-slot": "slider-range",
className: "bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
}
)
}
),
Array.from({ length: values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
index_parts_exports.Thumb,
{
"data-slot": "slider-thumb",
className: "relative block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden active:ring-4 disabled:pointer-events-none disabled:opacity-50"
},
index
))
] })
}
);
}
// src/presentation/components/ui/Switch.tsx
var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
// src/widgets/primitives/WidgetLayout.tsx
var import_react6 = __toESM(require_react(), 1);
var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
function VisualSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children });
}
function ControlsSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children });
}
function AsideSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children });
}
VisualSlot.__widgetSlot = "visual";
ControlsSlot.__widgetSlot = "controls";
AsideSlot.__widgetSlot = "aside";
function extractSlots(children) {
const slots = {};
import_react6.default.Children.forEach(children, (child) => {
if (import_react6.default.isValidElement(child)) {
const t = child.type;
if (t?.__widgetSlot) {
slots[t.__widgetSlot] = child;
}
}
});
return slots;
}
function WidgetLayoutImpl(props) {
const arrangement = props.arrangement ?? "visual-left";
const slots = extractSlots(props.children);
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `readrun-widget readrun-widget--${arrangement}`, children: [
(props.title || props.subtitle || props.headMeta) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
"div",
{
className: "readrun-widget__head",
style: { display: "flex", justifyContent: "space-between" },
children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
props.title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: "readrun-widget__title", children: props.title }),
props.subtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "readrun-widget__subtitle", children: props.subtitle })
] }),
props.headMeta && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: props.headMeta })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "readrun-widget__body", children: [
slots["visual"] && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "readrun-widget__visual", children: slots["visual"] }),
(slots["controls"] || slots["aside"]) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "readrun-widget__sidebar", children: [
slots["controls"] && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "readrun-widget__controls", children: slots["controls"] }),
slots["aside"] && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "readrun-widget__aside", children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "readrun-widget__aside-label", children: "What to notice" }),
slots["aside"]
] })
] })
] })
] });
}
var WidgetLayout = Object.assign(WidgetLayoutImpl, {
Visual: VisualSlot,
Controls: ControlsSlot,
Aside: AsideSlot
});
// src/widgets/primitives/FormulaSteps.tsx
var import_react7 = __toESM(require_react(), 1);
var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
// src/widgets/primitives/index.tsx
function Shell({
title,
meta,
children
}) {
return /* @__PURE__ */ import_react8.default.createElement("div", { className: "viz-shell" }, (title || meta) && /* @__PURE__ */ import_react8.default.createElement("div", { className: "viz-shell-head" }, title && /* @__PURE__ */ import_react8.default.createElement("h2", null, title), meta && /* @__PURE__ */ import_react8.default.createElement("div", { className: "viz-shell-meta" }, meta)), children);
}
function Sub({ children }) {
return /* @__PURE__ */ import_react8.default.createElement("p", { className: "viz-sub" }, children);
}
function SectionLabel({
children,
style
}) {
return /* @__PURE__ */ import_react8.default.createElement("div", { className: "viz-section-label", style }, children);
}
function Slider2({
label,
unit,
min,
max,
step = 1,
value,
onChange,
format
}) {
const fmt = format || ((v) => Number.isFinite(v) ? v.toFixed(2) : String(v));
const labelId = import_react8.default.useId();
return /* @__PURE__ */ import_react8.default.createElement("div", { className: "viz-slider-row" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "viz-slider-head" }, /* @__PURE__ */ import_react8.default.createElement("span", { id: labelId }, label), /* @__PURE__ */ import_react8.default.createElement("span", { className: "viz-slider-value" }, fmt(value), unit && /* @__PURE__ */ import_react8.default.createElement("span", { className: "viz-slider-unit" }, unit))), /* @__PURE__ */ import_react8.default.createElement(
Slider,
{
min,
max,
step,
value: [value],
onValueChange: (values) => {
const next = typeof values === "number" ? values : values[0];
if (typeof next === "number") onChange(next);
},
"aria-labelledby": labelId
}
));
}
function Stat({
label,
value,
color
}) {
return /* @__PURE__ */ import_react8.default.createElement("span", { className: "viz-stat" }, /* @__PURE__ */ import_react8.default.createElement("span", null, label), /* @__PURE__ */ import_react8.default.createElement("strong", { className: "viz-stat-value", style: color ? { color } : void 0 }, value));
}
// docs/.readrun/widgets/histogram-demo.tsx
var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
function seededRng(seed) {
let s = seed;
return () => {
s = s * 16807 % 2147483647;
return s / 2147483647;
};
}
function boxMuller(rng) {
const u1 = rng();
const u2 = rng();
return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
}
var N = 600;
var W = 520;
var H = 260;
var INNER_W = W - 50;
var INNER_H = H - 40;
function HistogramDemo() {
const [k, setK] = (0, import_react9.useState)(2);
const [bins, setBins] = (0, import_react9.useState)(30);
const values = (0, import_react9.useMemo)(() => {
const rng = seededRng(7);
const out = [];
for (let i = 0; i < N; i++) out.push(boxMuller(rng));
return out;
}, []);
const mu = values.reduce((a, b) => a + b, 0) / values.length;
const sigma = Math.sqrt(values.reduce((a, b) => a + (b - mu) ** 2, 0) / values.length);
const lo = mu - 4 * sigma;
const hi = mu + 4 * sigma;
const xScale = scale.linear({ domain: [lo, hi], range: [0, INNER_W] });
const yScale = scale.linear({ domain: [0, 1], range: [INNER_H, 0] });
const inBand = (centre) => Math.abs(centre - mu) <= k * sigma;
const insideCount = values.filter((v) => Math.abs(v - mu) <= k * sigma).length;
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Shell, { title: "Histogram primitive", children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Sub, { children: "600 standard-normal samples. Bars within \xB1k\xB7\u03C3 get the accent fill; outside bars use the muted text colour. Histogram is just the bars \u2014 the axis comes from Frame." }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: 24, alignItems: "flex-start", flexWrap: "wrap" }, children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Frame,
{
width: W,
height: H,
xScale,
yScale,
margin: { top: 10, right: 10, bottom: 30, left: 40 },
xLabel: "value",
children: ({ innerWidth, innerHeight }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Histogram,
{
values,
bins,
domain: [lo, hi],
width: innerWidth,
height: innerHeight,
highlight: inBand,
fillIn: "var(--accent)",
fillOut: "var(--text-muted)"
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"line",
{
x1: xScale(mu),
x2: xScale(mu),
y1: 0,
y2: innerHeight,
stroke: "var(--text)",
strokeWidth: 1.5
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"line",
{
x1: xScale(mu - k * sigma),
x2: xScale(mu - k * sigma),
y1: 0,
y2: innerHeight,
stroke: "var(--text-muted)",
strokeWidth: 1,
strokeDasharray: "4 3"
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"line",
{
x1: xScale(mu + k * sigma),
x2: xScale(mu + k * sigma),
y1: 0,
y2: innerHeight,
stroke: "var(--text-muted)",
strokeWidth: 1,
strokeDasharray: "4 3"
}
)
] })
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { minWidth: 200 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionLabel, { children: "Controls" }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Slider2, { label: "bins", value: bins, min: 5, max: 80, step: 1, onChange: setBins }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Slider2, { label: "k (band width)", value: k, min: 0.5, max: 4, step: 0.1, onChange: setK }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionLabel, { style: { marginTop: 16 }, children: "Stats" }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Stat, { label: "\u03BC", value: mu.toFixed(3) }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Stat, { label: "\u03C3", value: sigma.toFixed(3) }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Stat, { label: "in band", value: `${insideCount}/${values.length}` })
] })
] })
] })
] });
}
// docs/.readrun/widgets/histogram-demo.readrun-entry.ts
render(<HistogramDemo />);
/*! Bundled license information:
use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
(**
* @license React
* use-sync-external-store-shim.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*)
*/
Loss landscape
jsx
// generated by @readrun/widgets — edit .readrun/widgets/loss-landscape.tsx, then re-run rr
// @readrun/widgets@10f3ae2 — generated 2026-08-01T09:21:00Z
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
// globals:react
var require_react = __commonJS({
"globals:react"(exports, module) {
module.exports = globalThis.React;
}
});
// globals:react/jsx-runtime
var require_jsx_runtime = __commonJS({
"globals:react/jsx-runtime"(exports, module) {
var React37 = globalThis.React;
function jsx11(type, props, key) {
const nextProps = key === void 0 ? props : Object.assign({}, props, { key });
return React37.createElement(type, nextProps);
}
module.exports = { Fragment: React37.Fragment, jsx: jsx11, jsxs: jsx11 };
}
});
// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
var require_use_sync_external_store_shim_development = __commonJS({
"node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
"use strict";
(function() {
function is(x, y) {
return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
}
function useSyncExternalStore$2(subscribe2, getSnapshot2) {
didWarnOld18Alpha || void 0 === React37.startTransition || (didWarnOld18Alpha = true, console.error(
"You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
));
var value = getSnapshot2();
if (!didWarnUncachedGetSnapshot) {
var cachedValue = getSnapshot2();
objectIs(value, cachedValue) || (console.error(
"The result of getSnapshot should be cached to avoid an infinite loop"
), didWarnUncachedGetSnapshot = true);
}
cachedValue = useState8({
inst: { value, getSnapshot: getSnapshot2 }
});
var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
useLayoutEffect2(
function() {
inst.value = value;
inst.getSnapshot = getSnapshot2;
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
},
[subscribe2, value, getSnapshot2]
);
useEffect6(
function() {
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
return subscribe2(function() {
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
});
},
[subscribe2]
);
useDebugValue(value);
return value;
}
function checkIfSnapshotChanged(inst) {
var latestGetSnapshot = inst.getSnapshot;
inst = inst.value;
try {
var nextValue = latestGetSnapshot();
return !objectIs(inst, nextValue);
} catch (error2) {
return true;
}
}
function useSyncExternalStore$1(subscribe2, getSnapshot2) {
return getSnapshot2();
}
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
var React37 = require_react(), objectIs = "function" === typeof Object.is ? Object.is : is, useState8 = React37.useState, useEffect6 = React37.useEffect, useLayoutEffect2 = React37.useLayoutEffect, useDebugValue = React37.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
exports.useSyncExternalStore = void 0 !== React37.useSyncExternalStore ? React37.useSyncExternalStore : shim;
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
})();
}
});
// node_modules/use-sync-external-store/shim/index.js
var require_shim = __commonJS({
"node_modules/use-sync-external-store/shim/index.js"(exports, module) {
"use strict";
if (false) {
module.exports = null;
} else {
module.exports = require_use_sync_external_store_shim_development();
}
}
});
// docs/.readrun/widgets/loss-landscape.tsx
var import_react9 = __toESM(require_react(), 1);
// src/widgets/primitives/index.tsx
var import_react4 = __toESM(require_react());
// node_modules/clsx/dist/clsx.mjs
function r(e) {
var t, f, n = "";
if ("string" == typeof e || "number" == typeof e) n += e;
else if ("object" == typeof e) if (Array.isArray(e)) {
var o = e.length;
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
} else for (f in e) e[f] && (n && (n += " "), n += f);
return n;
}
function clsx() {
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
return n;
}
// node_modules/tailwind-merge/dist/bundle-mjs.mjs
var concatArrays = (array1, array2) => {
const combinedArray = new Array(array1.length + array2.length);
for (let i = 0; i < array1.length; i++) {
combinedArray[i] = array1[i];
}
for (let i = 0; i < array2.length; i++) {
combinedArray[array1.length + i] = array2[i];
}
return combinedArray;
};
var createClassValidatorObject = (classGroupId, validator) => ({
classGroupId,
validator
});
var createClassPartObject = (nextPart = /* @__PURE__ */ new Map(), validators = null, classGroupId) => ({
nextPart,
validators,
classGroupId
});
var CLASS_PART_SEPARATOR = "-";
var EMPTY_CONFLICTS = [];
var ARBITRARY_PROPERTY_PREFIX = "arbitrary..";
var createClassGroupUtils = (config) => {
const classMap = createClassMap(config);
const {
conflictingClassGroups,
conflictingClassGroupModifiers
} = config;
const getClassGroupId = (className) => {
if (className.startsWith("[") && className.endsWith("]")) {
return getGroupIdForArbitraryProperty(className);
}
const classParts = className.split(CLASS_PART_SEPARATOR);
const startIndex = classParts[0] === "" && classParts.length > 1 ? 1 : 0;
return getGroupRecursive(classParts, startIndex, classMap);
};
const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
if (hasPostfixModifier) {
const modifierConflicts = conflictingClassGroupModifiers[classGroupId];
const baseConflicts = conflictingClassGroups[classGroupId];
if (modifierConflicts) {
if (baseConflicts) {
return concatArrays(baseConflicts, modifierConflicts);
}
return modifierConflicts;
}
return baseConflicts || EMPTY_CONFLICTS;
}
return conflictingClassGroups[classGroupId] || EMPTY_CONFLICTS;
};
return {
getClassGroupId,
getConflictingClassGroupIds
};
};
var getGroupRecursive = (classParts, startIndex, classPartObject) => {
const classPathsLength = classParts.length - startIndex;
if (classPathsLength === 0) {
return classPartObject.classGroupId;
}
const currentClassPart = classParts[startIndex];
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
if (nextClassPartObject) {
const result = getGroupRecursive(classParts, startIndex + 1, nextClassPartObject);
if (result) return result;
}
const validators = classPartObject.validators;
if (validators === null) {
return void 0;
}
const classRest = startIndex === 0 ? classParts.join(CLASS_PART_SEPARATOR) : classParts.slice(startIndex).join(CLASS_PART_SEPARATOR);
const validatorsLength = validators.length;
for (let i = 0; i < validatorsLength; i++) {
const validatorObj = validators[i];
if (validatorObj.validator(classRest)) {
return validatorObj.classGroupId;
}
}
return void 0;
};
var getGroupIdForArbitraryProperty = (className) => className.slice(1, -1).indexOf(":") === -1 ? void 0 : (() => {
const content = className.slice(1, -1);
const colonIndex = content.indexOf(":");
const property = content.slice(0, colonIndex);
return property ? ARBITRARY_PROPERTY_PREFIX + property : void 0;
})();
var createClassMap = (config) => {
const {
theme,
classGroups
} = config;
return processClassGroups(classGroups, theme);
};
var processClassGroups = (classGroups, theme) => {
const classMap = createClassPartObject();
for (const classGroupId in classGroups) {
const group = classGroups[classGroupId];
processClassesRecursively(group, classMap, classGroupId, theme);
}
return classMap;
};
var processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
const len = classGroup.length;
for (let i = 0; i < len; i++) {
const classDefinition = classGroup[i];
processClassDefinition(classDefinition, classPartObject, classGroupId, theme);
}
};
var processClassDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
if (typeof classDefinition === "string") {
processStringDefinition(classDefinition, classPartObject, classGroupId);
return;
}
if (typeof classDefinition === "function") {
processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme);
return;
}
processObjectDefinition(classDefinition, classPartObject, classGroupId, theme);
};
var processStringDefinition = (classDefinition, classPartObject, classGroupId) => {
const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
classPartObjectToEdit.classGroupId = classGroupId;
};
var processFunctionDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
return;
}
if (classPartObject.validators === null) {
classPartObject.validators = [];
}
classPartObject.validators.push(createClassValidatorObject(classGroupId, classDefinition));
};
var processObjectDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
const entries = Object.entries(classDefinition);
const len = entries.length;
for (let i = 0; i < len; i++) {
const [key, value] = entries[i];
processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
}
};
var getPart = (classPartObject, path) => {
let current = classPartObject;
const parts = path.split(CLASS_PART_SEPARATOR);
const len = parts.length;
for (let i = 0; i < len; i++) {
const part = parts[i];
let next = current.nextPart.get(part);
if (!next) {
next = createClassPartObject();
current.nextPart.set(part, next);
}
current = next;
}
return current;
};
var isThemeGetter = (func) => "isThemeGetter" in func && func.isThemeGetter === true;
var createLruCache = (maxCacheSize) => {
if (maxCacheSize < 1) {
return {
get: () => void 0,
set: () => {
}
};
}
let cacheSize = 0;
let cache2 = /* @__PURE__ */ Object.create(null);
let previousCache = /* @__PURE__ */ Object.create(null);
const update2 = (key, value) => {
cache2[key] = value;
cacheSize++;
if (cacheSize > maxCacheSize) {
cacheSize = 0;
previousCache = cache2;
cache2 = /* @__PURE__ */ Object.create(null);
}
};
return {
get(key) {
let value = cache2[key];
if (value !== void 0) {
return value;
}
if ((value = previousCache[key]) !== void 0) {
update2(key, value);
return value;
}
},
set(key, value) {
if (key in cache2) {
cache2[key] = value;
} else {
update2(key, value);
}
}
};
};
var IMPORTANT_MODIFIER = "!";
var MODIFIER_SEPARATOR = ":";
var EMPTY_MODIFIERS = [];
var createResultObject = (modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition, isExternal) => ({
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition,
isExternal
});
var createParseClassName = (config) => {
const {
prefix,
experimentalParseClassName
} = config;
let parseClassName = (className) => {
const modifiers = [];
let bracketDepth = 0;
let parenDepth = 0;
let modifierStart = 0;
let postfixModifierPosition;
const len = className.length;
for (let index = 0; index < len; index++) {
const currentCharacter = className[index];
if (bracketDepth === 0 && parenDepth === 0) {
if (currentCharacter === MODIFIER_SEPARATOR) {
modifiers.push(className.slice(modifierStart, index));
modifierStart = index + 1;
continue;
}
if (currentCharacter === "/") {
postfixModifierPosition = index;
continue;
}
}
if (currentCharacter === "[") bracketDepth++;
else if (currentCharacter === "]") bracketDepth--;
else if (currentCharacter === "(") parenDepth++;
else if (currentCharacter === ")") parenDepth--;
}
const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.slice(modifierStart);
let baseClassName = baseClassNameWithImportantModifier;
let hasImportantModifier = false;
if (baseClassNameWithImportantModifier.endsWith(IMPORTANT_MODIFIER)) {
baseClassName = baseClassNameWithImportantModifier.slice(0, -1);
hasImportantModifier = true;
} else if (
/**
* In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
* @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
*/
baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER)
) {
baseClassName = baseClassNameWithImportantModifier.slice(1);
hasImportantModifier = true;
}
const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : void 0;
return createResultObject(modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition);
};
if (prefix) {
const fullPrefix = prefix + MODIFIER_SEPARATOR;
const parseClassNameOriginal = parseClassName;
parseClassName = (className) => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.slice(fullPrefix.length)) : createResultObject(EMPTY_MODIFIERS, false, className, void 0, true);
}
if (experimentalParseClassName) {
const parseClassNameOriginal = parseClassName;
parseClassName = (className) => experimentalParseClassName({
className,
parseClassName: parseClassNameOriginal
});
}
return parseClassName;
};
var createSortModifiers = (config) => {
const modifierWeights = /* @__PURE__ */ new Map();
config.orderSensitiveModifiers.forEach((mod, index) => {
modifierWeights.set(mod, 1e6 + index);
});
return (modifiers) => {
const result = [];
let currentSegment = [];
for (let i = 0; i < modifiers.length; i++) {
const modifier = modifiers[i];
const isArbitrary = modifier[0] === "[";
const isOrderSensitive = modifierWeights.has(modifier);
if (isArbitrary || isOrderSensitive) {
if (currentSegment.length > 0) {
currentSegment.sort();
result.push(...currentSegment);
currentSegment = [];
}
result.push(modifier);
} else {
currentSegment.push(modifier);
}
}
if (currentSegment.length > 0) {
currentSegment.sort();
result.push(...currentSegment);
}
return result;
};
};
var createConfigUtils = (config) => ({
cache: createLruCache(config.cacheSize),
parseClassName: createParseClassName(config),
sortModifiers: createSortModifiers(config),
postfixLookupClassGroupIds: createPostfixLookupClassGroupIds(config),
...createClassGroupUtils(config)
});
var createPostfixLookupClassGroupIds = (config) => {
const lookup = /* @__PURE__ */ Object.create(null);
const classGroupIds = config.postfixLookupClassGroups;
if (classGroupIds) {
for (let i = 0; i < classGroupIds.length; i++) {
lookup[classGroupIds[i]] = true;
}
}
return lookup;
};
var SPLIT_CLASSES_REGEX = /\s+/;
var mergeClassList = (classList, configUtils) => {
const {
parseClassName,
getClassGroupId,
getConflictingClassGroupIds,
sortModifiers,
postfixLookupClassGroupIds
} = configUtils;
const classGroupsInConflict = [];
const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
let result = "";
for (let index = classNames.length - 1; index >= 0; index -= 1) {
const originalClassName = classNames[index];
const {
isExternal,
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition
} = parseClassName(originalClassName);
if (isExternal) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
let hasPostfixModifier = !!maybePostfixModifierPosition;
let classGroupId;
if (hasPostfixModifier) {
const baseClassNameWithoutPostfix = baseClassName.substring(0, maybePostfixModifierPosition);
classGroupId = getClassGroupId(baseClassNameWithoutPostfix);
const classGroupIdWithPostfix = classGroupId && postfixLookupClassGroupIds[classGroupId] ? getClassGroupId(baseClassName) : void 0;
if (classGroupIdWithPostfix && classGroupIdWithPostfix !== classGroupId) {
classGroupId = classGroupIdWithPostfix;
hasPostfixModifier = false;
}
} else {
classGroupId = getClassGroupId(baseClassName);
}
if (!classGroupId) {
if (!hasPostfixModifier) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
classGroupId = getClassGroupId(baseClassName);
if (!classGroupId) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
hasPostfixModifier = false;
}
const variantModifier = modifiers.length === 0 ? "" : modifiers.length === 1 ? modifiers[0] : sortModifiers(modifiers).join(":");
const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
const classId = modifierId + classGroupId;
if (classGroupsInConflict.indexOf(classId) > -1) {
continue;
}
classGroupsInConflict.push(classId);
const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
for (let i = 0; i < conflictGroups.length; ++i) {
const group = conflictGroups[i];
classGroupsInConflict.push(modifierId + group);
}
result = originalClassName + (result.length > 0 ? " " + result : result);
}
return result;
};
var twJoin = (...classLists) => {
let index = 0;
let argument;
let resolvedValue;
let string = "";
while (index < classLists.length) {
if (argument = classLists[index++]) {
if (resolvedValue = toValue(argument)) {
string && (string += " ");
string += resolvedValue;
}
}
}
return string;
};
var toValue = (mix) => {
if (typeof mix === "string") {
return mix;
}
let resolvedValue;
let string = "";
for (let k = 0; k < mix.length; k++) {
if (mix[k]) {
if (resolvedValue = toValue(mix[k])) {
string && (string += " ");
string += resolvedValue;
}
}
}
return string;
};
var createTailwindMerge = (createConfigFirst, ...createConfigRest) => {
let configUtils;
let cacheGet;
let cacheSet;
let functionToCall;
const initTailwindMerge = (classList) => {
const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
configUtils = createConfigUtils(config);
cacheGet = configUtils.cache.get;
cacheSet = configUtils.cache.set;
functionToCall = tailwindMerge;
return tailwindMerge(classList);
};
const tailwindMerge = (classList) => {
const cachedResult = cacheGet(classList);
if (cachedResult) {
return cachedResult;
}
const result = mergeClassList(classList, configUtils);
cacheSet(classList, result);
return result;
};
functionToCall = initTailwindMerge;
return (...args) => functionToCall(twJoin(...args));
};
var fallbackThemeArr = [];
var fromTheme = (key) => {
const themeGetter = (theme) => theme[key] || fallbackThemeArr;
themeGetter.isThemeGetter = true;
return themeGetter;
};
var arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
var arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
var fractionRegex = /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/;
var tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
var lengthUnitRegex = /\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$/;
var colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
var shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
var imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
var isFraction = (value) => fractionRegex.test(value);
var isNumber = (value) => !!value && !Number.isNaN(Number(value));
var isInteger = (value) => !!value && Number.isInteger(Number(value));
var isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
var isTshirtSize = (value) => tshirtUnitRegex.test(value);
var isAny = () => true;
var isLengthOnly = (value) => (
// `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.
lengthUnitRegex.test(value) && !colorFunctionRegex.test(value)
);
var isNever = () => false;
var isShadow = (value) => shadowRegex.test(value);
var isImage = (value) => imageRegex.test(value);
var isAnyNonArbitrary = (value) => !isArbitraryValue(value) && !isArbitraryVariable(value);
var isNamedContainerQuery = (value) => value.startsWith("@container") && (value[10] === "/" && value[11] !== void 0 || value[11] === "s" && value[16] !== void 0 && value.startsWith("-size/", 10) || value[11] === "n" && value[18] !== void 0 && value.startsWith("-normal/", 10));
var isArbitrarySize = (value) => getIsArbitraryValue(value, isLabelSize, isNever);
var isArbitraryValue = (value) => arbitraryValueRegex.test(value);
var isArbitraryLength = (value) => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
var isArbitraryNumber = (value) => getIsArbitraryValue(value, isLabelNumber, isNumber);
var isArbitraryWeight = (value) => getIsArbitraryValue(value, isLabelWeight, isAny);
var isArbitraryFamilyName = (value) => getIsArbitraryValue(value, isLabelFamilyName, isNever);
var isArbitraryPosition = (value) => getIsArbitraryValue(value, isLabelPosition, isNever);
var isArbitraryImage = (value) => getIsArbitraryValue(value, isLabelImage, isImage);
var isArbitraryShadow = (value) => getIsArbitraryValue(value, isLabelShadow, isShadow);
var isArbitraryVariable = (value) => arbitraryVariableRegex.test(value);
var isArbitraryVariableLength = (value) => getIsArbitraryVariable(value, isLabelLength);
var isArbitraryVariableFamilyName = (value) => getIsArbitraryVariable(value, isLabelFamilyName);
var isArbitraryVariablePosition = (value) => getIsArbitraryVariable(value, isLabelPosition);
var isArbitraryVariableSize = (value) => getIsArbitraryVariable(value, isLabelSize);
var isArbitraryVariableImage = (value) => getIsArbitraryVariable(value, isLabelImage);
var isArbitraryVariableShadow = (value) => getIsArbitraryVariable(value, isLabelShadow, true);
var isArbitraryVariableWeight = (value) => getIsArbitraryVariable(value, isLabelWeight, true);
var getIsArbitraryValue = (value, testLabel, testValue) => {
const result = arbitraryValueRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return testValue(result[2]);
}
return false;
};
var getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
const result = arbitraryVariableRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return shouldMatchNoLabel;
}
return false;
};
var isLabelPosition = (label) => label === "position" || label === "percentage";
var isLabelImage = (label) => label === "image" || label === "url";
var isLabelSize = (label) => label === "length" || label === "size" || label === "bg-size";
var isLabelLength = (label) => label === "length";
var isLabelNumber = (label) => label === "number";
var isLabelFamilyName = (label) => label === "family-name";
var isLabelWeight = (label) => label === "number" || label === "weight";
var isLabelShadow = (label) => label === "shadow";
var getDefaultConfig = () => {
const themeColor = fromTheme("color");
const themeFont = fromTheme("font");
const themeText = fromTheme("text");
const themeFontWeight = fromTheme("font-weight");
const themeTracking = fromTheme("tracking");
const themeLeading = fromTheme("leading");
const themeBreakpoint = fromTheme("breakpoint");
const themeContainer = fromTheme("container");
const themeSpacing = fromTheme("spacing");
const themeRadius = fromTheme("radius");
const themeShadow = fromTheme("shadow");
const themeInsetShadow = fromTheme("inset-shadow");
const themeTextShadow = fromTheme("text-shadow");
const themeDropShadow = fromTheme("drop-shadow");
const themeBlur = fromTheme("blur");
const themePerspective = fromTheme("perspective");
const themeAspect = fromTheme("aspect");
const themeEase = fromTheme("ease");
const themeAnimate = fromTheme("animate");
const scaleBreak = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
const scalePosition = () => [
"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"
];
const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
const scaleOverflow = () => ["auto", "hidden", "clip", "visible", "scroll"];
const scaleOverscroll = () => ["auto", "contain", "none"];
const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
const scaleInset = () => [isFraction, "full", "auto", ...scaleUnambiguousSpacing()];
const scaleGridTemplateColsRows = () => [isInteger, "none", "subgrid", isArbitraryVariable, isArbitraryValue];
const scaleGridColRowStartAndEnd = () => ["auto", {
span: ["full", isInteger, isArbitraryVariable, isArbitraryValue]
}, isInteger, isArbitraryVariable, isArbitraryValue];
const scaleGridColRowStartOrEnd = () => [isInteger, "auto", isArbitraryVariable, isArbitraryValue];
const scaleGridAutoColsRows = () => ["auto", "min", "max", "fr", isArbitraryVariable, isArbitraryValue];
const scaleAlignPrimaryAxis = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"];
const scaleAlignSecondaryAxis = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"];
const scaleMargin = () => ["auto", ...scaleUnambiguousSpacing()];
const scaleSizing = () => [isFraction, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
const scaleSizingInline = () => [isFraction, "screen", "full", "dvw", "lvw", "svw", "min", "max", "fit", ...scaleUnambiguousSpacing()];
const scaleSizingBlock = () => [isFraction, "screen", "full", "lh", "dvh", "lvh", "svh", "min", "max", "fit", ...scaleUnambiguousSpacing()];
const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
position: [isArbitraryVariable, isArbitraryValue]
}];
const scaleBgRepeat = () => ["no-repeat", {
repeat: ["", "x", "y", "space", "round"]
}];
const scaleBgSize = () => ["auto", "cover", "contain", isArbitraryVariableSize, isArbitrarySize, {
size: [isArbitraryVariable, isArbitraryValue]
}];
const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
const scaleRadius = () => [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
"full",
themeRadius,
isArbitraryVariable,
isArbitraryValue
];
const scaleBorderWidth = () => ["", isNumber, isArbitraryVariableLength, isArbitraryLength];
const scaleLineStyle = () => ["solid", "dashed", "dotted", "double"];
const scaleBlendMode = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
const scaleBlur = () => [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
themeBlur,
isArbitraryVariable,
isArbitraryValue
];
const scaleRotate = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
const scaleScale = () => ["none", isNumber, isArbitraryVariable, isArbitraryValue];
const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
const scaleTranslate = () => [isFraction, "full", ...scaleUnambiguousSpacing()];
return {
cacheSize: 500,
theme: {
animate: ["spin", "ping", "pulse", "bounce"],
aspect: ["video"],
blur: [isTshirtSize],
breakpoint: [isTshirtSize],
color: [isAny],
container: [isTshirtSize],
"drop-shadow": [isTshirtSize],
ease: ["in", "out", "in-out"],
font: [isAnyNonArbitrary],
"font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
"inset-shadow": [isTshirtSize],
leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
radius: [isTshirtSize],
shadow: [isTshirtSize],
spacing: ["px", isNumber],
text: [isTshirtSize],
"text-shadow": [isTshirtSize],
tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
},
classGroups: {
// --------------
// --- Layout ---
// --------------
/**
* Aspect Ratio
* @see https://tailwindcss.com/docs/aspect-ratio
*/
aspect: [{
aspect: ["auto", "square", isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
}],
/**
* Container
* @see https://tailwindcss.com/docs/container
* @deprecated since Tailwind CSS v4.0.0
*/
container: ["container"],
/**
* Container Type
* @see https://tailwindcss.com/docs/responsive-design#container-queries
*/
"container-type": [{
"@container": ["", "normal", "size", isArbitraryVariable, isArbitraryValue]
}],
/**
* Container Name
* @see https://tailwindcss.com/docs/responsive-design#named-containers
*/
"container-named": [isNamedContainerQuery],
/**
* Columns
* @see https://tailwindcss.com/docs/columns
*/
columns: [{
columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
}],
/**
* Break After
* @see https://tailwindcss.com/docs/break-after
*/
"break-after": [{
"break-after": scaleBreak()
}],
/**
* Break Before
* @see https://tailwindcss.com/docs/break-before
*/
"break-before": [{
"break-before": scaleBreak()
}],
/**
* 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: scalePositionWithArbitrary()
}],
/**
* Overflow
* @see https://tailwindcss.com/docs/overflow
*/
overflow: [{
overflow: scaleOverflow()
}],
/**
* Overflow X
* @see https://tailwindcss.com/docs/overflow
*/
"overflow-x": [{
"overflow-x": scaleOverflow()
}],
/**
* Overflow Y
* @see https://tailwindcss.com/docs/overflow
*/
"overflow-y": [{
"overflow-y": scaleOverflow()
}],
/**
* Overscroll Behavior
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
overscroll: [{
overscroll: scaleOverscroll()
}],
/**
* Overscroll Behavior X
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
"overscroll-x": [{
"overscroll-x": scaleOverscroll()
}],
/**
* Overscroll Behavior Y
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
"overscroll-y": [{
"overscroll-y": scaleOverscroll()
}],
/**
* Position
* @see https://tailwindcss.com/docs/position
*/
position: ["static", "fixed", "absolute", "relative", "sticky"],
/**
* Inset
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
inset: [{
inset: scaleInset()
}],
/**
* Inset Inline
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-x": [{
"inset-x": scaleInset()
}],
/**
* Inset Block
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-y": [{
"inset-y": scaleInset()
}],
/**
* Inset Inline Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
* @todo class group will be renamed to `inset-s` in next major release
*/
start: [{
"inset-s": scaleInset(),
/**
* @deprecated since Tailwind CSS v4.2.0 in favor of `inset-s-*` utilities.
* @see https://github.com/tailwindlabs/tailwindcss/pull/19613
*/
start: scaleInset()
}],
/**
* Inset Inline End
* @see https://tailwindcss.com/docs/top-right-bottom-left
* @todo class group will be renamed to `inset-e` in next major release
*/
end: [{
"inset-e": scaleInset(),
/**
* @deprecated since Tailwind CSS v4.2.0 in favor of `inset-e-*` utilities.
* @see https://github.com/tailwindlabs/tailwindcss/pull/19613
*/
end: scaleInset()
}],
/**
* Inset Block Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-bs": [{
"inset-bs": scaleInset()
}],
/**
* Inset Block End
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-be": [{
"inset-be": scaleInset()
}],
/**
* Top
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
top: [{
top: scaleInset()
}],
/**
* Right
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
right: [{
right: scaleInset()
}],
/**
* Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
bottom: [{
bottom: scaleInset()
}],
/**
* Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
left: [{
left: scaleInset()
}],
/**
* Visibility
* @see https://tailwindcss.com/docs/visibility
*/
visibility: ["visible", "invisible", "collapse"],
/**
* Z-Index
* @see https://tailwindcss.com/docs/z-index
*/
z: [{
z: [isInteger, "auto", isArbitraryVariable, isArbitraryValue]
}],
// ------------------------
// --- Flexbox and Grid ---
// ------------------------
/**
* Flex Basis
* @see https://tailwindcss.com/docs/flex-basis
*/
basis: [{
basis: [isFraction, "full", "auto", themeContainer, ...scaleUnambiguousSpacing()]
}],
/**
* 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: [isNumber, isFraction, "auto", "initial", "none", isArbitraryValue]
}],
/**
* Flex Grow
* @see https://tailwindcss.com/docs/flex-grow
*/
grow: [{
grow: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Flex Shrink
* @see https://tailwindcss.com/docs/flex-shrink
*/
shrink: [{
shrink: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Order
* @see https://tailwindcss.com/docs/order
*/
order: [{
order: [isInteger, "first", "last", "none", isArbitraryVariable, isArbitraryValue]
}],
/**
* Grid Template Columns
* @see https://tailwindcss.com/docs/grid-template-columns
*/
"grid-cols": [{
"grid-cols": scaleGridTemplateColsRows()
}],
/**
* Grid Column Start / End
* @see https://tailwindcss.com/docs/grid-column
*/
"col-start-end": [{
col: scaleGridColRowStartAndEnd()
}],
/**
* Grid Column Start
* @see https://tailwindcss.com/docs/grid-column
*/
"col-start": [{
"col-start": scaleGridColRowStartOrEnd()
}],
/**
* Grid Column End
* @see https://tailwindcss.com/docs/grid-column
*/
"col-end": [{
"col-end": scaleGridColRowStartOrEnd()
}],
/**
* Grid Template Rows
* @see https://tailwindcss.com/docs/grid-template-rows
*/
"grid-rows": [{
"grid-rows": scaleGridTemplateColsRows()
}],
/**
* Grid Row Start / End
* @see https://tailwindcss.com/docs/grid-row
*/
"row-start-end": [{
row: scaleGridColRowStartAndEnd()
}],
/**
* Grid Row Start
* @see https://tailwindcss.com/docs/grid-row
*/
"row-start": [{
"row-start": scaleGridColRowStartOrEnd()
}],
/**
* Grid Row End
* @see https://tailwindcss.com/docs/grid-row
*/
"row-end": [{
"row-end": scaleGridColRowStartOrEnd()
}],
/**
* 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": scaleGridAutoColsRows()
}],
/**
* Grid Auto Rows
* @see https://tailwindcss.com/docs/grid-auto-rows
*/
"auto-rows": [{
"auto-rows": scaleGridAutoColsRows()
}],
/**
* Gap
* @see https://tailwindcss.com/docs/gap
*/
gap: [{
gap: scaleUnambiguousSpacing()
}],
/**
* Gap X
* @see https://tailwindcss.com/docs/gap
*/
"gap-x": [{
"gap-x": scaleUnambiguousSpacing()
}],
/**
* Gap Y
* @see https://tailwindcss.com/docs/gap
*/
"gap-y": [{
"gap-y": scaleUnambiguousSpacing()
}],
/**
* Justify Content
* @see https://tailwindcss.com/docs/justify-content
*/
"justify-content": [{
justify: [...scaleAlignPrimaryAxis(), "normal"]
}],
/**
* Justify Items
* @see https://tailwindcss.com/docs/justify-items
*/
"justify-items": [{
"justify-items": [...scaleAlignSecondaryAxis(), "normal"]
}],
/**
* Justify Self
* @see https://tailwindcss.com/docs/justify-self
*/
"justify-self": [{
"justify-self": ["auto", ...scaleAlignSecondaryAxis()]
}],
/**
* Align Content
* @see https://tailwindcss.com/docs/align-content
*/
"align-content": [{
content: ["normal", ...scaleAlignPrimaryAxis()]
}],
/**
* Align Items
* @see https://tailwindcss.com/docs/align-items
*/
"align-items": [{
items: [...scaleAlignSecondaryAxis(), {
baseline: ["", "last"]
}]
}],
/**
* Align Self
* @see https://tailwindcss.com/docs/align-self
*/
"align-self": [{
self: ["auto", ...scaleAlignSecondaryAxis(), {
baseline: ["", "last"]
}]
}],
/**
* Place Content
* @see https://tailwindcss.com/docs/place-content
*/
"place-content": [{
"place-content": scaleAlignPrimaryAxis()
}],
/**
* Place Items
* @see https://tailwindcss.com/docs/place-items
*/
"place-items": [{
"place-items": [...scaleAlignSecondaryAxis(), "baseline"]
}],
/**
* Place Self
* @see https://tailwindcss.com/docs/place-self
*/
"place-self": [{
"place-self": ["auto", ...scaleAlignSecondaryAxis()]
}],
// Spacing
/**
* Padding
* @see https://tailwindcss.com/docs/padding
*/
p: [{
p: scaleUnambiguousSpacing()
}],
/**
* Padding Inline
* @see https://tailwindcss.com/docs/padding
*/
px: [{
px: scaleUnambiguousSpacing()
}],
/**
* Padding Block
* @see https://tailwindcss.com/docs/padding
*/
py: [{
py: scaleUnambiguousSpacing()
}],
/**
* Padding Inline Start
* @see https://tailwindcss.com/docs/padding
*/
ps: [{
ps: scaleUnambiguousSpacing()
}],
/**
* Padding Inline End
* @see https://tailwindcss.com/docs/padding
*/
pe: [{
pe: scaleUnambiguousSpacing()
}],
/**
* Padding Block Start
* @see https://tailwindcss.com/docs/padding
*/
pbs: [{
pbs: scaleUnambiguousSpacing()
}],
/**
* Padding Block End
* @see https://tailwindcss.com/docs/padding
*/
pbe: [{
pbe: scaleUnambiguousSpacing()
}],
/**
* Padding Top
* @see https://tailwindcss.com/docs/padding
*/
pt: [{
pt: scaleUnambiguousSpacing()
}],
/**
* Padding Right
* @see https://tailwindcss.com/docs/padding
*/
pr: [{
pr: scaleUnambiguousSpacing()
}],
/**
* Padding Bottom
* @see https://tailwindcss.com/docs/padding
*/
pb: [{
pb: scaleUnambiguousSpacing()
}],
/**
* Padding Left
* @see https://tailwindcss.com/docs/padding
*/
pl: [{
pl: scaleUnambiguousSpacing()
}],
/**
* Margin
* @see https://tailwindcss.com/docs/margin
*/
m: [{
m: scaleMargin()
}],
/**
* Margin Inline
* @see https://tailwindcss.com/docs/margin
*/
mx: [{
mx: scaleMargin()
}],
/**
* Margin Block
* @see https://tailwindcss.com/docs/margin
*/
my: [{
my: scaleMargin()
}],
/**
* Margin Inline Start
* @see https://tailwindcss.com/docs/margin
*/
ms: [{
ms: scaleMargin()
}],
/**
* Margin Inline End
* @see https://tailwindcss.com/docs/margin
*/
me: [{
me: scaleMargin()
}],
/**
* Margin Block Start
* @see https://tailwindcss.com/docs/margin
*/
mbs: [{
mbs: scaleMargin()
}],
/**
* Margin Block End
* @see https://tailwindcss.com/docs/margin
*/
mbe: [{
mbe: scaleMargin()
}],
/**
* Margin Top
* @see https://tailwindcss.com/docs/margin
*/
mt: [{
mt: scaleMargin()
}],
/**
* Margin Right
* @see https://tailwindcss.com/docs/margin
*/
mr: [{
mr: scaleMargin()
}],
/**
* Margin Bottom
* @see https://tailwindcss.com/docs/margin
*/
mb: [{
mb: scaleMargin()
}],
/**
* Margin Left
* @see https://tailwindcss.com/docs/margin
*/
ml: [{
ml: scaleMargin()
}],
/**
* Space Between X
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
"space-x": [{
"space-x": scaleUnambiguousSpacing()
}],
/**
* 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": scaleUnambiguousSpacing()
}],
/**
* 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: scaleSizing()
}],
/**
* Inline Size
* @see https://tailwindcss.com/docs/width
*/
"inline-size": [{
inline: ["auto", ...scaleSizingInline()]
}],
/**
* Min-Inline Size
* @see https://tailwindcss.com/docs/min-width
*/
"min-inline-size": [{
"min-inline": ["auto", ...scaleSizingInline()]
}],
/**
* Max-Inline Size
* @see https://tailwindcss.com/docs/max-width
*/
"max-inline-size": [{
"max-inline": ["none", ...scaleSizingInline()]
}],
/**
* Block Size
* @see https://tailwindcss.com/docs/height
*/
"block-size": [{
block: ["auto", ...scaleSizingBlock()]
}],
/**
* Min-Block Size
* @see https://tailwindcss.com/docs/min-height
*/
"min-block-size": [{
"min-block": ["auto", ...scaleSizingBlock()]
}],
/**
* Max-Block Size
* @see https://tailwindcss.com/docs/max-height
*/
"max-block-size": [{
"max-block": ["none", ...scaleSizingBlock()]
}],
/**
* Width
* @see https://tailwindcss.com/docs/width
*/
w: [{
w: [themeContainer, "screen", ...scaleSizing()]
}],
/**
* Min-Width
* @see https://tailwindcss.com/docs/min-width
*/
"min-w": [{
"min-w": [
themeContainer,
"screen",
/** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
"none",
...scaleSizing()
]
}],
/**
* Max-Width
* @see https://tailwindcss.com/docs/max-width
*/
"max-w": [{
"max-w": [
themeContainer,
"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: [themeBreakpoint]
},
...scaleSizing()
]
}],
/**
* Height
* @see https://tailwindcss.com/docs/height
*/
h: [{
h: ["screen", "lh", ...scaleSizing()]
}],
/**
* Min-Height
* @see https://tailwindcss.com/docs/min-height
*/
"min-h": [{
"min-h": ["screen", "lh", "none", ...scaleSizing()]
}],
/**
* Max-Height
* @see https://tailwindcss.com/docs/max-height
*/
"max-h": [{
"max-h": ["screen", "lh", ...scaleSizing()]
}],
// ------------------
// --- Typography ---
// ------------------
/**
* Font Size
* @see https://tailwindcss.com/docs/font-size
*/
"font-size": [{
text: ["base", themeText, isArbitraryVariableLength, isArbitraryLength]
}],
/**
* 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: [themeFontWeight, isArbitraryVariableWeight, isArbitraryWeight]
}],
/**
* 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", isPercent, isArbitraryValue]
}],
/**
* Font Family
* @see https://tailwindcss.com/docs/font-family
*/
"font-family": [{
font: [isArbitraryVariableFamilyName, isArbitraryFamilyName, themeFont]
}],
/**
* Font Feature Settings
* @see https://tailwindcss.com/docs/font-feature-settings
*/
"font-features": [{
"font-features": [isArbitraryValue]
}],
/**
* 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: [themeTracking, isArbitraryVariable, isArbitraryValue]
}],
/**
* Line Clamp
* @see https://tailwindcss.com/docs/line-clamp
*/
"line-clamp": [{
"line-clamp": [isNumber, "none", isArbitraryVariable, isArbitraryNumber]
}],
/**
* 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 */
themeLeading,
...scaleUnambiguousSpacing()
]
}],
/**
* List Style Image
* @see https://tailwindcss.com/docs/list-style-image
*/
"list-image": [{
"list-image": ["none", isArbitraryVariable, isArbitraryValue]
}],
/**
* 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", isArbitraryVariable, isArbitraryValue]
}],
/**
* 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: scaleColor()
}],
/**
* Text Color
* @see https://tailwindcss.com/docs/text-color
*/
"text-color": [{
text: scaleColor()
}],
/**
* 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: [...scaleLineStyle(), "wavy"]
}],
/**
* Text Decoration Thickness
* @see https://tailwindcss.com/docs/text-decoration-thickness
*/
"text-decoration-thickness": [{
decoration: [isNumber, "from-font", "auto", isArbitraryVariable, isArbitraryLength]
}],
/**
* Text Decoration Color
* @see https://tailwindcss.com/docs/text-decoration-color
*/
"text-decoration-color": [{
decoration: scaleColor()
}],
/**
* Text Underline Offset
* @see https://tailwindcss.com/docs/text-underline-offset
*/
"underline-offset": [{
"underline-offset": [isNumber, "auto", isArbitraryVariable, isArbitraryValue]
}],
/**
* 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: scaleUnambiguousSpacing()
}],
/**
* Tab Size
* @see https://tailwindcss.com/docs/tab-size
*/
"tab-size": [{
tab: [isInteger, isArbitraryVariable, isArbitraryValue]
}],
/**
* Vertical Alignment
* @see https://tailwindcss.com/docs/vertical-align
*/
"vertical-align": [{
align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryVariable, isArbitraryValue]
}],
/**
* 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", isArbitraryVariable, isArbitraryValue]
}],
// -------------------
// --- 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: scaleBgPosition()
}],
/**
* Background Repeat
* @see https://tailwindcss.com/docs/background-repeat
*/
"bg-repeat": [{
bg: scaleBgRepeat()
}],
/**
* Background Size
* @see https://tailwindcss.com/docs/background-size
*/
"bg-size": [{
bg: scaleBgSize()
}],
/**
* Background Image
* @see https://tailwindcss.com/docs/background-image
*/
"bg-image": [{
bg: ["none", {
linear: [{
to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
}, isInteger, isArbitraryVariable, isArbitraryValue],
radial: ["", isArbitraryVariable, isArbitraryValue],
conic: [isInteger, isArbitraryVariable, isArbitraryValue]
}, isArbitraryVariableImage, isArbitraryImage]
}],
/**
* Background Color
* @see https://tailwindcss.com/docs/background-color
*/
"bg-color": [{
bg: scaleColor()
}],
/**
* Gradient Color Stops From Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-from-pos": [{
from: scaleGradientStopPosition()
}],
/**
* Gradient Color Stops Via Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-via-pos": [{
via: scaleGradientStopPosition()
}],
/**
* Gradient Color Stops To Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-to-pos": [{
to: scaleGradientStopPosition()
}],
/**
* Gradient Color Stops From
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-from": [{
from: scaleColor()
}],
/**
* Gradient Color Stops Via
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-via": [{
via: scaleColor()
}],
/**
* Gradient Color Stops To
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-to": [{
to: scaleColor()
}],
// ---------------
// --- Borders ---
// ---------------
/**
* Border Radius
* @see https://tailwindcss.com/docs/border-radius
*/
rounded: [{
rounded: scaleRadius()
}],
/**
* Border Radius Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-s": [{
"rounded-s": scaleRadius()
}],
/**
* Border Radius End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-e": [{
"rounded-e": scaleRadius()
}],
/**
* Border Radius Top
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-t": [{
"rounded-t": scaleRadius()
}],
/**
* Border Radius Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-r": [{
"rounded-r": scaleRadius()
}],
/**
* Border Radius Bottom
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-b": [{
"rounded-b": scaleRadius()
}],
/**
* Border Radius Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-l": [{
"rounded-l": scaleRadius()
}],
/**
* Border Radius Start Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-ss": [{
"rounded-ss": scaleRadius()
}],
/**
* Border Radius Start End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-se": [{
"rounded-se": scaleRadius()
}],
/**
* Border Radius End End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-ee": [{
"rounded-ee": scaleRadius()
}],
/**
* Border Radius End Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-es": [{
"rounded-es": scaleRadius()
}],
/**
* Border Radius Top Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-tl": [{
"rounded-tl": scaleRadius()
}],
/**
* Border Radius Top Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-tr": [{
"rounded-tr": scaleRadius()
}],
/**
* Border Radius Bottom Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-br": [{
"rounded-br": scaleRadius()
}],
/**
* Border Radius Bottom Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-bl": [{
"rounded-bl": scaleRadius()
}],
/**
* Border Width
* @see https://tailwindcss.com/docs/border-width
*/
"border-w": [{
border: scaleBorderWidth()
}],
/**
* Border Width Inline
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-x": [{
"border-x": scaleBorderWidth()
}],
/**
* Border Width Block
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-y": [{
"border-y": scaleBorderWidth()
}],
/**
* Border Width Inline Start
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-s": [{
"border-s": scaleBorderWidth()
}],
/**
* Border Width Inline End
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-e": [{
"border-e": scaleBorderWidth()
}],
/**
* Border Width Block Start
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-bs": [{
"border-bs": scaleBorderWidth()
}],
/**
* Border Width Block End
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-be": [{
"border-be": scaleBorderWidth()
}],
/**
* Border Width Top
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-t": [{
"border-t": scaleBorderWidth()
}],
/**
* Border Width Right
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-r": [{
"border-r": scaleBorderWidth()
}],
/**
* Border Width Bottom
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-b": [{
"border-b": scaleBorderWidth()
}],
/**
* Border Width Left
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-l": [{
"border-l": scaleBorderWidth()
}],
/**
* Divide Width X
* @see https://tailwindcss.com/docs/border-width#between-children
*/
"divide-x": [{
"divide-x": scaleBorderWidth()
}],
/**
* 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": scaleBorderWidth()
}],
/**
* 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: [...scaleLineStyle(), "hidden", "none"]
}],
/**
* Divide Style
* @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
*/
"divide-style": [{
divide: [...scaleLineStyle(), "hidden", "none"]
}],
/**
* Border Color
* @see https://tailwindcss.com/docs/border-color
*/
"border-color": [{
border: scaleColor()
}],
/**
* Border Color Inline
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-x": [{
"border-x": scaleColor()
}],
/**
* Border Color Block
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-y": [{
"border-y": scaleColor()
}],
/**
* Border Color Inline Start
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-s": [{
"border-s": scaleColor()
}],
/**
* Border Color Inline End
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-e": [{
"border-e": scaleColor()
}],
/**
* Border Color Block Start
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-bs": [{
"border-bs": scaleColor()
}],
/**
* Border Color Block End
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-be": [{
"border-be": scaleColor()
}],
/**
* Border Color Top
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-t": [{
"border-t": scaleColor()
}],
/**
* Border Color Right
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-r": [{
"border-r": scaleColor()
}],
/**
* Border Color Bottom
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-b": [{
"border-b": scaleColor()
}],
/**
* Border Color Left
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-l": [{
"border-l": scaleColor()
}],
/**
* Divide Color
* @see https://tailwindcss.com/docs/divide-color
*/
"divide-color": [{
divide: scaleColor()
}],
/**
* Outline Style
* @see https://tailwindcss.com/docs/outline-style
*/
"outline-style": [{
outline: [...scaleLineStyle(), "none", "hidden"]
}],
/**
* Outline Offset
* @see https://tailwindcss.com/docs/outline-offset
*/
"outline-offset": [{
"outline-offset": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Outline Width
* @see https://tailwindcss.com/docs/outline-width
*/
"outline-w": [{
outline: ["", isNumber, isArbitraryVariableLength, isArbitraryLength]
}],
/**
* Outline Color
* @see https://tailwindcss.com/docs/outline-color
*/
"outline-color": [{
outline: scaleColor()
}],
// ---------------
// --- Effects ---
// ---------------
/**
* Box Shadow
* @see https://tailwindcss.com/docs/box-shadow
*/
shadow: [{
shadow: [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
themeShadow,
isArbitraryVariableShadow,
isArbitraryShadow
]
}],
/**
* Box Shadow Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
*/
"shadow-color": [{
shadow: scaleColor()
}],
/**
* Inset Box Shadow
* @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
*/
"inset-shadow": [{
"inset-shadow": ["none", themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
}],
/**
* Inset Box Shadow Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
*/
"inset-shadow-color": [{
"inset-shadow": scaleColor()
}],
/**
* Ring Width
* @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
*/
"ring-w": [{
ring: scaleBorderWidth()
}],
/**
* 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: scaleColor()
}],
/**
* 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": [isNumber, isArbitraryLength]
}],
/**
* 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": scaleColor()
}],
/**
* Inset Ring Width
* @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
*/
"inset-ring-w": [{
"inset-ring": scaleBorderWidth()
}],
/**
* Inset Ring Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
*/
"inset-ring-color": [{
"inset-ring": scaleColor()
}],
/**
* Text Shadow
* @see https://tailwindcss.com/docs/text-shadow
*/
"text-shadow": [{
"text-shadow": ["none", themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
}],
/**
* Text Shadow Color
* @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
*/
"text-shadow-color": [{
"text-shadow": scaleColor()
}],
/**
* Opacity
* @see https://tailwindcss.com/docs/opacity
*/
opacity: [{
opacity: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Mix Blend Mode
* @see https://tailwindcss.com/docs/mix-blend-mode
*/
"mix-blend": [{
"mix-blend": [...scaleBlendMode(), "plus-darker", "plus-lighter"]
}],
/**
* Background Blend Mode
* @see https://tailwindcss.com/docs/background-blend-mode
*/
"bg-blend": [{
"bg-blend": scaleBlendMode()
}],
/**
* Mask Clip
* @see https://tailwindcss.com/docs/mask-clip
*/
"mask-clip": [{
"mask-clip": ["border", "padding", "content", "fill", "stroke", "view"]
}, "mask-no-clip"],
/**
* Mask Composite
* @see https://tailwindcss.com/docs/mask-composite
*/
"mask-composite": [{
mask: ["add", "subtract", "intersect", "exclude"]
}],
/**
* Mask Image
* @see https://tailwindcss.com/docs/mask-image
*/
"mask-image-linear-pos": [{
"mask-linear": [isNumber]
}],
"mask-image-linear-from-pos": [{
"mask-linear-from": scaleMaskImagePosition()
}],
"mask-image-linear-to-pos": [{
"mask-linear-to": scaleMaskImagePosition()
}],
"mask-image-linear-from-color": [{
"mask-linear-from": scaleColor()
}],
"mask-image-linear-to-color": [{
"mask-linear-to": scaleColor()
}],
"mask-image-t-from-pos": [{
"mask-t-from": scaleMaskImagePosition()
}],
"mask-image-t-to-pos": [{
"mask-t-to": scaleMaskImagePosition()
}],
"mask-image-t-from-color": [{
"mask-t-from": scaleColor()
}],
"mask-image-t-to-color": [{
"mask-t-to": scaleColor()
}],
"mask-image-r-from-pos": [{
"mask-r-from": scaleMaskImagePosition()
}],
"mask-image-r-to-pos": [{
"mask-r-to": scaleMaskImagePosition()
}],
"mask-image-r-from-color": [{
"mask-r-from": scaleColor()
}],
"mask-image-r-to-color": [{
"mask-r-to": scaleColor()
}],
"mask-image-b-from-pos": [{
"mask-b-from": scaleMaskImagePosition()
}],
"mask-image-b-to-pos": [{
"mask-b-to": scaleMaskImagePosition()
}],
"mask-image-b-from-color": [{
"mask-b-from": scaleColor()
}],
"mask-image-b-to-color": [{
"mask-b-to": scaleColor()
}],
"mask-image-l-from-pos": [{
"mask-l-from": scaleMaskImagePosition()
}],
"mask-image-l-to-pos": [{
"mask-l-to": scaleMaskImagePosition()
}],
"mask-image-l-from-color": [{
"mask-l-from": scaleColor()
}],
"mask-image-l-to-color": [{
"mask-l-to": scaleColor()
}],
"mask-image-x-from-pos": [{
"mask-x-from": scaleMaskImagePosition()
}],
"mask-image-x-to-pos": [{
"mask-x-to": scaleMaskImagePosition()
}],
"mask-image-x-from-color": [{
"mask-x-from": scaleColor()
}],
"mask-image-x-to-color": [{
"mask-x-to": scaleColor()
}],
"mask-image-y-from-pos": [{
"mask-y-from": scaleMaskImagePosition()
}],
"mask-image-y-to-pos": [{
"mask-y-to": scaleMaskImagePosition()
}],
"mask-image-y-from-color": [{
"mask-y-from": scaleColor()
}],
"mask-image-y-to-color": [{
"mask-y-to": scaleColor()
}],
"mask-image-radial": [{
"mask-radial": [isArbitraryVariable, isArbitraryValue]
}],
"mask-image-radial-from-pos": [{
"mask-radial-from": scaleMaskImagePosition()
}],
"mask-image-radial-to-pos": [{
"mask-radial-to": scaleMaskImagePosition()
}],
"mask-image-radial-from-color": [{
"mask-radial-from": scaleColor()
}],
"mask-image-radial-to-color": [{
"mask-radial-to": scaleColor()
}],
"mask-image-radial-shape": [{
"mask-radial": ["circle", "ellipse"]
}],
"mask-image-radial-size": [{
"mask-radial": [{
closest: ["side", "corner"],
farthest: ["side", "corner"]
}]
}],
"mask-image-radial-pos": [{
"mask-radial-at": scalePosition()
}],
"mask-image-conic-pos": [{
"mask-conic": [isNumber]
}],
"mask-image-conic-from-pos": [{
"mask-conic-from": scaleMaskImagePosition()
}],
"mask-image-conic-to-pos": [{
"mask-conic-to": scaleMaskImagePosition()
}],
"mask-image-conic-from-color": [{
"mask-conic-from": scaleColor()
}],
"mask-image-conic-to-color": [{
"mask-conic-to": scaleColor()
}],
/**
* Mask Mode
* @see https://tailwindcss.com/docs/mask-mode
*/
"mask-mode": [{
mask: ["alpha", "luminance", "match"]
}],
/**
* Mask Origin
* @see https://tailwindcss.com/docs/mask-origin
*/
"mask-origin": [{
"mask-origin": ["border", "padding", "content", "fill", "stroke", "view"]
}],
/**
* Mask Position
* @see https://tailwindcss.com/docs/mask-position
*/
"mask-position": [{
mask: scaleBgPosition()
}],
/**
* Mask Repeat
* @see https://tailwindcss.com/docs/mask-repeat
*/
"mask-repeat": [{
mask: scaleBgRepeat()
}],
/**
* Mask Size
* @see https://tailwindcss.com/docs/mask-size
*/
"mask-size": [{
mask: scaleBgSize()
}],
/**
* Mask Type
* @see https://tailwindcss.com/docs/mask-type
*/
"mask-type": [{
"mask-type": ["alpha", "luminance"]
}],
/**
* Mask Image
* @see https://tailwindcss.com/docs/mask-image
*/
"mask-image": [{
mask: ["none", isArbitraryVariable, isArbitraryValue]
}],
// ---------------
// --- Filters ---
// ---------------
/**
* Filter
* @see https://tailwindcss.com/docs/filter
*/
filter: [{
filter: [
// Deprecated since Tailwind CSS v3.0.0
"",
"none",
isArbitraryVariable,
isArbitraryValue
]
}],
/**
* Blur
* @see https://tailwindcss.com/docs/blur
*/
blur: [{
blur: scaleBlur()
}],
/**
* Brightness
* @see https://tailwindcss.com/docs/brightness
*/
brightness: [{
brightness: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Contrast
* @see https://tailwindcss.com/docs/contrast
*/
contrast: [{
contrast: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Drop Shadow
* @see https://tailwindcss.com/docs/drop-shadow
*/
"drop-shadow": [{
"drop-shadow": [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
themeDropShadow,
isArbitraryVariableShadow,
isArbitraryShadow
]
}],
/**
* Drop Shadow Color
* @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
*/
"drop-shadow-color": [{
"drop-shadow": scaleColor()
}],
/**
* Grayscale
* @see https://tailwindcss.com/docs/grayscale
*/
grayscale: [{
grayscale: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Hue Rotate
* @see https://tailwindcss.com/docs/hue-rotate
*/
"hue-rotate": [{
"hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Invert
* @see https://tailwindcss.com/docs/invert
*/
invert: [{
invert: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Saturate
* @see https://tailwindcss.com/docs/saturate
*/
saturate: [{
saturate: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Sepia
* @see https://tailwindcss.com/docs/sepia
*/
sepia: [{
sepia: ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Filter
* @see https://tailwindcss.com/docs/backdrop-filter
*/
"backdrop-filter": [{
"backdrop-filter": [
// Deprecated since Tailwind CSS v3.0.0
"",
"none",
isArbitraryVariable,
isArbitraryValue
]
}],
/**
* Backdrop Blur
* @see https://tailwindcss.com/docs/backdrop-blur
*/
"backdrop-blur": [{
"backdrop-blur": scaleBlur()
}],
/**
* Backdrop Brightness
* @see https://tailwindcss.com/docs/backdrop-brightness
*/
"backdrop-brightness": [{
"backdrop-brightness": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Contrast
* @see https://tailwindcss.com/docs/backdrop-contrast
*/
"backdrop-contrast": [{
"backdrop-contrast": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Grayscale
* @see https://tailwindcss.com/docs/backdrop-grayscale
*/
"backdrop-grayscale": [{
"backdrop-grayscale": ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Hue Rotate
* @see https://tailwindcss.com/docs/backdrop-hue-rotate
*/
"backdrop-hue-rotate": [{
"backdrop-hue-rotate": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Invert
* @see https://tailwindcss.com/docs/backdrop-invert
*/
"backdrop-invert": [{
"backdrop-invert": ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Opacity
* @see https://tailwindcss.com/docs/backdrop-opacity
*/
"backdrop-opacity": [{
"backdrop-opacity": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Saturate
* @see https://tailwindcss.com/docs/backdrop-saturate
*/
"backdrop-saturate": [{
"backdrop-saturate": [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Backdrop Sepia
* @see https://tailwindcss.com/docs/backdrop-sepia
*/
"backdrop-sepia": [{
"backdrop-sepia": ["", isNumber, isArbitraryVariable, isArbitraryValue]
}],
// --------------
// --- Tables ---
// --------------
/**
* Border Collapse
* @see https://tailwindcss.com/docs/border-collapse
*/
"border-collapse": [{
border: ["collapse", "separate"]
}],
/**
* Border Spacing
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing": [{
"border-spacing": scaleUnambiguousSpacing()
}],
/**
* Border Spacing X
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing-x": [{
"border-spacing-x": scaleUnambiguousSpacing()
}],
/**
* Border Spacing Y
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing-y": [{
"border-spacing-y": scaleUnambiguousSpacing()
}],
/**
* Table Layout
* @see https://tailwindcss.com/docs/table-layout
*/
"table-layout": [{
table: ["auto", "fixed"]
}],
/**
* Caption Side
* @see https://tailwindcss.com/docs/caption-side
*/
caption: [{
caption: ["top", "bottom"]
}],
// ---------------------------------
// --- Transitions and Animation ---
// ---------------------------------
/**
* Transition Property
* @see https://tailwindcss.com/docs/transition-property
*/
transition: [{
transition: ["", "all", "colors", "opacity", "shadow", "transform", "none", isArbitraryVariable, isArbitraryValue]
}],
/**
* Transition Behavior
* @see https://tailwindcss.com/docs/transition-behavior
*/
"transition-behavior": [{
transition: ["normal", "discrete"]
}],
/**
* Transition Duration
* @see https://tailwindcss.com/docs/transition-duration
*/
duration: [{
duration: [isNumber, "initial", isArbitraryVariable, isArbitraryValue]
}],
/**
* Transition Timing Function
* @see https://tailwindcss.com/docs/transition-timing-function
*/
ease: [{
ease: ["linear", "initial", themeEase, isArbitraryVariable, isArbitraryValue]
}],
/**
* Transition Delay
* @see https://tailwindcss.com/docs/transition-delay
*/
delay: [{
delay: [isNumber, isArbitraryVariable, isArbitraryValue]
}],
/**
* Animation
* @see https://tailwindcss.com/docs/animation
*/
animate: [{
animate: ["none", themeAnimate, isArbitraryVariable, isArbitraryValue]
}],
// ------------------
// --- Transforms ---
// ------------------
/**
* Backface Visibility
* @see https://tailwindcss.com/docs/backface-visibility
*/
backface: [{
backface: ["hidden", "visible"]
}],
/**
* Perspective
* @see https://tailwindcss.com/docs/perspective
*/
perspective: [{
perspective: [themePerspective, isArbitraryVariable, isArbitraryValue]
}],
/**
* Perspective Origin
* @see https://tailwindcss.com/docs/perspective-origin
*/
"perspective-origin": [{
"perspective-origin": scalePositionWithArbitrary()
}],
/**
* Rotate
* @see https://tailwindcss.com/docs/rotate
*/
rotate: [{
rotate: scaleRotate()
}],
/**
* Rotate X
* @see https://tailwindcss.com/docs/rotate
*/
"rotate-x": [{
"rotate-x": scaleRotate()
}],
/**
* Rotate Y
* @see https://tailwindcss.com/docs/rotate
*/
"rotate-y": [{
"rotate-y": scaleRotate()
}],
/**
* Rotate Z
* @see https://tailwindcss.com/docs/rotate
*/
"rotate-z": [{
"rotate-z": scaleRotate()
}],
/**
* Scale
* @see https://tailwindcss.com/docs/scale
*/
scale: [{
scale: scaleScale()
}],
/**
* Scale X
* @see https://tailwindcss.com/docs/scale
*/
"scale-x": [{
"scale-x": scaleScale()
}],
/**
* Scale Y
* @see https://tailwindcss.com/docs/scale
*/
"scale-y": [{
"scale-y": scaleScale()
}],
/**
* Scale Z
* @see https://tailwindcss.com/docs/scale
*/
"scale-z": [{
"scale-z": scaleScale()
}],
/**
* Scale 3D
* @see https://tailwindcss.com/docs/scale
*/
"scale-3d": ["scale-3d"],
/**
* Skew
* @see https://tailwindcss.com/docs/skew
*/
skew: [{
skew: scaleSkew()
}],
/**
* Skew X
* @see https://tailwindcss.com/docs/skew
*/
"skew-x": [{
"skew-x": scaleSkew()
}],
/**
* Skew Y
* @see https://tailwindcss.com/docs/skew
*/
"skew-y": [{
"skew-y": scaleSkew()
}],
/**
* Transform
* @see https://tailwindcss.com/docs/transform
*/
transform: [{
transform: [isArbitraryVariable, isArbitraryValue, "", "none", "gpu", "cpu"]
}],
/**
* Transform Origin
* @see https://tailwindcss.com/docs/transform-origin
*/
"transform-origin": [{
origin: scalePositionWithArbitrary()
}],
/**
* Transform Style
* @see https://tailwindcss.com/docs/transform-style
*/
"transform-style": [{
transform: ["3d", "flat"]
}],
/**
* Translate
* @see https://tailwindcss.com/docs/translate
*/
translate: [{
translate: scaleTranslate()
}],
/**
* Translate X
* @see https://tailwindcss.com/docs/translate
*/
"translate-x": [{
"translate-x": scaleTranslate()
}],
/**
* Translate Y
* @see https://tailwindcss.com/docs/translate
*/
"translate-y": [{
"translate-y": scaleTranslate()
}],
/**
* Translate Z
* @see https://tailwindcss.com/docs/translate
*/
"translate-z": [{
"translate-z": scaleTranslate()
}],
/**
* Translate None
* @see https://tailwindcss.com/docs/translate
*/
"translate-none": ["translate-none"],
/**
* Zoom
* @see https://tailwindcss.com/docs/zoom
*/
zoom: [{
zoom: [isInteger, isArbitraryVariable, isArbitraryValue]
}],
// ---------------------
// --- Interactivity ---
// ---------------------
/**
* Accent Color
* @see https://tailwindcss.com/docs/accent-color
*/
accent: [{
accent: scaleColor()
}],
/**
* Appearance
* @see https://tailwindcss.com/docs/appearance
*/
appearance: [{
appearance: ["none", "auto"]
}],
/**
* Caret Color
* @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
*/
"caret-color": [{
caret: scaleColor()
}],
/**
* Color Scheme
* @see https://tailwindcss.com/docs/color-scheme
*/
"color-scheme": [{
scheme: ["normal", "dark", "light", "light-dark", "only-dark", "only-light"]
}],
/**
* Cursor
* @see https://tailwindcss.com/docs/cursor
*/
cursor: [{
cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", isArbitraryVariable, isArbitraryValue]
}],
/**
* Field Sizing
* @see https://tailwindcss.com/docs/field-sizing
*/
"field-sizing": [{
"field-sizing": ["fixed", "content"]
}],
/**
* Pointer Events
* @see https://tailwindcss.com/docs/pointer-events
*/
"pointer-events": [{
"pointer-events": ["auto", "none"]
}],
/**
* Resize
* @see https://tailwindcss.com/docs/resize
*/
resize: [{
resize: ["none", "", "y", "x"]
}],
/**
* Scroll Behavior
* @see https://tailwindcss.com/docs/scroll-behavior
*/
"scroll-behavior": [{
scroll: ["auto", "smooth"]
}],
/**
* Scrollbar Thumb Color
* @see https://tailwindcss.com/docs/scrollbar-color
*/
"scrollbar-thumb-color": [{
"scrollbar-thumb": scaleColor()
}],
/**
* Scrollbar Track Color
* @see https://tailwindcss.com/docs/scrollbar-color
*/
"scrollbar-track-color": [{
"scrollbar-track": scaleColor()
}],
/**
* Scrollbar Gutter
* @see https://tailwindcss.com/docs/scrollbar-gutter
*/
"scrollbar-gutter": [{
"scrollbar-gutter": ["auto", "stable", "both"]
}],
/**
* Scrollbar Width
* @see https://tailwindcss.com/docs/scrollbar-width
*/
"scrollbar-w": [{
scrollbar: ["auto", "thin", "none"]
}],
/**
* Scroll Margin
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-m": [{
"scroll-m": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Inline
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mx": [{
"scroll-mx": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Block
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-my": [{
"scroll-my": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Inline Start
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-ms": [{
"scroll-ms": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Inline End
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-me": [{
"scroll-me": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Block Start
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mbs": [{
"scroll-mbs": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Block End
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mbe": [{
"scroll-mbe": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Top
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mt": [{
"scroll-mt": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Right
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mr": [{
"scroll-mr": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Bottom
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mb": [{
"scroll-mb": scaleUnambiguousSpacing()
}],
/**
* Scroll Margin Left
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-ml": [{
"scroll-ml": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-p": [{
"scroll-p": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Inline
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-px": [{
"scroll-px": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Block
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-py": [{
"scroll-py": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Inline Start
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-ps": [{
"scroll-ps": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Inline End
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pe": [{
"scroll-pe": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Block Start
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pbs": [{
"scroll-pbs": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Block End
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pbe": [{
"scroll-pbe": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Top
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pt": [{
"scroll-pt": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Right
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pr": [{
"scroll-pr": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Bottom
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pb": [{
"scroll-pb": scaleUnambiguousSpacing()
}],
/**
* Scroll Padding Left
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pl": [{
"scroll-pl": scaleUnambiguousSpacing()
}],
/**
* Scroll Snap Align
* @see https://tailwindcss.com/docs/scroll-snap-align
*/
"snap-align": [{
snap: ["start", "end", "center", "align-none"]
}],
/**
* Scroll Snap Stop
* @see https://tailwindcss.com/docs/scroll-snap-stop
*/
"snap-stop": [{
snap: ["normal", "always"]
}],
/**
* Scroll Snap Type
* @see https://tailwindcss.com/docs/scroll-snap-type
*/
"snap-type": [{
snap: ["none", "x", "y", "both"]
}],
/**
* Scroll Snap Type Strictness
* @see https://tailwindcss.com/docs/scroll-snap-type
*/
"snap-strictness": [{
snap: ["mandatory", "proximity"]
}],
/**
* Touch Action
* @see https://tailwindcss.com/docs/touch-action
*/
touch: [{
touch: ["auto", "none", "manipulation"]
}],
/**
* Touch Action X
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-x": [{
"touch-pan": ["x", "left", "right"]
}],
/**
* Touch Action Y
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-y": [{
"touch-pan": ["y", "up", "down"]
}],
/**
* Touch Action Pinch Zoom
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-pz": ["touch-pinch-zoom"],
/**
* User Select
* @see https://tailwindcss.com/docs/user-select
*/
select: [{
select: ["none", "text", "all", "auto"]
}],
/**
* Will Change
* @see https://tailwindcss.com/docs/will-change
*/
"will-change": [{
"will-change": ["auto", "scroll", "contents", "transform", isArbitraryVariable, isArbitraryValue]
}],
// -----------
// --- SVG ---
// -----------
/**
* Fill
* @see https://tailwindcss.com/docs/fill
*/
fill: [{
fill: ["none", ...scaleColor()]
}],
/**
* Stroke Width
* @see https://tailwindcss.com/docs/stroke-width
*/
"stroke-w": [{
stroke: [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber]
}],
/**
* Stroke
* @see https://tailwindcss.com/docs/stroke
*/
stroke: [{
stroke: ["none", ...scaleColor()]
}],
// ---------------------
// --- Accessibility ---
// ---------------------
/**
* Forced Color Adjust
* @see https://tailwindcss.com/docs/forced-color-adjust
*/
"forced-color-adjust": [{
"forced-color-adjust": ["auto", "none"]
}]
},
conflictingClassGroups: {
"container-named": ["container-type"],
overflow: ["overflow-x", "overflow-y"],
overscroll: ["overscroll-x", "overscroll-y"],
inset: ["inset-x", "inset-y", "inset-bs", "inset-be", "start", "end", "top", "right", "bottom", "left"],
"inset-x": ["right", "left"],
"inset-y": ["top", "bottom"],
flex: ["basis", "grow", "shrink"],
gap: ["gap-x", "gap-y"],
p: ["px", "py", "ps", "pe", "pbs", "pbe", "pt", "pr", "pb", "pl"],
px: ["pr", "pl"],
py: ["pt", "pb"],
m: ["mx", "my", "ms", "me", "mbs", "mbe", "mt", "mr", "mb", "ml"],
mx: ["mr", "ml"],
my: ["mt", "mb"],
size: ["w", "h"],
"font-size": ["leading"],
"fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
"fvn-ordinal": ["fvn-normal"],
"fvn-slashed-zero": ["fvn-normal"],
"fvn-figure": ["fvn-normal"],
"fvn-spacing": ["fvn-normal"],
"fvn-fraction": ["fvn-normal"],
"line-clamp": ["display", "overflow"],
rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
"rounded-s": ["rounded-ss", "rounded-es"],
"rounded-e": ["rounded-se", "rounded-ee"],
"rounded-t": ["rounded-tl", "rounded-tr"],
"rounded-r": ["rounded-tr", "rounded-br"],
"rounded-b": ["rounded-br", "rounded-bl"],
"rounded-l": ["rounded-tl", "rounded-bl"],
"border-spacing": ["border-spacing-x", "border-spacing-y"],
"border-w": ["border-w-x", "border-w-y", "border-w-s", "border-w-e", "border-w-bs", "border-w-be", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
"border-w-x": ["border-w-r", "border-w-l"],
"border-w-y": ["border-w-t", "border-w-b"],
"border-color": ["border-color-x", "border-color-y", "border-color-s", "border-color-e", "border-color-bs", "border-color-be", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
"border-color-x": ["border-color-r", "border-color-l"],
"border-color-y": ["border-color-t", "border-color-b"],
translate: ["translate-x", "translate-y", "translate-none"],
"translate-none": ["translate", "translate-x", "translate-y", "translate-z"],
"scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mbs", "scroll-mbe", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
"scroll-mx": ["scroll-mr", "scroll-ml"],
"scroll-my": ["scroll-mt", "scroll-mb"],
"scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pbs", "scroll-pbe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
"scroll-px": ["scroll-pr", "scroll-pl"],
"scroll-py": ["scroll-pt", "scroll-pb"],
touch: ["touch-x", "touch-y", "touch-pz"],
"touch-x": ["touch"],
"touch-y": ["touch"],
"touch-pz": ["touch"]
},
conflictingClassGroupModifiers: {
"font-size": ["leading"]
},
postfixLookupClassGroups: ["container-type"],
orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
};
};
var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
// src/presentation/components/ui/cn.ts
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// src/presentation/components/ui/Label.tsx
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
// node_modules/@base-ui/react/slider/index.parts.mjs
var index_parts_exports = {};
__export(index_parts_exports, {
Control: () => SliderControl,
Indicator: () => SliderIndicator,
Label: () => SliderLabel,
Root: () => SliderRoot,
Thumb: () => SliderThumb,
Track: () => SliderTrack,
Value: () => SliderValue
});
// node_modules/@base-ui/react/slider/root/SliderRoot.mjs
var React17 = __toESM(require_react(), 1);
// node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
function hasWindow() {
return typeof window !== "undefined";
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function isElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Element || value instanceof getWindow(value).Element;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || typeof ShadowRoot === "undefined") {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
}
// node_modules/@base-ui/utils/owner.mjs
function ownerDocument(node) {
return node?.ownerDocument || document;
}
// node_modules/@base-ui/utils/useControlled.mjs
var React = __toESM(require_react(), 1);
// node_modules/@base-ui/utils/error.mjs
var set;
if (true) {
set = /* @__PURE__ */ new Set();
}
function error(...messages) {
if (true) {
const messageKey = messages.join(" ");
if (!set.has(messageKey)) {
set.add(messageKey);
console.error(`Base UI: ${messageKey}`);
}
}
}
// node_modules/@base-ui/utils/useControlled.mjs
function useControlled({
controlled,
default: defaultProp,
name,
state = "value"
}) {
const {
current: isControlled
} = React.useRef(controlled !== void 0);
const [valueState, setValue] = React.useState(defaultProp);
const value = isControlled ? controlled : valueState;
if (true) {
React.useEffect(() => {
if (isControlled !== (controlled !== void 0)) {
error([`A component is changing the ${isControlled ? "" : "un"}controlled ${state} state of ${name} to be ${isControlled ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join("\n"));
}
}, [state, name, controlled]);
const {
current: defaultValue
} = React.useRef(defaultProp);
React.useEffect(() => {
if (!isControlled && serializeToDevModeString(defaultValue) !== serializeToDevModeString(defaultProp)) {
error([`A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. To suppress this warning opt to use a controlled ${name}.`].join("\n"));
}
}, [defaultProp]);
}
const setValueIfUncontrolled = React.useCallback((newValue) => {
if (!isControlled) {
setValue(newValue);
}
}, []);
return [value, setValueIfUncontrolled];
}
function serializeToDevModeString(input) {
let nextId = 0;
const seen = /* @__PURE__ */ new WeakMap();
try {
const result = JSON.stringify(input, function replacer(key, value) {
if (key === "_owner" && this != null && typeof this === "object" && "$$typeof" in this) {
return void 0;
}
if (typeof value === "bigint") {
return `__bigint__:${value}`;
}
if (value !== null && typeof value === "object") {
const id = seen.get(value);
if (id !== void 0) {
return `__object__:${id}`;
}
seen.set(value, nextId);
nextId += 1;
}
return value;
});
return result ?? `__top__:${typeof input}`;
} catch {
return "__unserializable__";
}
}
// node_modules/@base-ui/utils/safeReact.mjs
var React2 = __toESM(require_react(), 1);
var SafeReact = {
...React2
};
// node_modules/@base-ui/utils/useRefWithInit.mjs
var React3 = __toESM(require_react(), 1);
var UNINITIALIZED = {};
function useRefWithInit(init, initArg) {
const ref = React3.useRef(UNINITIALIZED);
if (ref.current === UNINITIALIZED) {
ref.current = init(initArg);
}
return ref;
}
// node_modules/@base-ui/utils/useStableCallback.mjs
var useInsertionEffect = SafeReact.useInsertionEffect;
var useSafeInsertionEffect = (
// React 17 doesn't have useInsertionEffect.
useInsertionEffect && // Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
useInsertionEffect !== SafeReact.useLayoutEffect ? useInsertionEffect : (fn) => fn()
);
function useStableCallback(callback) {
const stable = useRefWithInit(createStableCallback).current;
stable.next = callback;
useSafeInsertionEffect(stable.effect);
return stable.trampoline;
}
function createStableCallback() {
const stable = {
next: void 0,
callback: assertNotCalled,
trampoline: (...args) => stable.callback?.(...args),
effect: () => {
stable.callback = stable.next;
}
};
return stable;
}
function assertNotCalled() {
if (true) {
throw (
/* minify-error-disabled */
new Error("Base UI: Cannot call an event handler while rendering.")
);
}
}
// node_modules/@base-ui/utils/useIsoLayoutEffect.mjs
var React4 = __toESM(require_react(), 1);
var noop = () => {
};
var useIsoLayoutEffect = typeof document !== "undefined" ? React4.useLayoutEffect : noop;
// node_modules/@base-ui/utils/useValueAsRef.mjs
function useValueAsRef(value) {
const latest = useRefWithInit(createLatestRef, value).current;
latest.next = value;
useIsoLayoutEffect(latest.effect);
return latest;
}
function createLatestRef(value) {
const latest = {
current: value,
next: value,
effect: () => {
latest.current = latest.next;
}
};
return latest;
}
// node_modules/@base-ui/utils/warn.mjs
var set2;
if (true) {
set2 = /* @__PURE__ */ new Set();
}
function warn(...messages) {
if (true) {
const messageKey = messages.join(" ");
if (!set2.has(messageKey)) {
set2.add(messageKey);
console.warn(`Base UI: ${messageKey}`);
}
}
}
// node_modules/@base-ui/utils/empty.mjs
function NOOP() {
}
var EMPTY_ARRAY = Object.freeze([]);
var EMPTY_OBJECT = Object.freeze({});
// node_modules/@base-ui/react/internals/reason-parts.mjs
var reason_parts_exports = {};
__export(reason_parts_exports, {
cancelOpen: () => cancelOpen,
chipRemovePress: () => chipRemovePress,
clearPress: () => clearPress,
closePress: () => closePress,
closeWatcher: () => closeWatcher,
decrementPress: () => decrementPress,
disabled: () => disabled,
drag: () => drag,
escapeKey: () => escapeKey,
focusOut: () => focusOut,
imperativeAction: () => imperativeAction,
incrementPress: () => incrementPress,
initial: () => initial,
inputBlur: () => inputBlur,
inputChange: () => inputChange,
inputClear: () => inputClear,
inputPaste: () => inputPaste,
inputPress: () => inputPress,
itemPress: () => itemPress,
keyboard: () => keyboard,
linkPress: () => linkPress,
listNavigation: () => listNavigation,
missing: () => missing,
none: () => none,
outsidePress: () => outsidePress,
pointer: () => pointer,
scrub: () => scrub,
siblingOpen: () => siblingOpen,
swipe: () => swipe,
trackPress: () => trackPress,
triggerFocus: () => triggerFocus,
triggerHover: () => triggerHover,
triggerPress: () => triggerPress,
wheel: () => wheel,
windowResize: () => windowResize
});
var none = "none";
var triggerPress = "trigger-press";
var triggerHover = "trigger-hover";
var triggerFocus = "trigger-focus";
var outsidePress = "outside-press";
var itemPress = "item-press";
var closePress = "close-press";
var linkPress = "link-press";
var clearPress = "clear-press";
var chipRemovePress = "chip-remove-press";
var trackPress = "track-press";
var incrementPress = "increment-press";
var decrementPress = "decrement-press";
var inputChange = "input-change";
var inputClear = "input-clear";
var inputBlur = "input-blur";
var inputPaste = "input-paste";
var inputPress = "input-press";
var focusOut = "focus-out";
var escapeKey = "escape-key";
var closeWatcher = "close-watcher";
var listNavigation = "list-navigation";
var keyboard = "keyboard";
var pointer = "pointer";
var drag = "drag";
var wheel = "wheel";
var scrub = "scrub";
var cancelOpen = "cancel-open";
var siblingOpen = "sibling-open";
var disabled = "disabled";
var missing = "missing";
var initial = "initial";
var imperativeAction = "imperative-action";
var swipe = "swipe";
var windowResize = "window-resize";
// node_modules/@base-ui/react/internals/createBaseUIEventDetails.mjs
function createChangeEventDetails(reason, event, trigger, customProperties) {
let canceled = false;
let allowPropagation = false;
const custom = customProperties ?? EMPTY_OBJECT;
const details = {
reason,
event: event ?? new Event("base-ui"),
cancel() {
canceled = true;
},
allowPropagation() {
allowPropagation = true;
},
get isCanceled() {
return canceled;
},
get isPropagationAllowed() {
return allowPropagation;
},
trigger,
...custom
};
return details;
}
function createGenericEventDetails(reason, event, customProperties) {
const custom = customProperties ?? EMPTY_OBJECT;
const details = {
reason,
event: event ?? new Event("base-ui"),
...custom
};
return details;
}
// node_modules/@base-ui/react/internals/useValueChanged.mjs
var React5 = __toESM(require_react(), 1);
function useValueChanged(value, onChange) {
const valueRef = React5.useRef(value);
const onChangeCallback = useStableCallback(onChange);
useIsoLayoutEffect(() => {
if (valueRef.current === value) {
return;
}
onChangeCallback(valueRef.current);
}, [value, onChangeCallback]);
useIsoLayoutEffect(() => {
valueRef.current = value;
}, [value]);
}
// node_modules/@base-ui/utils/useId.mjs
var React6 = __toESM(require_react(), 1);
var globalId = 0;
function useGlobalId(idOverride, prefix = "mui") {
const [defaultId, setDefaultId] = React6.useState(idOverride);
const id = idOverride || defaultId;
React6.useEffect(() => {
if (defaultId == null) {
globalId += 1;
setDefaultId(`${prefix}-${globalId}`);
}
}, [defaultId, prefix]);
return id;
}
var maybeReactUseId = SafeReact.useId;
function useId(idOverride, prefix) {
if (maybeReactUseId !== void 0) {
const reactId = maybeReactUseId();
return idOverride ?? (prefix ? `${prefix}-${reactId}` : reactId);
}
return useGlobalId(idOverride, prefix);
}
// node_modules/@base-ui/react/internals/useBaseUiId.mjs
function useBaseUiId(idOverride) {
return useId(idOverride, "base-ui");
}
// node_modules/@base-ui/react/internals/useRenderElement.mjs
var React9 = __toESM(require_react(), 1);
// node_modules/@base-ui/utils/useMergedRefs.mjs
function useMergedRefs(a, b, c, d) {
const forkRef = useRefWithInit(createForkRef).current;
if (didChange(forkRef, a, b, c, d)) {
update(forkRef, [a, b, c, d]);
}
return forkRef.callback;
}
function useMergedRefsN(refs) {
const forkRef = useRefWithInit(createForkRef).current;
if (didChangeN(forkRef, refs)) {
update(forkRef, refs);
}
return forkRef.callback;
}
function createForkRef() {
return {
callback: null,
cleanup: null,
refs: []
};
}
function didChange(forkRef, a, b, c, d) {
return forkRef.refs[0] !== a || forkRef.refs[1] !== b || forkRef.refs[2] !== c || forkRef.refs[3] !== d;
}
function didChangeN(forkRef, newRefs) {
return forkRef.refs.length !== newRefs.length || forkRef.refs.some((ref, index) => ref !== newRefs[index]);
}
function update(forkRef, refs) {
forkRef.refs = refs;
if (refs.every((ref) => ref == null)) {
forkRef.callback = null;
return;
}
forkRef.callback = (instance) => {
if (forkRef.cleanup) {
forkRef.cleanup();
forkRef.cleanup = null;
}
if (instance != null) {
const cleanupCallbacks = Array(refs.length).fill(null);
for (let i = 0; i < refs.length; i += 1) {
const ref = refs[i];
if (ref == null) {
continue;
}
switch (typeof ref) {
case "function": {
const refCleanup = ref(instance);
if (typeof refCleanup === "function") {
cleanupCallbacks[i] = refCleanup;
}
break;
}
case "object": {
ref.current = instance;
break;
}
default:
}
}
forkRef.cleanup = () => {
for (let i = 0; i < refs.length; i += 1) {
const ref = refs[i];
if (ref == null) {
continue;
}
switch (typeof ref) {
case "function": {
const cleanupCallback = cleanupCallbacks[i];
if (typeof cleanupCallback === "function") {
cleanupCallback();
} else {
ref(null);
}
break;
}
case "object": {
ref.current = null;
break;
}
default:
}
}
};
}
};
}
// node_modules/@base-ui/utils/getReactElementRef.mjs
var React8 = __toESM(require_react(), 1);
// node_modules/@base-ui/utils/reactVersion.mjs
var React7 = __toESM(require_react(), 1);
var majorVersion = parseInt(React7.version, 10);
function isReactVersionAtLeast(reactVersionToCheck) {
return majorVersion >= reactVersionToCheck;
}
// node_modules/@base-ui/utils/getReactElementRef.mjs
function getReactElementRef(element) {
if (!/* @__PURE__ */ React8.isValidElement(element)) {
return null;
}
const reactElement = element;
const propsWithRef = reactElement.props;
return (isReactVersionAtLeast(19) ? propsWithRef?.ref : reactElement.ref) ?? null;
}
// node_modules/@base-ui/utils/mergeObjects.mjs
function mergeObjects(a, b) {
if (a && !b) {
return a;
}
if (!a && b) {
return b;
}
if (a || b) {
return {
...a,
...b
};
}
return void 0;
}
// node_modules/@base-ui/react/internals/getStateAttributesProps.mjs
function getStateAttributesProps(state, customMapping) {
const props = {};
for (const key in state) {
const value = state[key];
if (customMapping?.hasOwnProperty(key)) {
const customProps = customMapping[key](value);
if (customProps != null) {
Object.assign(props, customProps);
}
continue;
}
if (value === true) {
props[`data-${key.toLowerCase()}`] = "";
} else if (value) {
props[`data-${key.toLowerCase()}`] = value.toString();
}
}
return props;
}
// node_modules/@base-ui/react/utils/resolveClassName.mjs
function resolveClassName(className, state) {
return typeof className === "function" ? className(state) : className;
}
// node_modules/@base-ui/react/utils/resolveStyle.mjs
function resolveStyle(style, state) {
return typeof style === "function" ? style(state) : style;
}
// node_modules/@base-ui/react/merge-props/mergeProps.mjs
var EMPTY_PROPS = {};
function mergeProps(a, b, c, d, e) {
if (!c && !d && !e && !a) {
return createInitialMergedProps(b);
}
let merged = createInitialMergedProps(a);
if (b) {
merged = mergeInto(merged, b);
}
if (c) {
merged = mergeInto(merged, c);
}
if (d) {
merged = mergeInto(merged, d);
}
if (e) {
merged = mergeInto(merged, e);
}
return merged;
}
function mergePropsN(props) {
if (props.length === 0) {
return EMPTY_PROPS;
}
if (props.length === 1) {
return createInitialMergedProps(props[0]);
}
let merged = createInitialMergedProps(props[0]);
for (let i = 1; i < props.length; i += 1) {
merged = mergeInto(merged, props[i]);
}
return merged;
}
function createInitialMergedProps(inputProps) {
if (isPropsGetter(inputProps)) {
return {
...resolvePropsGetter(inputProps, EMPTY_PROPS)
};
}
return copyInitialProps(inputProps);
}
function mergeInto(merged, inputProps) {
if (isPropsGetter(inputProps)) {
return resolvePropsGetter(inputProps, merged);
}
return mutablyMergeInto(merged, inputProps);
}
function copyInitialProps(inputProps) {
const copiedProps = {
...inputProps
};
for (const propName in copiedProps) {
const propValue = copiedProps[propName];
if (isEventHandler(propName, propValue)) {
copiedProps[propName] = wrapEventHandler(propValue);
}
}
return copiedProps;
}
function mutablyMergeInto(mergedProps, externalProps) {
if (!externalProps) {
return mergedProps;
}
for (const propName in externalProps) {
const externalPropValue = externalProps[propName];
switch (propName) {
case "style": {
mergedProps[propName] = mergeObjects(mergedProps.style, externalPropValue);
break;
}
case "className": {
mergedProps[propName] = mergeClassNames(mergedProps.className, externalPropValue);
break;
}
default: {
if (isEventHandler(propName, externalPropValue)) {
mergedProps[propName] = mergeEventHandlers(mergedProps[propName], externalPropValue);
} else {
mergedProps[propName] = externalPropValue;
}
}
}
}
return mergedProps;
}
function isEventHandler(key, value) {
const code0 = key.charCodeAt(0);
const code1 = key.charCodeAt(1);
const code2 = key.charCodeAt(2);
return code0 === 111 && code1 === 110 && code2 >= 65 && code2 <= 90 && (typeof value === "function" || typeof value === "undefined");
}
function isPropsGetter(inputProps) {
return typeof inputProps === "function";
}
function resolvePropsGetter(inputProps, previousProps) {
if (isPropsGetter(inputProps)) {
return inputProps(previousProps);
}
return inputProps ?? EMPTY_PROPS;
}
function mergeEventHandlers(ourHandler, theirHandler) {
if (!theirHandler) {
return ourHandler;
}
if (!ourHandler) {
return wrapEventHandler(theirHandler);
}
return (...args) => {
const event = args[0];
if (isSyntheticEvent(event)) {
const baseUIEvent = event;
makeEventPreventable(baseUIEvent);
const result2 = theirHandler(...args);
if (!baseUIEvent.baseUIHandlerPrevented) {
ourHandler?.(...args);
}
return result2;
}
const result = theirHandler(...args);
ourHandler?.(...args);
return result;
};
}
function wrapEventHandler(handler) {
if (!handler) {
return handler;
}
return (...args) => {
const event = args[0];
if (isSyntheticEvent(event)) {
makeEventPreventable(event);
}
return handler(...args);
};
}
function makeEventPreventable(event) {
event.preventBaseUIHandler = () => {
event.baseUIHandlerPrevented = true;
};
return event;
}
function mergeClassNames(ourClassName, theirClassName) {
if (theirClassName) {
if (ourClassName) {
return theirClassName + " " + ourClassName;
}
return theirClassName;
}
return ourClassName;
}
function isSyntheticEvent(event) {
return event != null && typeof event === "object" && "nativeEvent" in event;
}
// node_modules/@base-ui/react/internals/useRenderElement.mjs
var import_react = __toESM(require_react(), 1);
function useRenderElement(element, componentProps, params = {}) {
const renderProp = componentProps.render;
const outProps = useRenderElementProps(componentProps, params);
if (params.enabled === false) {
return null;
}
const state = params.state ?? EMPTY_OBJECT;
return evaluateRenderProp(element, renderProp, outProps, state);
}
function useRenderElementProps(componentProps, params = {}) {
const {
className: classNameProp,
style: styleProp,
render: renderProp
} = componentProps;
const {
state = EMPTY_OBJECT,
ref,
props,
stateAttributesMapping,
enabled = true
} = params;
const className = enabled ? resolveClassName(classNameProp, state) : void 0;
const style = enabled ? resolveStyle(styleProp, state) : void 0;
const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping) : EMPTY_OBJECT;
const resolvedProps = enabled && props ? resolveRenderFunctionProps(props) : void 0;
const outProps = enabled ? mergeObjects(stateProps, resolvedProps) ?? {} : EMPTY_OBJECT;
if (typeof document !== "undefined") {
if (!enabled) {
useMergedRefs(null, null);
} else if (Array.isArray(ref)) {
outProps.ref = useMergedRefsN([outProps.ref, getReactElementRef(renderProp), ...ref]);
} else {
outProps.ref = useMergedRefs(outProps.ref, getReactElementRef(renderProp), ref);
}
}
if (!enabled) {
return EMPTY_OBJECT;
}
if (className !== void 0) {
outProps.className = mergeClassNames(outProps.className, className);
}
if (style !== void 0) {
outProps.style = mergeObjects(outProps.style, style);
}
return outProps;
}
function resolveRenderFunctionProps(props) {
if (Array.isArray(props)) {
return mergePropsN(props);
}
return mergeProps(void 0, props);
}
var REACT_LAZY_TYPE = Symbol.for("react.lazy");
var COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
var LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
function evaluateRenderProp(element, render, props, state) {
if (render) {
if (typeof render === "function") {
if (true) {
warnIfRenderPropLooksLikeComponent(render);
}
return render(props, state);
}
const mergedProps = mergeProps(props, render.props);
mergedProps.ref = props.ref;
let newElement = render;
if (newElement?.$$typeof === REACT_LAZY_TYPE) {
const children = React9.Children.toArray(render);
newElement = children[0];
}
if (true) {
if (!/* @__PURE__ */ React9.isValidElement(newElement)) {
throw new Error(["Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.", "A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.", "https://base-ui.com/r/invalid-render-prop"].join("\n"));
}
}
return /* @__PURE__ */ React9.cloneElement(newElement, mergedProps);
}
if (element) {
if (typeof element === "string") {
return renderTag(element, props);
}
}
throw new Error(true ? "Base UI: Render element or function are not defined." : formatErrorMessage_default(8));
}
function warnIfRenderPropLooksLikeComponent(renderFn) {
const functionName = renderFn.name;
if (functionName.length === 0) {
return;
}
if (!COMPONENT_IDENTIFIER_PATTERN.test(functionName)) {
return;
}
if (!LOWERCASE_CHARACTER_PATTERN.test(functionName)) {
return;
}
warn(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, "This usually means a React component was passed directly as `render={Component}`.", "Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.", "If this is an intentional render callback, rename it to start with a lowercase letter.", "Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.", "https://base-ui.com/r/invalid-render-prop");
}
function renderTag(Tag, props) {
if (Tag === "button") {
return /* @__PURE__ */ (0, import_react.createElement)("button", {
type: "button",
...props,
key: props.key
});
}
if (Tag === "img") {
return /* @__PURE__ */ (0, import_react.createElement)("img", {
alt: "",
...props,
key: props.key
});
}
return /* @__PURE__ */ React9.createElement(Tag, props);
}
// node_modules/@base-ui/react/internals/clamp.mjs
function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
return Math.max(min, Math.min(val, max));
}
// node_modules/@base-ui/react/internals/areArraysEqual.mjs
function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
}
// node_modules/@base-ui/utils/platform/parts.mjs
var parts_exports = {};
__export(parts_exports, {
engine: () => engine_exports,
env: () => env_exports,
os: () => os_exports,
screenReader: () => screen_reader_exports
});
// node_modules/@base-ui/utils/platform/os.mjs
var os_exports = {};
__export(os_exports, {
android: () => android,
apple: () => apple,
ios: () => ios,
linux: () => linux,
mac: () => mac,
windows: () => windows
});
// node_modules/@base-ui/utils/platform/shared.mjs
function readRawData() {
if (typeof navigator === "undefined") {
return {
userAgent: "",
platform: "",
maxTouchPoints: 0
};
}
if (true) {
const uaData = navigator.userAgentData;
if (uaData && Array.isArray(uaData.brands)) {
return {
userAgent: uaData.brands.map(({
brand,
version: version2
}) => `${brand}/${version2}`).join(" "),
platform: uaData.platform ?? navigator.platform ?? "",
maxTouchPoints: navigator.maxTouchPoints ?? 0
};
}
}
return {
userAgent: navigator.userAgent,
platform: navigator.platform ?? "",
maxTouchPoints: navigator.maxTouchPoints ?? 0
};
}
var {
userAgent,
platform,
maxTouchPoints
} = readRawData();
var lowerUserAgent = userAgent.toLowerCase();
var lowerPlatform = platform.toLowerCase();
// node_modules/@base-ui/utils/platform/os.mjs
var ios = /^i(os$|p)/.test(lowerPlatform) || lowerPlatform === "macintel" && maxTouchPoints > 1;
var ANDROID_STRING = "android";
var android = lowerPlatform === ANDROID_STRING || lowerUserAgent.includes(ANDROID_STRING);
var mac = !ios && lowerPlatform.startsWith("mac");
var windows = lowerPlatform.startsWith("win");
var linux = !android && /^(linux|chrome os)/.test(lowerPlatform);
var apple = mac || ios;
// node_modules/@base-ui/utils/platform/engine.mjs
var engine_exports = {};
__export(engine_exports, {
blink: () => blink,
gecko: () => gecko,
webkit: () => webkit
});
var webkit = typeof CSS !== "undefined" && !!CSS.supports?.("-webkit-backdrop-filter:none");
var gecko = !webkit && lowerUserAgent.includes("firefox");
var blink = !webkit && lowerUserAgent.includes("chrom");
// node_modules/@base-ui/utils/platform/screen-reader.mjs
var screen_reader_exports = {};
__export(screen_reader_exports, {
voiceOver: () => voiceOver
});
var voiceOver = apple;
// node_modules/@base-ui/utils/platform/env.mjs
var env_exports = {};
__export(env_exports, {
jsdom: () => jsdom
});
var jsdom = /jsdom|happydom/.test(lowerUserAgent);
// node_modules/@base-ui/react/internals/shadowDom.mjs
function activeElement(doc) {
let element = doc.activeElement;
while (element?.shadowRoot?.activeElement != null) {
element = element.shadowRoot.activeElement;
}
return element;
}
function contains(parent, child) {
if (!parent || !child) {
return false;
}
const rootNode = child.getRootNode?.();
if (parent.contains(child)) {
return true;
}
if (rootNode && isShadowRoot(rootNode)) {
let next = child;
while (next) {
if (parent === next) {
return true;
}
next = next.parentNode || next.host;
}
}
return false;
}
function getTarget(event) {
if ("composedPath" in event) {
return event.composedPath()[0];
}
return event.target;
}
// node_modules/@base-ui/react/floating-ui-react/utils/element.mjs
function matchesFocusVisible(element) {
if (!element || parts_exports.env.jsdom) {
return true;
}
try {
return element.matches(":focus-visible");
} catch (_e) {
return true;
}
}
// node_modules/@base-ui/react/internals/composite/list/CompositeList.mjs
var React11 = __toESM(require_react(), 1);
// node_modules/@base-ui/react/internals/composite/list/CompositeListContext.mjs
var React10 = __toESM(require_react(), 1);
var CompositeListContext = /* @__PURE__ */ React10.createContext({
register: () => {
},
unregister: () => {
},
subscribeMapChange: () => {
return () => {
};
},
elementsRef: {
current: []
},
nextIndexRef: {
current: 0
}
});
if (true) CompositeListContext.displayName = "CompositeListContext";
function useCompositeListContext() {
return React10.useContext(CompositeListContext);
}
// node_modules/@base-ui/react/internals/composite/list/CompositeList.mjs
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
function CompositeList(props) {
const {
children,
elementsRef,
labelsRef,
onMapChange: onMapChangeProp
} = props;
const onMapChange = useStableCallback(onMapChangeProp);
const nextIndexRef = React11.useRef(0);
const listeners = useRefWithInit(createListeners).current;
const map = useRefWithInit(createMap).current;
const [mapTick, setMapTick] = React11.useState(0);
const lastTickRef = React11.useRef(mapTick);
const register = useStableCallback((node, metadata) => {
map.set(node, metadata ?? null);
lastTickRef.current += 1;
setMapTick(lastTickRef.current);
});
const unregister = useStableCallback((node) => {
map.delete(node);
lastTickRef.current += 1;
setMapTick(lastTickRef.current);
});
const sortedMap = React11.useMemo(() => {
disableEslintWarning(mapTick);
const newMap = /* @__PURE__ */ new Map();
const sortedNodes = Array.from(map.keys()).filter((node) => node.isConnected).sort(sortByDocumentPosition);
sortedNodes.forEach((node, index) => {
const metadata = map.get(node) ?? {};
newMap.set(node, {
...metadata,
index
});
});
return newMap;
}, [map, mapTick]);
useIsoLayoutEffect(() => {
if (typeof MutationObserver !== "function" || sortedMap.size === 0) {
return void 0;
}
const mutationObserver = new MutationObserver((entries) => {
const diff = /* @__PURE__ */ new Set();
const updateDiff = (node) => diff.has(node) ? diff.delete(node) : diff.add(node);
entries.forEach((entry) => {
entry.removedNodes.forEach(updateDiff);
entry.addedNodes.forEach(updateDiff);
});
if (diff.size === 0) {
lastTickRef.current += 1;
setMapTick(lastTickRef.current);
}
});
sortedMap.forEach((_, node) => {
if (node.parentElement) {
mutationObserver.observe(node.parentElement, {
childList: true
});
}
});
return () => {
mutationObserver.disconnect();
};
}, [sortedMap]);
useIsoLayoutEffect(() => {
const shouldUpdateLengths = lastTickRef.current === mapTick;
if (shouldUpdateLengths) {
if (elementsRef.current.length !== sortedMap.size) {
elementsRef.current.length = sortedMap.size;
}
if (labelsRef && labelsRef.current.length !== sortedMap.size) {
labelsRef.current.length = sortedMap.size;
}
nextIndexRef.current = sortedMap.size;
}
onMapChange(sortedMap);
}, [onMapChange, sortedMap, elementsRef, labelsRef, mapTick]);
useIsoLayoutEffect(() => {
return () => {
elementsRef.current = [];
};
}, [elementsRef]);
useIsoLayoutEffect(() => {
return () => {
if (labelsRef) {
labelsRef.current = [];
}
};
}, [labelsRef]);
const subscribeMapChange = useStableCallback((fn) => {
listeners.add(fn);
return () => {
listeners.delete(fn);
};
});
useIsoLayoutEffect(() => {
listeners.forEach((l) => l(sortedMap));
}, [listeners, sortedMap]);
const contextValue = React11.useMemo(() => ({
register,
unregister,
subscribeMapChange,
elementsRef,
labelsRef,
nextIndexRef
}), [register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CompositeListContext.Provider, {
value: contextValue,
children
});
}
function createMap() {
return /* @__PURE__ */ new Map();
}
function createListeners() {
return /* @__PURE__ */ new Set();
}
function sortByDocumentPosition(a, b) {
const position = a.compareDocumentPosition(b);
if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
return -1;
}
if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
return 1;
}
return 0;
}
function disableEslintWarning(_) {
}
// node_modules/@base-ui/react/internals/field-root-context/FieldRootContext.mjs
var React12 = __toESM(require_react(), 1);
// node_modules/@base-ui/react/field/control/FieldControlDataAttributes.mjs
var FieldControlDataAttributes = /* @__PURE__ */ function(FieldControlDataAttributes2) {
FieldControlDataAttributes2["disabled"] = "data-disabled";
FieldControlDataAttributes2["valid"] = "data-valid";
FieldControlDataAttributes2["invalid"] = "data-invalid";
FieldControlDataAttributes2["touched"] = "data-touched";
FieldControlDataAttributes2["dirty"] = "data-dirty";
FieldControlDataAttributes2["filled"] = "data-filled";
FieldControlDataAttributes2["focused"] = "data-focused";
return FieldControlDataAttributes2;
}({});
// node_modules/@base-ui/react/internals/field-constants/constants.mjs
var DEFAULT_VALIDITY_STATE = {
badInput: false,
customError: false,
patternMismatch: false,
rangeOverflow: false,
rangeUnderflow: false,
stepMismatch: false,
tooLong: false,
tooShort: false,
typeMismatch: false,
valid: null,
valueMissing: false
};
var DEFAULT_FIELD_STATE_ATTRIBUTES = {
valid: null,
touched: false,
dirty: false,
filled: false,
focused: false
};
var DEFAULT_FIELD_ROOT_STATE = {
disabled: false,
...DEFAULT_FIELD_STATE_ATTRIBUTES
};
var fieldValidityMapping = {
valid(value) {
if (value === null) {
return null;
}
if (value) {
return {
[FieldControlDataAttributes.valid]: ""
};
}
return {
[FieldControlDataAttributes.invalid]: ""
};
}
};
// node_modules/@base-ui/react/internals/field-root-context/FieldRootContext.mjs
var DEFAULT_FIELD_ROOT_CONTEXT = {
invalid: void 0,
name: void 0,
validityData: {
state: DEFAULT_VALIDITY_STATE,
errors: [],
error: "",
value: "",
initialValue: null
},
setValidityData: NOOP,
disabled: void 0,
touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
setTouched: NOOP,
dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
setDirty: NOOP,
filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
setFilled: NOOP,
focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
setFocused: NOOP,
validate: () => null,
validationMode: "onSubmit",
validationDebounceTime: 0,
shouldValidateOnChange: () => false,
state: DEFAULT_FIELD_ROOT_STATE,
markedDirtyRef: {
current: false
},
registerFieldControl: NOOP,
validation: {
getValidationProps: (_disabled, props = EMPTY_OBJECT) => props,
inputRef: {
current: null
},
registerInput: NOOP,
commit: async () => {
},
change: NOOP
}
};
var FieldRootContext = /* @__PURE__ */ React12.createContext(DEFAULT_FIELD_ROOT_CONTEXT);
if (true) FieldRootContext.displayName = "FieldRootContext";
function useFieldRootContext(optional = true) {
const context = React12.useContext(FieldRootContext);
if (context.setValidityData === NOOP && !optional) {
throw new Error(true ? "Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>." : formatErrorMessage_default(28));
}
return context;
}
// node_modules/@base-ui/react/internals/field-register-control/useRegisterFieldControl.mjs
var React13 = __toESM(require_react(), 1);
function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, enabled = true, name) {
const {
registerFieldControl
} = useFieldRootContext();
const sourceRef = React13.useRef(null);
if (!sourceRef.current) {
sourceRef.current = Symbol();
}
useIsoLayoutEffect(() => {
const source = sourceRef.current;
if (!source || !enabled) {
return void 0;
}
const registration = {
controlRef,
getValue: getFormValueOverride,
id,
name,
value
};
registerFieldControl(source, registration);
return () => {
registerFieldControl(source, void 0);
};
}, [controlRef, enabled, getFormValueOverride, id, name, registerFieldControl, value]);
}
// node_modules/@base-ui/react/internals/form-context/FormContext.mjs
var React14 = __toESM(require_react(), 1);
var FormContext = /* @__PURE__ */ React14.createContext({
formRef: {
current: {
fields: /* @__PURE__ */ new Map()
}
},
errors: {},
clearErrors: NOOP,
validationMode: "onSubmit",
submitAttemptedRef: {
current: false
}
});
if (true) FormContext.displayName = "FormContext";
function useFormContext() {
return React14.useContext(FormContext);
}
// node_modules/@base-ui/react/internals/labelable-provider/LabelableContext.mjs
var React15 = __toESM(require_react(), 1);
var LabelableContext = /* @__PURE__ */ React15.createContext({
controlId: void 0,
registerControlId: NOOP,
labelId: void 0,
setLabelId: NOOP,
messageIds: [],
setMessageIds: NOOP,
getDescriptionProps: (externalProps) => externalProps
});
if (true) LabelableContext.displayName = "LabelableContext";
function useLabelableContext() {
return React15.useContext(LabelableContext);
}
// node_modules/@base-ui/react/utils/resolveAriaLabelledBy.mjs
function getDefaultLabelId(id) {
return id == null ? void 0 : `${id}-label`;
}
function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
return fieldLabelId ?? localLabelId;
}
// node_modules/@base-ui/react/slider/utils/asc.mjs
function asc(a, b) {
return a - b;
}
// node_modules/@base-ui/react/slider/utils/replaceArrayItemAtIndex.mjs
function replaceArrayItemAtIndex(array, index, newValue) {
const output = array.slice();
output[index] = newValue;
return output.sort(asc);
}
// node_modules/@base-ui/react/slider/utils/getSliderValue.mjs
function getSliderValue(valueInput, index, min, max, range, values) {
let newValue = valueInput;
newValue = clamp(newValue, min, max);
if (range) {
newValue = replaceArrayItemAtIndex(
values,
index,
// Bound the new value to the thumb's neighbours.
clamp(newValue, values[index - 1] ?? -Infinity, values[index + 1] ?? Infinity)
);
}
return newValue;
}
// node_modules/@base-ui/react/slider/utils/validateMinimumDistance.mjs
function validateMinimumDistance(values, step, minStepsBetweenValues) {
if (!Array.isArray(values)) {
return true;
}
const distances = values.reduce((acc, val, index, vals) => {
if (index === vals.length - 1) {
return acc;
}
acc.push(Math.abs(val - vals[index + 1]));
return acc;
}, []);
return Math.min(...distances) >= step * minStepsBetweenValues;
}
// node_modules/@base-ui/react/slider/root/stateAttributesMapping.mjs
var sliderStateAttributesMapping = {
activeThumbIndex: () => null,
max: () => null,
min: () => null,
minStepsBetweenValues: () => null,
step: () => null,
values: () => null,
...fieldValidityMapping
};
// node_modules/@base-ui/react/slider/root/SliderRootContext.mjs
var React16 = __toESM(require_react(), 1);
var SliderRootContext = /* @__PURE__ */ React16.createContext(void 0);
if (true) SliderRootContext.displayName = "SliderRootContext";
function useSliderRootContext() {
const context = React16.useContext(SliderRootContext);
if (context === void 0) {
throw new Error(true ? "Base UI: SliderRootContext is missing. Slider parts must be placed within <Slider.Root>." : formatErrorMessage_default(62));
}
return context;
}
// node_modules/@base-ui/react/slider/root/SliderRoot.mjs
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
function getSliderChangeEventReason(event) {
return "key" in event ? reason_parts_exports.keyboard : reason_parts_exports.inputChange;
}
function areValuesEqual(newValue, oldValue) {
if (typeof newValue === "number" && typeof oldValue === "number") {
return newValue === oldValue;
}
if (Array.isArray(newValue) && Array.isArray(oldValue)) {
return areArraysEqual(newValue, oldValue);
}
return false;
}
var SliderRoot = /* @__PURE__ */ React17.forwardRef(function SliderRoot2(componentProps, forwardedRef) {
const {
"aria-labelledby": ariaLabelledByProp,
className,
defaultValue,
disabled: disabledProp = false,
id: idProp,
format,
largeStep = 10,
locale,
render,
max = 100,
min = 0,
minStepsBetweenValues = 0,
form,
name: nameProp,
onValueChange: onValueChangeProp,
onValueCommitted: onValueCommittedProp,
orientation = "horizontal",
step = 1,
thumbCollisionBehavior = "push",
thumbAlignment = "center",
value: valueProp,
style,
...elementProps
} = componentProps;
const id = useBaseUiId(idProp);
const defaultLabelId = getDefaultLabelId(id);
const onValueChange = useStableCallback(onValueChangeProp);
const onValueCommitted = useStableCallback(onValueCommittedProp);
const {
clearErrors
} = useFormContext();
const {
state: fieldState,
disabled: fieldDisabled,
name: fieldName,
setTouched,
setDirty,
validityData,
validation
} = useFieldRootContext();
const {
labelId: fieldLabelId
} = useLabelableContext();
const [labelId, setLabelId] = React17.useState();
const ariaLabelledby = ariaLabelledByProp ?? resolveAriaLabelledBy(fieldLabelId, labelId);
const disabled2 = fieldDisabled || disabledProp;
const name = fieldName ?? nameProp;
const [valueUnwrapped, setValueUnwrapped] = useControlled({
controlled: valueProp,
default: defaultValue ?? min,
name: "Slider"
});
const sliderRef = React17.useRef(null);
const controlRef = React17.useRef(null);
const thumbRefs = React17.useRef([]);
const pressedInputRef = React17.useRef(null);
const pressedThumbCenterOffsetRef = React17.useRef(null);
const pressedThumbIndexRef = React17.useRef(-1);
const pressedValuesRef = React17.useRef(null);
const lastChangeReasonRef = React17.useRef("none");
const formatOptionsRef = useValueAsRef(format);
const [active, setActiveState] = React17.useState(-1);
const [lastUsedThumbIndex, setLastUsedThumbIndex] = React17.useState(-1);
const [dragging, setDragging] = React17.useState(false);
const [thumbMap, setThumbMap] = React17.useState(() => /* @__PURE__ */ new Map());
const [indicatorPosition, setIndicatorPosition] = React17.useState([void 0, void 0]);
const setActive = useStableCallback((value) => {
setActiveState(value);
if (value !== -1) {
setLastUsedThumbIndex(value);
}
});
useRegisterFieldControl(validation.inputRef, id, valueUnwrapped, void 0, !disabled2, nameProp);
useValueChanged(valueUnwrapped, () => {
clearErrors(name);
validation.change(valueUnwrapped);
const initialValue = validityData.initialValue;
let isDirty;
if (Array.isArray(valueUnwrapped) && Array.isArray(initialValue)) {
isDirty = !areArraysEqual(valueUnwrapped, initialValue);
} else {
isDirty = valueUnwrapped !== initialValue;
}
setDirty(isDirty);
});
const registerFieldControlRef = useStableCallback((element2) => {
if (element2) {
controlRef.current = element2;
}
});
const range = Array.isArray(valueUnwrapped);
const values = React17.useMemo(() => {
if (!range) {
return [clamp(valueUnwrapped, min, max)];
}
return valueUnwrapped.slice().sort(asc);
}, [max, min, range, valueUnwrapped]);
const setValue = useStableCallback((newValue, details) => {
if (Number.isNaN(newValue) || areValuesEqual(newValue, valueUnwrapped)) {
return false;
}
const changeDetails = details ?? createChangeEventDetails(reason_parts_exports.none, void 0, void 0, {
activeThumbIndex: -1
});
const nativeEvent = changeDetails.event;
const EventConstructor = nativeEvent.constructor ?? Event;
const clonedEvent = new EventConstructor(nativeEvent.type, nativeEvent);
Object.defineProperty(clonedEvent, "target", {
writable: true,
value: {
value: newValue,
name
}
});
changeDetails.event = clonedEvent;
onValueChange(newValue, changeDetails);
if (changeDetails.isCanceled) {
return false;
}
lastChangeReasonRef.current = changeDetails.reason;
setValueUnwrapped(newValue);
return true;
});
const handleInputChange = useStableCallback((valueInput, index, event) => {
const newValue = getSliderValue(valueInput, index, min, max, range, values);
if (validateMinimumDistance(newValue, step, minStepsBetweenValues)) {
const reason = getSliderChangeEventReason(event);
const applied = setValue(newValue, createChangeEventDetails(reason, event.nativeEvent, void 0, {
activeThumbIndex: index
}));
setTouched(true);
if (applied) {
onValueCommitted(newValue, createGenericEventDetails(reason, event.nativeEvent));
}
}
});
if (true) {
if (min >= max) {
warn("Slider `max` must be greater than `min`.");
}
}
useIsoLayoutEffect(() => {
const activeEl = activeElement(ownerDocument(sliderRef.current));
if (disabled2 && contains(sliderRef.current, activeEl)) {
activeEl.blur();
}
}, [disabled2]);
if (disabled2 && active !== -1) {
setActive(-1);
}
const state = React17.useMemo(() => ({
...fieldState,
activeThumbIndex: active,
disabled: disabled2,
dragging,
orientation,
max,
min,
minStepsBetweenValues,
step,
values
}), [fieldState, active, disabled2, dragging, max, min, minStepsBetweenValues, orientation, step, values]);
const contextValue = React17.useMemo(() => ({
active,
controlRef,
disabled: disabled2,
dragging,
validation,
formatOptionsRef,
handleInputChange,
indicatorPosition,
inset: thumbAlignment !== "center",
labelId: ariaLabelledby,
rootLabelId: defaultLabelId,
largeStep,
lastUsedThumbIndex,
lastChangeReasonRef,
form,
locale,
max,
min,
minStepsBetweenValues,
name,
onValueCommitted,
orientation,
pressedInputRef,
pressedThumbCenterOffsetRef,
pressedThumbIndexRef,
pressedValuesRef,
registerFieldControlRef,
renderBeforeHydration: thumbAlignment === "edge",
setActive,
setDragging,
setIndicatorPosition,
setLabelId,
setValue,
state,
step,
thumbCollisionBehavior,
thumbMap,
thumbRefs,
values
}), [active, controlRef, ariaLabelledby, defaultLabelId, disabled2, dragging, validation, formatOptionsRef, handleInputChange, indicatorPosition, largeStep, lastUsedThumbIndex, lastChangeReasonRef, form, locale, max, min, minStepsBetweenValues, name, onValueCommitted, orientation, pressedInputRef, pressedThumbCenterOffsetRef, pressedThumbIndexRef, pressedValuesRef, registerFieldControlRef, setActive, setDragging, setIndicatorPosition, setLabelId, setValue, state, step, thumbCollisionBehavior, thumbAlignment, thumbMap, thumbRefs, values]);
const element = useRenderElement("div", componentProps, {
state,
ref: [forwardedRef, sliderRef],
props: [{
"aria-labelledby": ariaLabelledby,
id,
role: "group"
}, elementProps, (props) => validation.getValidationProps(disabled2, props)],
stateAttributesMapping: sliderStateAttributesMapping
});
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SliderRootContext.Provider, {
value: contextValue,
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CompositeList, {
elementsRef: thumbRefs,
onMapChange: setThumbMap,
children: element
})
});
});
if (true) SliderRoot.displayName = "SliderRoot";
// node_modules/@base-ui/react/slider/label/SliderLabel.mjs
var React18 = __toESM(require_react(), 1);
// node_modules/@base-ui/react/utils/useRegisteredLabelId.mjs
function useRegisteredLabelId(idProp, setLabelId) {
const id = useBaseUiId(idProp);
useIsoLayoutEffect(() => {
setLabelId(id);
return () => {
setLabelId(void 0);
};
}, [id, setLabelId]);
return id;
}
// node_modules/@base-ui/react/internals/labelable-provider/useLabel.mjs
function useLabel(params = {}) {
const {
id: idProp,
fallbackControlId,
native = false,
setLabelId: setLabelIdProp,
focusControl: focusControlProp
} = params;
const {
controlId: contextControlId,
setLabelId: setContextLabelId
} = useLabelableContext();
const syncLabelId = useStableCallback((nextLabelId) => {
setContextLabelId(nextLabelId);
setLabelIdProp?.(nextLabelId);
});
const id = useRegisteredLabelId(idProp, syncLabelId);
const resolvedControlId = contextControlId ?? fallbackControlId;
function focusControl(event) {
if (focusControlProp) {
focusControlProp(event, resolvedControlId);
return;
}
if (!resolvedControlId) {
return;
}
const controlElement = ownerDocument(event.currentTarget).getElementById(resolvedControlId);
if (isHTMLElement(controlElement)) {
focusElementWithVisible(controlElement);
}
}
function handleInteraction(event) {
const target = getTarget(event.nativeEvent);
if (target?.closest("button,input,select,textarea")) {
return;
}
if (!event.defaultPrevented && event.detail > 1) {
event.preventDefault();
}
if (native) {
return;
}
focusControl(event);
}
return native ? {
id,
htmlFor: resolvedControlId ?? void 0,
onMouseDown: handleInteraction
} : {
id,
onClick: handleInteraction,
onPointerDown(event) {
event.preventDefault();
}
};
}
function focusElementWithVisible(element) {
element.focus({
// Available from Chrome 144+ (January 2026).
// Safari and Firefox already support it.
focusVisible: true
});
}
// node_modules/@base-ui/react/slider/label/SliderLabel.mjs
var SliderLabel = /* @__PURE__ */ React18.forwardRef(function SliderLabel2(componentProps, forwardedRef) {
const {
render,
className,
style,
...elementProps
} = componentProps;
const elementPropsWithoutId = elementProps;
delete elementPropsWithoutId.id;
const {
state,
setLabelId,
controlRef,
rootLabelId
} = useSliderRootContext();
function focusControl(event, controlId) {
if (controlId) {
const controlElement = ownerDocument(event.currentTarget).getElementById(controlId);
if (isHTMLElement(controlElement)) {
focusElementWithVisible(controlElement);
return;
}
}
const fallbackInputs = controlRef.current?.querySelectorAll('input[type="range"]');
const fallbackInput = fallbackInputs?.length === 1 ? fallbackInputs[0] : null;
if (isHTMLElement(fallbackInput)) {
focusElementWithVisible(fallbackInput);
}
}
const labelProps = useLabel({
id: rootLabelId,
setLabelId,
focusControl
});
return useRenderElement("div", componentProps, {
ref: forwardedRef,
state,
props: [labelProps, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
});
if (true) SliderLabel.displayName = "SliderLabel";
// node_modules/@base-ui/react/slider/value/SliderValue.mjs
var React19 = __toESM(require_react(), 1);
// node_modules/@base-ui/react/utils/stringifyLocale.mjs
function stringifyLocale(locale) {
if (Array.isArray(locale)) {
return locale.map((value) => stringifyLocale(value)).join(",");
}
if (locale == null) {
return "";
}
return String(locale);
}
// node_modules/@base-ui/react/utils/formatNumber.mjs
var cache = /* @__PURE__ */ new Map();
function getFormatter(locale, options) {
const optionsString = JSON.stringify({
locale: stringifyLocale(locale),
options
});
const cachedFormatter = cache.get(optionsString);
if (cachedFormatter) {
return cachedFormatter;
}
const formatter = new Intl.NumberFormat(locale, options);
cache.set(optionsString, formatter);
return formatter;
}
function formatNumber(value, locale, options) {
if (value == null) {
return "";
}
return getFormatter(locale, options).format(value);
}
// node_modules/@base-ui/react/slider/value/SliderValue.mjs
var SliderValue = /* @__PURE__ */ React19.forwardRef(function SliderValue2(componentProps, forwardedRef) {
const {
"aria-live": ariaLive = "off",
render,
className,
children,
style,
...elementProps
} = componentProps;
const {
thumbMap,
state,
values,
formatOptionsRef,
locale
} = useSliderRootContext();
let htmlFor = "";
for (const thumbMetadata of thumbMap.values()) {
if (thumbMetadata?.inputId) {
htmlFor += `${thumbMetadata.inputId} `;
}
}
const outputFor = htmlFor.trim() === "" ? void 0 : htmlFor.trim();
const formattedValues = React19.useMemo(() => {
const arr = [];
for (let i = 0; i < values.length; i += 1) {
arr.push(formatNumber(values[i], locale, formatOptionsRef.current ?? void 0));
}
return arr;
}, [formatOptionsRef, locale, values]);
const defaultDisplayValue = values.map((v, i) => formattedValues[i] || v).join(" \u2013 ");
const element = useRenderElement("output", componentProps, {
state,
ref: forwardedRef,
props: [{
// off by default because it will keep announcing when the slider is being dragged
// and also when the value is changing (but not yet committed)
"aria-live": ariaLive,
children: typeof children === "function" ? children(formattedValues, values) : defaultDisplayValue,
htmlFor: outputFor
}, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
return element;
});
if (true) SliderValue.displayName = "SliderValue";
// node_modules/@base-ui/react/slider/control/SliderControl.mjs
var React22 = __toESM(require_react(), 1);
// node_modules/@base-ui/utils/addEventListener.mjs
function addEventListener(target, type, listener, options) {
target.addEventListener(type, listener, options);
return () => {
target.removeEventListener(type, listener, options);
};
}
// node_modules/@base-ui/utils/useOnMount.mjs
var React20 = __toESM(require_react(), 1);
var EMPTY = [];
function useOnMount(fn) {
React20.useEffect(fn, EMPTY);
}
// node_modules/@base-ui/utils/useAnimationFrame.mjs
var EMPTY2 = null;
var LAST_RAF = globalThis.requestAnimationFrame;
var Scheduler = class {
constructor() {
/* This implementation uses an array as a backing data-structure for frame callbacks.
* It allows `O(1)` callback cancelling by inserting a `null` in the array, though it
* never calls the native `cancelAnimationFrame` if there are no frames left. This can
* be much more efficient if there is a call pattern that alterns as
* "request-cancel-request-cancel-…".
* But in the case of "request-request-…-cancel-cancel-…", it leaves the final animation
* frame to run anyway. We turn that frame into a `O(1)` no-op via `callbacksCount`. */
__publicField(this, "callbacks", []);
__publicField(this, "callbacksCount", 0);
__publicField(this, "nextId", 1);
__publicField(this, "startId", 1);
__publicField(this, "isScheduled", false);
__publicField(this, "tick", (timestamp) => {
this.isScheduled = false;
const currentCallbacks = this.callbacks;
const currentCallbacksCount = this.callbacksCount;
this.callbacks = [];
this.callbacksCount = 0;
this.startId = this.nextId;
if (currentCallbacksCount > 0) {
for (let i = 0; i < currentCallbacks.length; i += 1) {
currentCallbacks[i]?.(timestamp);
}
}
});
}
request(fn) {
const id = this.nextId;
this.nextId += 1;
this.callbacks.push(fn);
this.callbacksCount += 1;
const didRAFChange = LAST_RAF !== requestAnimationFrame && (LAST_RAF = requestAnimationFrame, true);
if (!this.isScheduled || didRAFChange) {
requestAnimationFrame(this.tick);
this.isScheduled = true;
}
return id;
}
cancel(id) {
const index = id - this.startId;
if (index < 0 || index >= this.callbacks.length) {
return;
}
this.callbacks[index] = null;
this.callbacksCount -= 1;
}
};
var scheduler = new Scheduler();
var AnimationFrame = class _AnimationFrame {
constructor() {
__publicField(this, "currentId", EMPTY2);
__publicField(this, "cancel", () => {
if (this.currentId !== EMPTY2) {
scheduler.cancel(this.currentId);
this.currentId = EMPTY2;
}
});
__publicField(this, "disposeEffect", () => {
return this.cancel;
});
}
static create() {
return new _AnimationFrame();
}
static request(fn) {
return scheduler.request(fn);
}
static cancel(id) {
return scheduler.cancel(id);
}
/**
* Executes `fn` after `delay`, clearing any previously scheduled call.
*/
request(fn) {
this.cancel();
this.currentId = scheduler.request(() => {
this.currentId = EMPTY2;
fn();
});
}
};
function useAnimationFrame() {
const timeout = useRefWithInit(AnimationFrame.create).current;
useOnMount(timeout.disposeEffect);
return timeout;
}
// node_modules/@base-ui/react/internals/direction-context/DirectionContext.mjs
var React21 = __toESM(require_react(), 1);
var DirectionContext = /* @__PURE__ */ React21.createContext(void 0);
if (true) DirectionContext.displayName = "DirectionContext";
function useDirection() {
const context = React21.useContext(DirectionContext);
return context?.direction ?? "ltr";
}
// node_modules/@base-ui/react/slider/utils/getMidpoint.mjs
function getMidpoint(element) {
const rect = element.getBoundingClientRect();
return {
x: (rect.left + rect.right) / 2,
y: (rect.top + rect.bottom) / 2
};
}
// node_modules/@base-ui/react/slider/utils/roundValueToStep.mjs
function getDecimalPrecision(num) {
if (num === 0) {
return 0;
}
if (Math.abs(num) < 1) {
const parts = num.toExponential().split("e-");
const matissaDecimalPart = parts[0].split(".")[1];
return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
}
const decimalPart = num.toString().split(".")[1];
return decimalPart ? decimalPart.length : 0;
}
function roundValueToStep(value, step, min) {
const nearest = Math.round((value - min) / step) * step + min;
return Number(nearest.toFixed(Math.max(getDecimalPrecision(step), getDecimalPrecision(min))));
}
// node_modules/@base-ui/react/slider/utils/getPushedThumbValues.mjs
function getPushedThumbValues({
values,
index,
nextValue,
min,
max,
step,
minStepsBetweenValues,
initialValues
}) {
if (values.length === 0) {
return [];
}
const nextValues = values.slice();
const minValueDifference = step * minStepsBetweenValues;
const lastIndex = nextValues.length - 1;
const baseInitialValues = initialValues ?? values;
const indexMin = min + index * minValueDifference;
const indexMax = max - (lastIndex - index) * minValueDifference;
nextValues[index] = clamp(nextValue, indexMin, indexMax);
for (let i = index + 1; i <= lastIndex; i += 1) {
const minAllowed = nextValues[i - 1] + minValueDifference;
const maxAllowed = max - (lastIndex - i) * minValueDifference;
const initialValue = baseInitialValues[i] ?? nextValues[i];
let candidate = Math.max(nextValues[i], minAllowed);
if (initialValue < candidate) {
candidate = Math.max(initialValue, minAllowed);
}
nextValues[i] = clamp(candidate, minAllowed, maxAllowed);
}
for (let i = index - 1; i >= 0; i -= 1) {
const maxAllowed = nextValues[i + 1] - minValueDifference;
const minAllowed = min + i * minValueDifference;
const initialValue = baseInitialValues[i] ?? nextValues[i];
let candidate = Math.min(nextValues[i], maxAllowed);
if (initialValue > candidate) {
candidate = Math.min(initialValue, maxAllowed);
}
nextValues[i] = clamp(candidate, minAllowed, maxAllowed);
}
for (let i = 0; i <= lastIndex; i += 1) {
nextValues[i] = Number(nextValues[i].toFixed(12));
}
return nextValues;
}
// node_modules/@base-ui/react/slider/utils/resolveThumbCollision.mjs
function resolveThumbCollision({
behavior,
values,
currentValues,
initialValues,
pressedIndex,
nextValue,
min,
max,
step,
minStepsBetweenValues
}) {
const activeValues = currentValues ?? values;
const baselineValues = initialValues ?? values;
const range = activeValues.length > 1;
if (!range) {
return {
value: nextValue,
thumbIndex: 0,
didSwap: false
};
}
const minValueDifference = step * minStepsBetweenValues;
switch (behavior) {
case "swap": {
const pressedInitialValue = activeValues[pressedIndex];
const epsilon = 1e-7;
const candidateValues = activeValues.slice();
const previousNeighbor = candidateValues[pressedIndex - 1];
const nextNeighbor = candidateValues[pressedIndex + 1];
const lowerBound = previousNeighbor != null ? previousNeighbor + minValueDifference : min;
const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max;
const constrainedValue = clamp(nextValue, lowerBound, upperBound);
const pressedValueAfterClamp = Number(constrainedValue.toFixed(12));
candidateValues[pressedIndex] = pressedValueAfterClamp;
const movingForward = nextValue > pressedInitialValue;
const movingBackward = nextValue < pressedInitialValue;
const shouldSwapForward = movingForward && nextNeighbor != null && nextValue >= nextNeighbor - epsilon;
const shouldSwapBackward = movingBackward && previousNeighbor != null && nextValue <= previousNeighbor + epsilon;
if (!shouldSwapForward && !shouldSwapBackward) {
return {
value: candidateValues,
thumbIndex: pressedIndex,
didSwap: false
};
}
const targetIndex = shouldSwapForward ? pressedIndex + 1 : pressedIndex - 1;
const initialValuesForPush = candidateValues.map((_, index) => {
if (index === pressedIndex) {
return pressedValueAfterClamp;
}
const baseline = baselineValues[index];
if (baseline != null) {
return baseline;
}
return activeValues[index];
});
let nextValueForTarget = nextValue;
if (shouldSwapForward) {
nextValueForTarget = Math.max(nextValue, candidateValues[targetIndex]);
} else {
nextValueForTarget = Math.min(nextValue, candidateValues[targetIndex]);
}
const adjustedValues = getPushedThumbValues({
values: candidateValues,
index: targetIndex,
nextValue: nextValueForTarget,
min,
max,
step,
minStepsBetweenValues,
initialValues: initialValuesForPush
});
const neighborIndex = shouldSwapForward ? targetIndex - 1 : targetIndex + 1;
if (neighborIndex >= 0 && neighborIndex < adjustedValues.length) {
const previousValue = adjustedValues[neighborIndex - 1];
const nextValueAfter = adjustedValues[neighborIndex + 1];
let neighborLowerBound = previousValue != null ? previousValue + minValueDifference : min;
neighborLowerBound = Math.max(neighborLowerBound, min + neighborIndex * minValueDifference);
let neighborUpperBound = nextValueAfter != null ? nextValueAfter - minValueDifference : max;
neighborUpperBound = Math.min(neighborUpperBound, max - (adjustedValues.length - 1 - neighborIndex) * minValueDifference);
const restoredValue = clamp(pressedValueAfterClamp, neighborLowerBound, neighborUpperBound);
adjustedValues[neighborIndex] = Number(restoredValue.toFixed(12));
}
return {
value: adjustedValues,
thumbIndex: targetIndex,
didSwap: true
};
}
case "push": {
const nextValues = getPushedThumbValues({
values: activeValues,
index: pressedIndex,
nextValue,
min,
max,
step,
minStepsBetweenValues
});
return {
value: nextValues,
thumbIndex: pressedIndex,
didSwap: false
};
}
case "none":
default: {
const candidateValues = activeValues.slice();
const previousNeighbor = candidateValues[pressedIndex - 1];
const nextNeighbor = candidateValues[pressedIndex + 1];
const lowerBound = previousNeighbor != null ? previousNeighbor + minValueDifference : min;
const upperBound = nextNeighbor != null ? nextNeighbor - minValueDifference : max;
const constrainedValue = clamp(nextValue, lowerBound, upperBound);
candidateValues[pressedIndex] = Number(constrainedValue.toFixed(12));
return {
value: candidateValues,
thumbIndex: pressedIndex,
didSwap: false
};
}
}
}
// node_modules/@base-ui/react/slider/control/SliderControl.mjs
var INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
function getControlOffset(styles, vertical) {
if (!styles) {
return {
start: 0,
end: 0
};
}
function parseSize(value) {
const parsed = value != null ? parseFloat(value) : 0;
return Number.isNaN(parsed) ? 0 : parsed;
}
const start = !vertical ? "InlineStart" : "Top";
const end = !vertical ? "InlineEnd" : "Bottom";
return {
start: parseSize(styles[`border${start}Width`]) + parseSize(styles[`padding${start}`]),
end: parseSize(styles[`border${end}Width`]) + parseSize(styles[`padding${end}`])
};
}
function getFingerCoords(event, touchIdRef) {
if (touchIdRef.current != null && event.changedTouches) {
const touchEvent = event;
for (let i = 0; i < touchEvent.changedTouches.length; i += 1) {
const touch = touchEvent.changedTouches[i];
if (touch.identifier === touchIdRef.current) {
return {
x: touch.clientX,
y: touch.clientY
};
}
}
return null;
}
return {
x: event.clientX,
y: event.clientY
};
}
var SliderControl = /* @__PURE__ */ React22.forwardRef(function SliderControl2(componentProps, forwardedRef) {
const {
render: renderProp,
className,
style,
...elementProps
} = componentProps;
const {
disabled: disabled2,
dragging,
inset,
lastChangeReasonRef,
max,
min,
minStepsBetweenValues,
onValueCommitted,
orientation,
pressedInputRef,
pressedThumbCenterOffsetRef,
pressedThumbIndexRef,
pressedValuesRef,
registerFieldControlRef,
renderBeforeHydration,
setActive,
setDragging,
setValue,
state,
step,
thumbCollisionBehavior,
thumbRefs,
values
} = useSliderRootContext();
const direction = useDirection();
const range = values.length > 1;
const vertical = orientation === "vertical";
const controlRef = React22.useRef(null);
const stylesRef = React22.useRef(null);
const setStylesRef = useStableCallback((element2) => {
if (element2 && stylesRef.current == null) {
stylesRef.current = getWindow(element2).getComputedStyle(element2);
}
});
const touchIdRef = React22.useRef(null);
const moveCountRef = React22.useRef(0);
const insetThumbOffsetRef = React22.useRef(0);
const currentInteractionValueRef = React22.useRef(null);
const latestValuesRef = useValueAsRef(values);
function updatePressedThumb(nextIndex) {
if (pressedThumbIndexRef.current !== nextIndex) {
pressedThumbIndexRef.current = nextIndex;
}
const thumbElement = thumbRefs.current[nextIndex];
if (!thumbElement) {
pressedThumbCenterOffsetRef.current = null;
pressedInputRef.current = null;
return;
}
pressedInputRef.current = thumbElement.querySelector('input[type="range"]');
}
function resetPressedThumb() {
pressedThumbIndexRef.current = -1;
pressedThumbCenterOffsetRef.current = null;
pressedInputRef.current = null;
}
function isTargetDisabledThumb(target) {
if (!isElement(target)) {
return false;
}
return thumbRefs.current.some((thumbEl) => {
if (!isElement(thumbEl) || !contains(thumbEl, target)) {
return false;
}
return thumbEl.querySelector('input[type="range"]')?.disabled === true;
});
}
function getFingerState(fingerCoords) {
const control = controlRef.current;
const thumbIndex = pressedThumbIndexRef.current;
if (!control || !range && (thumbIndex < 0 || thumbIndex >= values.length)) {
return null;
}
const {
width,
height,
bottom,
left,
right
} = control.getBoundingClientRect();
const controlOffset = getControlOffset(stylesRef.current, vertical);
const insetThumbOffset = insetThumbOffsetRef.current;
const controlSize = (vertical ? height : width) - controlOffset.start - controlOffset.end - insetThumbOffset * 2;
const thumbCenterOffset = pressedThumbCenterOffsetRef.current ?? 0;
const fingerX = fingerCoords.x - thumbCenterOffset;
const fingerY = fingerCoords.y - thumbCenterOffset;
const valueSize = vertical ? bottom - fingerY - controlOffset.end : (direction === "rtl" ? right - fingerX : fingerX - left) - controlOffset.start;
const valueRescaled = clamp((valueSize - insetThumbOffset) / controlSize, 0, 1);
let newValue = (max - min) * valueRescaled + min;
newValue = roundValueToStep(newValue, step, min);
newValue = clamp(newValue, min, max);
if (!range) {
return {
value: newValue,
thumbIndex,
didSwap: false
};
}
if (thumbIndex < 0) {
return null;
}
const collisionResult = resolveThumbCollision({
behavior: thumbCollisionBehavior,
values,
currentValues: latestValuesRef.current ?? values,
initialValues: pressedValuesRef.current,
pressedIndex: thumbIndex,
nextValue: newValue,
min,
max,
step,
minStepsBetweenValues
});
return collisionResult;
}
function startPressing(fingerCoords) {
pressedValuesRef.current = range ? values.slice() : null;
currentInteractionValueRef.current = null;
latestValuesRef.current = values;
const pressedThumbIndex = pressedThumbIndexRef.current;
let closestThumbIndex = pressedThumbIndex;
if (pressedThumbIndex > -1 && pressedThumbIndex < values.length) {
if (values[pressedThumbIndex] === max) {
let candidateIndex = pressedThumbIndex;
while (candidateIndex > 0 && values[candidateIndex - 1] === max) {
candidateIndex -= 1;
}
closestThumbIndex = candidateIndex;
}
} else {
const axis = !vertical ? "x" : "y";
let minDistance;
closestThumbIndex = -1;
for (let i = 0; i < thumbRefs.current.length; i += 1) {
const thumbEl = thumbRefs.current[i];
if (isElement(thumbEl) && !thumbEl.querySelector('input[type="range"]')?.disabled) {
const midpoint = getMidpoint(thumbEl);
const distance = Math.abs(fingerCoords[axis] - midpoint[axis]);
if (minDistance === void 0 || distance <= minDistance) {
closestThumbIndex = i;
minDistance = distance;
}
}
}
}
if (closestThumbIndex > -1 && closestThumbIndex !== pressedThumbIndex) {
updatePressedThumb(closestThumbIndex);
}
if (inset) {
const thumbEl = thumbRefs.current[closestThumbIndex];
if (isElement(thumbEl)) {
const thumbRect = thumbEl.getBoundingClientRect();
const side = !vertical ? "width" : "height";
insetThumbOffsetRef.current = thumbRect[side] / 2;
}
}
}
function focusThumb(thumbIndex) {
const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
if (!input) {
return;
}
input.focus({
preventScroll: true,
// Prevent pointer-driven focus rings in browsers that support this option.
// Supported in Chrome from 144+.
focusVisible: false
});
}
function setValueFromPointer(finger, reason, nativeEvent) {
const applied = setValue(finger.value, createChangeEventDetails(reason, nativeEvent, void 0, {
activeThumbIndex: finger.thumbIndex
}));
if (applied) {
currentInteractionValueRef.current = finger.value;
latestValuesRef.current = Array.isArray(finger.value) ? finger.value : [finger.value];
if (finger.didSwap) {
updatePressedThumb(finger.thumbIndex);
}
}
return applied;
}
const handleTouchMove = useStableCallback((nativeEvent) => {
const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
if (fingerCoords == null) {
return;
}
moveCountRef.current += 1;
if (nativeEvent.type === "pointermove" && nativeEvent.buttons === 0) {
handleTouchEnd(nativeEvent);
return;
}
const finger = getFingerState(fingerCoords);
if (finger == null) {
return;
}
if (validateMinimumDistance(finger.value, step, minStepsBetweenValues)) {
if (!dragging && moveCountRef.current > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
setDragging(true);
}
const applied = setValueFromPointer(finger, reason_parts_exports.drag, nativeEvent);
if (applied && finger.didSwap) {
focusThumb(finger.thumbIndex);
}
}
});
const handleTouchEnd = useStableCallback((nativeEvent) => {
setActive(-1);
setDragging(false);
pressedInputRef.current = null;
pressedThumbCenterOffsetRef.current = null;
if (currentInteractionValueRef.current != null) {
const commitReason = lastChangeReasonRef.current;
onValueCommitted(currentInteractionValueRef.current, createGenericEventDetails(commitReason, nativeEvent));
}
if ("pointerType" in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) {
controlRef.current?.releasePointerCapture(nativeEvent.pointerId);
}
pressedThumbIndexRef.current = -1;
touchIdRef.current = null;
pressedValuesRef.current = null;
currentInteractionValueRef.current = null;
stopListening();
});
const handleTouchStart = useStableCallback((nativeEvent) => {
if (disabled2) {
return;
}
if (isTargetDisabledThumb(getTarget(nativeEvent))) {
resetPressedThumb();
return;
}
const touch = nativeEvent.changedTouches[0];
if (touch != null) {
touchIdRef.current = touch.identifier;
}
const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
if (fingerCoords != null) {
startPressing(fingerCoords);
const finger = getFingerState(fingerCoords);
if (finger == null) {
return;
}
focusThumb(finger.thumbIndex);
const applied = setValueFromPointer(finger, reason_parts_exports.trackPress, nativeEvent);
if (applied && finger.didSwap) {
focusThumb(finger.thumbIndex);
}
}
moveCountRef.current = 0;
const doc = ownerDocument(controlRef.current);
doc.addEventListener("touchmove", handleTouchMove, {
passive: true
});
doc.addEventListener("touchend", handleTouchEnd, {
passive: true
});
});
const stopListening = useStableCallback(() => {
const doc = ownerDocument(controlRef.current);
doc.removeEventListener("pointermove", handleTouchMove);
doc.removeEventListener("pointerup", handleTouchEnd);
doc.removeEventListener("touchmove", handleTouchMove);
doc.removeEventListener("touchend", handleTouchEnd);
pressedValuesRef.current = null;
currentInteractionValueRef.current = null;
});
const focusFrame = useAnimationFrame();
React22.useEffect(() => {
const control = controlRef.current;
if (!control) {
return () => stopListening();
}
const unsubscribeTouchStart = addEventListener(control, "touchstart", handleTouchStart, {
passive: true
});
return () => {
unsubscribeTouchStart();
focusFrame.cancel();
stopListening();
};
}, [stopListening, handleTouchStart, controlRef, focusFrame]);
React22.useEffect(() => {
if (disabled2) {
stopListening();
}
}, [disabled2, stopListening]);
const element = useRenderElement("div", componentProps, {
state,
ref: [forwardedRef, registerFieldControlRef, controlRef, setStylesRef],
props: [{
["data-base-ui-slider-control"]: renderBeforeHydration ? "" : void 0,
onPointerDown(event) {
const control = controlRef.current;
const target = getTarget(event.nativeEvent);
if (!control || disabled2 || event.defaultPrevented || !isElement(target) || // Only handle left clicks
event.button !== 0) {
return;
}
if (isTargetDisabledThumb(target)) {
resetPressedThumb();
return;
}
const fingerCoords = getFingerCoords(event, touchIdRef);
if (fingerCoords != null) {
startPressing(fingerCoords);
const finger = getFingerState(fingerCoords);
if (finger == null) {
return;
}
const pressedOnFocusedThumb = contains(thumbRefs.current[finger.thumbIndex], activeElement(ownerDocument(control)));
if (pressedOnFocusedThumb) {
event.preventDefault();
} else {
focusFrame.request(() => {
focusThumb(finger.thumbIndex);
});
}
setDragging(true);
const pressedOnAnyThumb = pressedThumbCenterOffsetRef.current != null;
if (!pressedOnAnyThumb) {
const applied = setValueFromPointer(finger, reason_parts_exports.trackPress, event.nativeEvent);
if (applied && finger.didSwap) {
focusThumb(finger.thumbIndex);
}
}
}
if (event.nativeEvent.pointerId) {
control.setPointerCapture(event.nativeEvent.pointerId);
}
moveCountRef.current = 0;
const doc = ownerDocument(controlRef.current);
doc.addEventListener("pointermove", handleTouchMove, {
passive: true
});
doc.addEventListener("pointerup", handleTouchEnd, {
once: true
});
}
}, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
return element;
});
if (true) SliderControl.displayName = "SliderControl";
// node_modules/@base-ui/react/slider/track/SliderTrack.mjs
var React23 = __toESM(require_react(), 1);
var SliderTrack = /* @__PURE__ */ React23.forwardRef(function SliderTrack2(componentProps, forwardedRef) {
const {
render,
className,
style,
...elementProps
} = componentProps;
const {
state
} = useSliderRootContext();
const element = useRenderElement("div", componentProps, {
state,
ref: forwardedRef,
props: [{
style: {
position: "relative"
}
}, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
return element;
});
if (true) SliderTrack.displayName = "SliderTrack";
// node_modules/@base-ui/react/slider/thumb/SliderThumb.mjs
var React27 = __toESM(require_react(), 1);
// node_modules/@base-ui/utils/visuallyHidden.mjs
var visuallyHiddenBase = {
clipPath: "inset(50%)",
overflow: "hidden",
whiteSpace: "nowrap",
border: 0,
padding: 0,
width: 1,
height: 1,
margin: -1
};
var visuallyHidden = {
...visuallyHiddenBase,
position: "fixed",
top: 0,
left: 0
};
var visuallyHiddenInput = {
...visuallyHiddenBase,
position: "absolute"
};
// node_modules/@base-ui/react/utils/useIsHydrating.mjs
var import_shim = __toESM(require_shim(), 1);
function subscribe() {
return NOOP;
}
function getSnapshot() {
return false;
}
function getServerSnapshot() {
return true;
}
function useIsHydrating() {
return (0, import_shim.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
}
// node_modules/@base-ui/react/utils/valueToPercent.mjs
function valueToPercent(value, min, max) {
return (value - min) * 100 / (max - min);
}
// node_modules/@base-ui/react/internals/composite/composite.mjs
var ARROW_UP = "ArrowUp";
var ARROW_DOWN = "ArrowDown";
var ARROW_LEFT = "ArrowLeft";
var ARROW_RIGHT = "ArrowRight";
var HOME = "Home";
var END = "End";
var PAGE_UP = "PageUp";
var PAGE_DOWN = "PageDown";
var HORIZONTAL_KEYS = /* @__PURE__ */ new Set([ARROW_LEFT, ARROW_RIGHT]);
var VERTICAL_KEYS = /* @__PURE__ */ new Set([ARROW_UP, ARROW_DOWN]);
var ARROW_KEYS = /* @__PURE__ */ new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
var COMPOSITE_KEYS = /* @__PURE__ */ new Set([...ARROW_KEYS, HOME, END]);
// node_modules/@base-ui/react/internals/composite/list/useCompositeListItem.mjs
var React24 = __toESM(require_react(), 1);
var IndexGuessBehavior = /* @__PURE__ */ function(IndexGuessBehavior2) {
IndexGuessBehavior2[IndexGuessBehavior2["None"] = 0] = "None";
IndexGuessBehavior2[IndexGuessBehavior2["GuessFromOrder"] = 1] = "GuessFromOrder";
return IndexGuessBehavior2;
}({});
function useCompositeListItem(params = {}) {
const {
label,
metadata,
textRef,
indexGuessBehavior,
index: externalIndex
} = params;
const {
register,
unregister,
subscribeMapChange,
elementsRef,
labelsRef,
nextIndexRef
} = useCompositeListContext();
const indexRef = React24.useRef(-1);
const [index, setIndex] = React24.useState(externalIndex ?? (indexGuessBehavior === IndexGuessBehavior.GuessFromOrder ? () => {
if (indexRef.current === -1) {
const newIndex = nextIndexRef.current;
nextIndexRef.current += 1;
indexRef.current = newIndex;
}
return indexRef.current;
} : -1));
const componentRef = React24.useRef(null);
const ref = React24.useCallback((node) => {
componentRef.current = node;
if (index !== -1 && node !== null) {
elementsRef.current[index] = node;
if (labelsRef) {
const isLabelDefined = label !== void 0;
labelsRef.current[index] = isLabelDefined ? label : textRef?.current?.textContent ?? node.textContent;
}
}
}, [index, elementsRef, labelsRef, label, textRef]);
useIsoLayoutEffect(() => {
if (externalIndex != null) {
return void 0;
}
const node = componentRef.current;
if (node) {
register(node, metadata);
return () => {
unregister(node);
};
}
return void 0;
}, [externalIndex, register, unregister, metadata]);
useIsoLayoutEffect(() => {
if (externalIndex != null) {
return void 0;
}
return subscribeMapChange((map) => {
const i = componentRef.current ? map.get(componentRef.current)?.index : null;
if (i != null) {
setIndex(i);
}
});
}, [externalIndex, subscribeMapChange, setIndex]);
return {
ref,
index
};
}
// node_modules/@base-ui/react/internals/csp-context/CSPContext.mjs
var React25 = __toESM(require_react(), 1);
var CSPContext = /* @__PURE__ */ React25.createContext(void 0);
if (true) CSPContext.displayName = "CSPContext";
var DEFAULT_CSP_CONTEXT_VALUE = {
disableStyleElements: false
};
function useCSPContext() {
return React25.useContext(CSPContext) ?? DEFAULT_CSP_CONTEXT_VALUE;
}
// node_modules/@base-ui/react/internals/labelable-provider/useLabelableId.mjs
var React26 = __toESM(require_react(), 1);
function useLabelableId(params = {}) {
const {
id,
implicit = false,
controlRef
} = params;
const {
controlId,
registerControlId
} = useLabelableContext();
const defaultId = useBaseUiId(id);
const controlIdForEffect = implicit ? controlId : void 0;
const controlSourceRef = useRefWithInit(() => Symbol("labelable-control"));
const hasRegisteredRef = React26.useRef(false);
const hadExplicitIdRef = React26.useRef(id != null);
const unregisterControlId = useStableCallback(() => {
if (!hasRegisteredRef.current || registerControlId === NOOP) {
return;
}
hasRegisteredRef.current = false;
registerControlId(controlSourceRef.current, void 0);
});
useIsoLayoutEffect(() => {
if (registerControlId === NOOP) {
return void 0;
}
let nextId;
if (implicit) {
const elem = controlRef?.current;
if (isElement(elem) && elem.closest("label") != null) {
nextId = id ?? null;
} else {
nextId = controlIdForEffect ?? defaultId;
}
} else if (id != null) {
hadExplicitIdRef.current = true;
nextId = id;
} else if (hadExplicitIdRef.current) {
nextId = defaultId;
} else {
unregisterControlId();
return void 0;
}
if (nextId === void 0) {
unregisterControlId();
return void 0;
}
hasRegisteredRef.current = true;
registerControlId(controlSourceRef.current, nextId);
return void 0;
}, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
React26.useEffect(() => {
return unregisterControlId;
}, [unregisterControlId]);
return controlId ?? defaultId;
}
// node_modules/@base-ui/react/slider/thumb/SliderThumbDataAttributes.mjs
var SliderThumbDataAttributes = /* @__PURE__ */ function(SliderThumbDataAttributes2) {
SliderThumbDataAttributes2["index"] = "data-index";
SliderThumbDataAttributes2["dragging"] = "data-dragging";
SliderThumbDataAttributes2["orientation"] = "data-orientation";
SliderThumbDataAttributes2["disabled"] = "data-disabled";
SliderThumbDataAttributes2["valid"] = "data-valid";
SliderThumbDataAttributes2["invalid"] = "data-invalid";
SliderThumbDataAttributes2["touched"] = "data-touched";
SliderThumbDataAttributes2["dirty"] = "data-dirty";
SliderThumbDataAttributes2["focused"] = "data-focused";
return SliderThumbDataAttributes2;
}({});
// node_modules/@base-ui/react/slider/thumb/prehydrationScript.min.mjs
var script = '!function(){const t=document.currentScript?.parentElement;if(!t)return;const e=t.closest("[data-base-ui-slider-control]");if(!e)return;const r=e.querySelector("[data-base-ui-slider-indicator]"),i=e.getBoundingClientRect(),n="vertical"===e.getAttribute("data-orientation")?"height":"width",o=e.querySelectorAll(\'input[type="range"]\'),l=o.length>1,s=o.length-1;let a=null,u=null;for(let t=0;t<o.length;t+=1){const e=o[t],y=parseFloat(e.getAttribute("value")??"");if(Number.isNaN(y))return;const c=e.parentElement;if(!c)return;const p=parseFloat(e.getAttribute("max")??"100"),g=parseFloat(e.getAttribute("min")??"0"),b=c?.getBoundingClientRect(),d=i[n]-b[n],m=100*(y-g)/(p-g),v=(b[n]/2+d*m/100)/i[n]*100;c.style.setProperty("--position",`${v}%`),Number.isFinite(v)&&(c.style.removeProperty("visibility"),r&&(0===t?(a=v,r.style.setProperty("--start-position",`${v}%`),l||r.style.removeProperty("visibility")):t===s&&(u=v-(a??0),r.style.setProperty("--end-position",`${v}%`),r.style.setProperty("--relative-size",`${u}%`),r.style.removeProperty("visibility"))))}}();';
// node_modules/@base-ui/react/slider/thumb/SliderThumb.mjs
var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
var ALL_KEYS = /* @__PURE__ */ new Set([...COMPOSITE_KEYS, PAGE_UP, PAGE_DOWN]);
function getDefaultAriaValueText(values, index, format, locale) {
if (index < 0) {
return void 0;
}
if (values.length === 2) {
if (index === 0) {
return `${formatNumber(values[index], locale, format)} start range`;
}
return `${formatNumber(values[index], locale, format)} end range`;
}
return format ? formatNumber(values[index], locale, format) : void 0;
}
function getNewValue(thumbValue, increment, direction, min, max) {
const value = direction === 1 ? thumbValue + increment : thumbValue - increment;
const roundedValue = Number(value.toFixed(Math.max(getDecimalPrecision(thumbValue), getDecimalPrecision(increment), getDecimalPrecision(min))));
return clamp(roundedValue, min, max);
}
var SliderThumb = /* @__PURE__ */ React27.forwardRef(function SliderThumb2(componentProps, forwardedRef) {
const {
render,
children: childrenProp,
className,
"aria-describedby": ariaDescribedByProp,
"aria-label": ariaLabelProp,
"aria-labelledby": ariaLabelledByProp,
"aria-valuetext": ariaValueTextProp,
disabled: disabledProp = false,
getAriaLabel: getAriaLabelProp,
getAriaValueText: getAriaValueTextProp,
id: idProp,
index: indexProp,
inputRef: inputRefProp,
onBlur: onBlurProp,
onFocus: onFocusProp,
onKeyDown: onKeyDownProp,
tabIndex: tabIndexProp,
style,
...elementProps
} = componentProps;
const {
nonce
} = useCSPContext();
const id = useBaseUiId(idProp);
const {
active: activeIndex,
lastUsedThumbIndex,
controlRef,
disabled: contextDisabled,
validation,
formatOptionsRef,
handleInputChange,
inset,
labelId,
largeStep,
locale,
max,
min,
minStepsBetweenValues,
form,
name,
orientation,
pressedInputRef,
pressedThumbCenterOffsetRef,
pressedThumbIndexRef,
renderBeforeHydration,
setActive,
setIndicatorPosition,
state,
step,
values: sliderValues
} = useSliderRootContext();
const direction = useDirection();
const disabled2 = disabledProp || contextDisabled;
const range = sliderValues.length > 1;
const vertical = orientation === "vertical";
const rtl = direction === "rtl";
const {
setTouched,
setFocused,
validationMode
} = useFieldRootContext();
const thumbRef = React27.useRef(null);
const inputRef = React27.useRef(null);
const restoringFocusVisibleRef = React27.useRef(false);
const defaultInputId = useBaseUiId();
const labelableId = useLabelableId();
const inputId = range ? defaultInputId : labelableId;
const thumbMetadata = React27.useMemo(() => ({
inputId
}), [inputId]);
const {
ref: listItemRef,
index: compositeIndex
} = useCompositeListItem({
metadata: thumbMetadata
});
const index = !range ? 0 : indexProp ?? compositeIndex;
const last = index === sliderValues.length - 1;
const thumbValue = sliderValues[index];
const thumbValuePercent = valueToPercent(thumbValue, min, max);
const [positionPercent, setPositionPercent] = React27.useState();
const isHydrating = useIsHydrating();
const safeLastUsedThumbIndex = lastUsedThumbIndex >= 0 && lastUsedThumbIndex < sliderValues.length ? lastUsedThumbIndex : -1;
const getInsetPosition = useStableCallback(() => {
const control = controlRef.current;
const thumb = thumbRef.current;
if (!control || !thumb) {
return;
}
const thumbRect = thumb.getBoundingClientRect();
const controlRect = control.getBoundingClientRect();
const side = vertical ? "height" : "width";
const controlSize = controlRect[side] - thumbRect[side];
const thumbOffsetFromControlEdge = thumbRect[side] / 2 + controlSize * thumbValuePercent / 100;
const nextPositionPercent = thumbOffsetFromControlEdge / controlRect[side] * 100;
const nextInsetPosition = Number.isFinite(nextPositionPercent) ? nextPositionPercent : void 0;
setPositionPercent(nextInsetPosition);
if (index === 0) {
setIndicatorPosition((prevPosition) => [nextInsetPosition, prevPosition[1]]);
} else if (last) {
setIndicatorPosition((prevPosition) => [prevPosition[0], nextInsetPosition]);
}
});
useIsoLayoutEffect(() => {
if (inset) {
queueMicrotask(getInsetPosition);
}
}, [getInsetPosition, inset]);
useIsoLayoutEffect(() => {
if (inset) {
getInsetPosition();
}
}, [getInsetPosition, inset, thumbValuePercent]);
useIsoLayoutEffect(() => {
if (!inset) {
return void 0;
}
const control = controlRef.current;
const thumb = thumbRef.current;
if (!control || !thumb) {
return void 0;
}
const ResizeObserverCtor = getWindow(control).ResizeObserver;
if (typeof ResizeObserverCtor !== "function") {
return void 0;
}
const resizeObserver = new ResizeObserverCtor(getInsetPosition);
resizeObserver.observe(control);
resizeObserver.observe(thumb);
return () => {
resizeObserver.disconnect();
};
}, [controlRef, getInsetPosition, inset]);
const startEdge = vertical ? "bottom" : "insetInlineStart";
const crossOffsetProperty = vertical ? "left" : "top";
let zIndex;
if (range) {
if (activeIndex === index) {
zIndex = 2;
} else if (safeLastUsedThumbIndex === index) {
zIndex = 1;
}
} else if (activeIndex === index) {
zIndex = 1;
}
let thumbStyle;
if (inset) {
thumbStyle = {
["--position"]: `${positionPercent ?? 0}%`,
visibility: renderBeforeHydration && isHydrating || positionPercent === void 0 ? "hidden" : void 0,
position: "absolute",
[startEdge]: "var(--position)",
[crossOffsetProperty]: "50%",
translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
zIndex
};
} else {
thumbStyle = !Number.isFinite(thumbValuePercent) ? visuallyHidden : {
position: "absolute",
[startEdge]: `${thumbValuePercent}%`,
[crossOffsetProperty]: "50%",
translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
zIndex
};
}
let cssWritingMode;
if (orientation === "vertical") {
cssWritingMode = rtl ? "vertical-rl" : "vertical-lr";
}
const ariaLabel = typeof getAriaLabelProp === "function" ? getAriaLabelProp(index) : ariaLabelProp;
const inputProps = mergeProps({
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledByProp ?? (ariaLabel == null ? labelId : void 0),
"aria-describedby": ariaDescribedByProp,
"aria-orientation": orientation,
"aria-valuenow": thumbValue,
"aria-valuetext": typeof getAriaValueTextProp === "function" ? getAriaValueTextProp(formatNumber(thumbValue, locale, formatOptionsRef.current ?? void 0), thumbValue, index) : ariaValueTextProp ?? getDefaultAriaValueText(sliderValues, index, formatOptionsRef.current ?? void 0, locale),
disabled: disabled2,
form,
id: inputId,
max,
min,
name,
onChange(event) {
handleInputChange(event.currentTarget.valueAsNumber, index, event);
},
onFocus(event) {
const isRestoringFocusVisible = restoringFocusVisibleRef.current;
restoringFocusVisibleRef.current = false;
setActive(index);
setFocused(true);
if (isRestoringFocusVisible) {
event.stopPropagation();
}
},
onBlur(event) {
if (restoringFocusVisibleRef.current) {
event.stopPropagation();
return;
}
if (!thumbRef.current) {
return;
}
setActive(-1);
setTouched(true);
setFocused(false);
if (validationMode === "onBlur") {
validation.commit(getSliderValue(thumbValue, index, min, max, range, sliderValues));
}
},
onKeyDown(event) {
if (event.defaultPrevented) {
return;
}
if (!ALL_KEYS.has(event.key)) {
return;
}
if (COMPOSITE_KEYS.has(event.key)) {
event.stopPropagation();
}
let newValue = null;
const roundedValue = roundValueToStep(thumbValue, step, min);
switch (event.key) {
case ARROW_UP:
newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, 1, min, max);
break;
case ARROW_RIGHT:
newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? -1 : 1, min, max);
break;
case ARROW_DOWN:
newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, -1, min, max);
break;
case ARROW_LEFT:
newValue = getNewValue(roundedValue, event.shiftKey ? largeStep : step, rtl ? 1 : -1, min, max);
break;
case PAGE_UP:
newValue = getNewValue(roundedValue, largeStep, 1, min, max);
break;
case PAGE_DOWN:
newValue = getNewValue(roundedValue, largeStep, -1, min, max);
break;
case END:
newValue = max;
if (range) {
newValue = Number.isFinite(sliderValues[index + 1]) ? sliderValues[index + 1] - step * minStepsBetweenValues : max;
}
break;
case HOME:
newValue = min;
if (range) {
newValue = Number.isFinite(sliderValues[index - 1]) ? sliderValues[index - 1] + step * minStepsBetweenValues : min;
}
break;
default:
break;
}
if (newValue !== null) {
const input = event.currentTarget;
if (!matchesFocusVisible(input)) {
restoringFocusVisibleRef.current = true;
input.blur();
input.focus({
preventScroll: true,
// Show `:focus-visible` after keyboard interaction, even if the
// thumb was previously focused by a pointer.
focusVisible: true
});
}
handleInputChange(newValue, index, event);
event.preventDefault();
}
},
step,
style: {
...visuallyHidden,
// So that VoiceOver's focus indicator matches the thumb's dimensions
width: "100%",
height: "100%",
writingMode: cssWritingMode
},
tabIndex: tabIndexProp ?? void 0,
type: "range",
value: thumbValue ?? ""
}, (props) => validation.getValidationProps(disabled2, props), {
onKeyDown: onKeyDownProp
});
const mergedInputRef = useMergedRefs(inputRef, validation.inputRef, inputRefProp);
const element = useRenderElement("div", componentProps, {
state,
ref: [forwardedRef, listItemRef, thumbRef],
props: [{
[SliderThumbDataAttributes.index]: index,
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(React27.Fragment, {
children: [childrenProp, /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", {
ref: mergedInputRef,
...inputProps,
suppressHydrationWarning: true
}), inset && isHydrating && renderBeforeHydration && // this must be rendered with the last thumb to ensure all
// preceding thumbs are already rendered in the DOM
last && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("script", {
nonce,
dangerouslySetInnerHTML: {
__html: script
},
suppressHydrationWarning: true
})]
}),
id,
onBlur: onBlurProp,
onFocus: onFocusProp,
onPointerDown(event) {
if (disabled2) {
return;
}
pressedThumbIndexRef.current = index;
if (thumbRef.current != null) {
const axis = orientation === "horizontal" ? "x" : "y";
const midpoint = getMidpoint(thumbRef.current);
const offset = (orientation === "horizontal" ? event.clientX : event.clientY) - midpoint[axis];
pressedThumbCenterOffsetRef.current = offset;
}
if (inputRef.current != null && pressedInputRef.current !== inputRef.current) {
pressedInputRef.current = inputRef.current;
}
},
style: thumbStyle,
suppressHydrationWarning: renderBeforeHydration || void 0
}, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
return element;
});
if (true) SliderThumb.displayName = "SliderThumb";
// node_modules/@base-ui/react/slider/indicator/SliderIndicator.mjs
var React28 = __toESM(require_react(), 1);
function getInsetStyles(vertical, range, start, end, renderBeforeHydration, hydrating) {
const visibility = start === void 0 || range && end === void 0 ? "hidden" : void 0;
const startEdge = vertical ? "bottom" : "insetInlineStart";
const mainSide = vertical ? "height" : "width";
const crossSide = vertical ? "width" : "height";
const styles = {
visibility: renderBeforeHydration && hydrating ? "hidden" : visibility,
position: vertical ? "absolute" : "relative",
[crossSide]: "inherit"
};
styles["--start-position"] = `${start ?? 0}%`;
if (!range) {
styles[startEdge] = 0;
styles[mainSide] = "var(--start-position)";
return styles;
}
styles["--relative-size"] = `${(end ?? 0) - (start ?? 0)}%`;
styles[startEdge] = "var(--start-position)";
styles[mainSide] = "var(--relative-size)";
return styles;
}
function getCenteredStyles(vertical, range, start, end) {
const startEdge = vertical ? "bottom" : "insetInlineStart";
const mainSide = vertical ? "height" : "width";
const crossSide = vertical ? "width" : "height";
const styles = {
position: vertical ? "absolute" : "relative",
[crossSide]: "inherit"
};
if (!range) {
styles[startEdge] = 0;
styles[mainSide] = `${start}%`;
return styles;
}
const size = end - start;
styles[startEdge] = `${start}%`;
styles[mainSide] = `${size}%`;
return styles;
}
var SliderIndicator = /* @__PURE__ */ React28.forwardRef(function SliderIndicator2(componentProps, forwardedRef) {
const {
render,
className,
style: styleProp,
...elementProps
} = componentProps;
const {
indicatorPosition,
inset,
max,
min,
orientation,
renderBeforeHydration,
state,
values
} = useSliderRootContext();
const isHydrating = useIsHydrating();
const vertical = orientation === "vertical";
const range = values.length > 1;
const style = inset ? getInsetStyles(vertical, range, indicatorPosition[0], indicatorPosition[1], renderBeforeHydration, isHydrating) : getCenteredStyles(vertical, range, valueToPercent(values[0], min, max), valueToPercent(values[values.length - 1], min, max));
const element = useRenderElement("div", componentProps, {
state,
ref: forwardedRef,
props: [{
["data-base-ui-slider-indicator"]: renderBeforeHydration ? "" : void 0,
style,
suppressHydrationWarning: renderBeforeHydration || void 0
}, elementProps],
stateAttributesMapping: sliderStateAttributesMapping
});
return element;
});
if (true) SliderIndicator.displayName = "SliderIndicator";
// src/presentation/components/ui/Slider.tsx
var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
function Slider({
className,
defaultValue,
value,
min = 0,
max = 100,
...props
}) {
const values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
index_parts_exports.Root,
{
className: cn(
"data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
className
),
"data-slot": "slider",
defaultValue,
value,
min,
max,
thumbAlignment: "edge",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(index_parts_exports.Control, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
index_parts_exports.Track,
{
"data-slot": "slider-track",
className: "relative grow overflow-hidden rounded-full bg-input select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
index_parts_exports.Indicator,
{
"data-slot": "slider-range",
className: "bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
}
)
}
),
Array.from({ length: values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
index_parts_exports.Thumb,
{
"data-slot": "slider-thumb",
className: "relative block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden active:ring-4 disabled:pointer-events-none disabled:opacity-50"
},
index
))
] })
}
);
}
// src/presentation/components/ui/Switch.tsx
var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
// src/widgets/primitives/WidgetLayout.tsx
var import_react2 = __toESM(require_react(), 1);
var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
function VisualSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
}
function ControlsSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
}
function AsideSlot({ children }) {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
}
VisualSlot.__widgetSlot = "visual";
ControlsSlot.__widgetSlot = "controls";
AsideSlot.__widgetSlot = "aside";
function extractSlots(children) {
const slots = {};
import_react2.default.Children.forEach(children, (child) => {
if (import_react2.default.isValidElement(child)) {
const t = child.type;
if (t?.__widgetSlot) {
slots[t.__widgetSlot] = child;
}
}
});
return slots;
}
function WidgetLayoutImpl(props) {
const arrangement = props.arrangement ?? "visual-left";
const slots = extractSlots(props.children);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `readrun-widget readrun-widget--${arrangement}`, children: [
(props.title || props.subtitle || props.headMeta) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"div",
{
className: "readrun-widget__head",
style: { display: "flex", justifyContent: "space-between" },
children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
props.title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: "readrun-widget__title", children: props.title }),
props.subtitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "readrun-widget__subtitle", children: props.subtitle })
] }),
props.headMeta && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: props.headMeta })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "readrun-widget__body", children: [
slots["visual"] && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "readrun-widget__visual", children: slots["visual"] }),
(slots["controls"] || slots["aside"]) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "readrun-widget__sidebar", children: [
slots["controls"] && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "readrun-widget__controls", children: slots["controls"] }),
slots["aside"] && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "readrun-widget__aside", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "readrun-widget__aside-label", children: "What to notice" }),
slots["aside"]
] })
] })
] })
] });
}
var WidgetLayout = Object.assign(WidgetLayoutImpl, {
Visual: VisualSlot,
Controls: ControlsSlot,
Aside: AsideSlot
});
// src/widgets/primitives/FormulaSteps.tsx
var import_react3 = __toESM(require_react(), 1);
var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
// src/widgets/primitives/index.tsx
function Btn({
kind = "ghost",
active,
children,
...rest
}) {
const cls = `viz-btn viz-btn-${kind}${active ? " viz-btn-active" : ""}`;
return /* @__PURE__ */ import_react4.default.createElement("button", { className: cls, ...rest }, children);
}
function Slider2({
label,
unit,
min,
max,
step = 1,
value,
onChange,
format
}) {
const fmt = format || ((v) => Number.isFinite(v) ? v.toFixed(2) : String(v));
const labelId = import_react4.default.useId();
return /* @__PURE__ */ import_react4.default.createElement("div", { className: "viz-slider-row" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "viz-slider-head" }, /* @__PURE__ */ import_react4.default.createElement("span", { id: labelId }, label), /* @__PURE__ */ import_react4.default.createElement("span", { className: "viz-slider-value" }, fmt(value), unit && /* @__PURE__ */ import_react4.default.createElement("span", { className: "viz-slider-unit" }, unit))), /* @__PURE__ */ import_react4.default.createElement(
Slider,
{
min,
max,
step,
value: [value],
onValueChange: (values) => {
const next = typeof values === "number" ? values : values[0];
if (typeof next === "number") onChange(next);
},
"aria-labelledby": labelId
}
));
}
function Tabs({
value,
onChange,
items
}) {
return /* @__PURE__ */ import_react4.default.createElement("div", { className: "viz-tabs" }, items.map((it) => /* @__PURE__ */ import_react4.default.createElement(
"button",
{
key: it.id,
className: `viz-tab${value === it.id ? " active" : ""}`,
onClick: () => onChange(it.id)
},
it.label
)));
}
function Stat({
label,
value,
color
}) {
return /* @__PURE__ */ import_react4.default.createElement("span", { className: "viz-stat" }, /* @__PURE__ */ import_react4.default.createElement("span", null, label), /* @__PURE__ */ import_react4.default.createElement("strong", { className: "viz-stat-value", style: color ? { color } : void 0 }, value));
}
// src/widgets/plot/Frame.tsx
var import_react6 = __toESM(require_react(), 1);
// src/widgets/plot/Axis.tsx
var import_react5 = __toESM(require_react(), 1);
// src/widgets/plot/ticks.ts
function ticks(s, n) {
if (s.type === "ordinal") {
return [...s.domain];
}
const cs = s;
if (cs.type === "log") {
return logTicks(cs);
}
return linearTicks(cs, n);
}
function linearTicks(s, n) {
const [d0, d1] = s.domain;
const span = d1 - d0;
const count = Math.max(n, 2);
const roughStep = span / count;
const mag = Math.floor(Math.log10(roughStep));
const base = Math.pow(10, mag);
let step;
const r2 = roughStep / base;
if (r2 <= 1) {
step = base;
} else if (r2 <= 2) {
step = 2 * base;
} else if (r2 <= 5) {
step = 5 * base;
} else {
step = 10 * base;
}
const start = Math.ceil(d0 / step) * step;
const end = Math.floor(d1 / step) * step;
const result = [];
const numSteps = Math.round((end - start) / step);
for (let i = 0; i <= numSteps; i++) {
const v = start + i * step;
const rounded = parseFloat(v.toPrecision(12));
result.push(rounded);
}
if (result.length < 2) {
return [d0, d1];
}
return result;
}
function logTicks(s) {
const [d0, d1] = s.domain;
const result = [];
const logD0 = Math.log10(d0);
const logD1 = Math.log10(d1);
const startExp = Math.floor(logD0);
const endExp = Math.ceil(logD1);
for (let exp = startExp; exp <= endExp; exp++) {
const v = Math.pow(10, exp);
if (v >= d0 && v <= d1) {
result.push(v);
}
}
if (result.length < 2) {
return [d0, d1];
}
return result;
}
// src/widgets/plot/Axis.tsx
var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
var TICK_SIZE = 6;
var AXIS_COLOR = "#64748b";
var LABEL_COLOR = "#475569";
var FONT = "ui-monospace, monospace";
var FONT_SIZE = 11;
function Axis({
scale: scale2,
side,
label,
tickFormat = String,
numTicks = 5
}) {
const isHorizontal = side === "bottom" || side === "top";
const tickValues = ticks(scale2, numTicks);
function tickPos(value) {
if (scale2.type === "ordinal") {
return scale2(value);
}
return scale2(value);
}
const [r0, r1] = scale2.range;
const lineLength = r1 - r0;
const tickDir = side === "bottom" || side === "right" ? 1 : -1;
if (isHorizontal) {
const labelOffset = side === "bottom" ? TICK_SIZE + 14 : -(TICK_SIZE + 14);
const axisLabelY = side === "bottom" ? TICK_SIZE + 28 : -(TICK_SIZE + 28);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"line",
{
x1: r0,
y1: 0,
x2: r1,
y2: 0,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
tickValues.map((v) => {
const x = tickPos(v);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${x}, 0)`, children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"line",
{
x1: 0,
y1: 0,
x2: 0,
y2: tickDir * TICK_SIZE,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"text",
{
x: 0,
y: labelOffset,
textAnchor: "middle",
dominantBaseline: side === "bottom" ? "hanging" : "auto",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR
},
children: tickFormat(v)
}
)
] }, String(v));
}),
label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"text",
{
x: (r0 + r1) / 2,
y: axisLabelY,
textAnchor: "middle",
dominantBaseline: side === "bottom" ? "hanging" : "auto",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR,
fontWeight: 500
},
children: label
}
)
] });
} else {
const labelOffset = side === "left" ? -(TICK_SIZE + 6) : TICK_SIZE + 6;
const textAnchor = side === "left" ? "end" : "start";
const axisLabelOffset = side === "left" ? -(TICK_SIZE + 36) : TICK_SIZE + 36;
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"line",
{
x1: 0,
y1: r0,
x2: 0,
y2: lineLength < 0 ? r0 + lineLength : r1,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
tickValues.map((v) => {
const y = tickPos(v);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(0, ${y})`, children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"line",
{
x1: 0,
y1: 0,
x2: tickDir * -TICK_SIZE,
y2: 0,
stroke: AXIS_COLOR,
strokeWidth: 1
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"text",
{
x: labelOffset,
y: 0,
textAnchor,
dominantBaseline: "middle",
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR
},
children: tickFormat(v)
}
)
] }, String(v));
}),
label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"text",
{
x: axisLabelOffset,
y: (r0 + (lineLength < 0 ? r0 + lineLength : r1)) / 2,
textAnchor: "middle",
transform: `rotate(-90, ${axisLabelOffset}, ${(r0 + (lineLength < 0 ? r0 + lineLength : r1)) / 2})`,
style: {
fontFamily: FONT,
fontSize: FONT_SIZE,
fill: LABEL_COLOR,
fontWeight: 500
},
children: label
}
)
] });
}
}
// src/widgets/plot/Frame.tsx
var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
var DEFAULT_MARGIN = { top: 10, right: 10, bottom: 30, left: 40 };
function Frame({
width,
height,
margin: marginProp,
xScale,
yScale,
xLabel,
yLabel,
xTickFormat,
yTickFormat,
xNumTicks,
yNumTicks,
children
}) {
const margin = {
top: marginProp?.top ?? DEFAULT_MARGIN.top,
right: marginProp?.right ?? DEFAULT_MARGIN.right,
bottom: marginProp?.bottom ?? DEFAULT_MARGIN.bottom,
left: marginProp?.left ?? DEFAULT_MARGIN.left
};
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const renderArgs = {
xScale,
yScale,
innerWidth,
innerHeight
};
const content = typeof children === "function" ? children(renderArgs) : children;
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"svg",
{
viewBox: `0 0 ${width} ${height}`,
width,
height,
style: { display: "block", maxWidth: "100%" },
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${margin.left}, ${margin.top})`, children: [
content,
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(0, ${innerHeight})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
Axis,
{
scale: xScale,
side: "bottom",
label: xLabel,
tickFormat: xTickFormat,
numTicks: xNumTicks
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: "translate(0, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
Axis,
{
scale: yScale,
side: "left",
label: yLabel,
tickFormat: yTickFormat,
numTicks: yNumTicks
}
) })
] })
}
);
}
// src/widgets/plot/scale.ts
function makeLinear(domain, range) {
const [d0, d1] = domain;
const [r0, r1] = range;
const fn = (value) => {
return (value - d0) / (d1 - d0) * (r1 - r0) + r0;
};
const s = fn;
s.invert = (n) => (n - r0) / (r1 - r0) * (d1 - d0) + d0;
s.domain = domain;
s.range = range;
s.type = "linear";
return s;
}
function makeLog(domain, range, base) {
const [d0, d1] = domain;
if (d0 <= 0 || d1 <= 0) {
throw new Error(
`scale.log: domain values must be > 0, got [${d0}, ${d1}]`
);
}
const logBase = Math.log(base);
const logD0 = Math.log(d0) / logBase;
const logD1 = Math.log(d1) / logBase;
const [r0, r1] = range;
const fn = (value) => {
const logV = Math.log(value) / logBase;
return (logV - logD0) / (logD1 - logD0) * (r1 - r0) + r0;
};
const s = fn;
s.invert = (n) => {
const logV = (n - r0) / (r1 - r0) * (logD1 - logD0) + logD0;
return Math.pow(base, logV);
};
s.domain = domain;
s.range = range;
s.type = "log";
return s;
}
function makeOrdinal(domain, range) {
const [r0, r1] = range;
const bw = (r1 - r0) / domain.length;
const fn = (value) => {
const idx = domain.indexOf(value);
if (idx === -1) {
throw new Error(
`scale.ordinal: value ${String(value)} not in domain [${domain.join(", ")}]`
);
}
return r0 + idx * bw + bw / 2;
};
const s = fn;
s.domain = domain;
s.range = range;
s.bandwidth = bw;
s.type = "ordinal";
return s;
}
var scale = {
linear({
domain,
range
}) {
return makeLinear(domain, range);
},
log({
domain,
range,
base = 10
}) {
return makeLog(domain, range, base);
},
ordinal({
domain,
range
}) {
return makeOrdinal(domain, range);
}
};
// src/widgets/plot/Heatmap.tsx
var import_react7 = __toESM(require_react(), 1);
var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
function dataExtent(data, invalid = (v) => !Number.isFinite(v)) {
const nx = data.length;
if (nx === 0) return null;
const ny = data[0].length;
if (ny === 0) return null;
let lo = Infinity;
let hi = -Infinity;
for (let i = 0; i < nx; i++) {
const col = data[i];
for (let j = 0; j < ny; j++) {
const v = col[j];
if (invalid(v)) continue;
if (v < lo) lo = v;
if (v > hi) hi = v;
}
}
if (!Number.isFinite(lo) || !Number.isFinite(hi)) return null;
return [lo, hi];
}
var defaultInvalid = (v) => !Number.isFinite(v);
function Heatmap({
data,
width,
height,
colorScale,
domain,
invalid = defaultInvalid,
flipY = true,
onCellClick
}) {
const nx = data.length;
const ny = nx > 0 ? data[0].length : 0;
if (nx === 0 || ny === 0) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", {});
}
let lo;
let hi;
if (domain) {
[lo, hi] = domain;
} else {
const ex = dataExtent(data, invalid);
if (!ex) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", {});
[lo, hi] = ex;
}
const span = hi - lo || 1;
const cw = width / nx;
const ch = height / ny;
const eps = 0.5;
const cells = [];
for (let i = 0; i < nx; i++) {
const col = data[i];
for (let j = 0; j < ny; j++) {
const v = col[j];
if (invalid(v)) continue;
const t = Math.max(0, Math.min(1, (v - lo) / span));
const x = i * cw;
const y = flipY ? height - (j + 1) * ch : j * ch;
cells.push(
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"rect",
{
x,
y,
width: cw + eps,
height: ch + eps,
fill: colorScale(t),
...onCellClick && {
style: { cursor: "pointer" },
onClick: () => onCellClick(i, j, v)
}
},
`${i}-${j}`
)
);
}
}
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { children: cells });
}
// src/widgets/plot/Histogram.tsx
var import_react8 = __toESM(require_react(), 1);
var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
// src/widgets/draw/palette.ts
function parseHex(hex) {
if (!/^#[0-9a-fA-F]{6}$/.test(hex)) {
throw new Error(
`palette.sequential: invalid hex colour "${hex}". Only 6-digit hex (#rrggbb) is accepted.`
);
}
const v = parseInt(hex.slice(1), 16);
return [v >> 16 & 255, v >> 8 & 255, v & 255];
}
function toHex(r2, g, b) {
const clamp2 = (n) => Math.max(0, Math.min(255, Math.round(n)));
return "#" + [clamp2(r2), clamp2(g), clamp2(b)].map((c) => c.toString(16).padStart(2, "0")).join("");
}
var VIRIDIS_STOPS = [
"#440154",
"#482475",
"#414487",
"#355f8d",
"#2a788e",
"#21918c",
"#22a884",
"#44bf70",
"#7ad151",
"#bddf26",
"#fde725"
];
var MAGMA_STOPS = [
"#000004",
"#180f3d",
"#440f76",
"#721f81",
"#9e2f7f",
"#cd4071",
"#f1605d",
"#fd9668",
"#feca8d",
"#fcfdbf"
];
var PLASMA_STOPS = [
"#0d0887",
"#46039f",
"#7201a8",
"#9c179e",
"#bd3786",
"#d8576b",
"#ed7953",
"#fb9f3a",
"#fdc926",
"#f0f921"
];
function sequential(stops, t) {
const parsed = stops.map(parseHex);
const clamped = Math.max(0, Math.min(1, t));
const n = parsed.length;
if (n === 1) return toHex(...parsed[0]);
const scaled = clamped * (n - 1);
const lo = Math.min(Math.floor(scaled), n - 2);
const hi = lo + 1;
const localT = scaled - lo;
const [r0, g0, b0] = parsed[lo];
const [r1, g1, b1] = parsed[hi];
return toHex(r0 + (r1 - r0) * localT, g0 + (g1 - g0) * localT, b0 + (b1 - b0) * localT);
}
var palette = {
math: {
accent: "#4f46e5",
// indigo-600
accent2: "#0ea5e9",
// sky-500
dim: "#cbd5e1",
// slate-300
surface: "#ffffff",
text: "#0f172a",
// slate-900
textDim: "#475569"
// slate-600
},
neuro: {
accent: "#f87171",
// red-400 — spike colour
accent2: "#fbbf24",
// amber-400 — threshold marker
dim: "#475569",
// slate-600 — axis lines on dark bg
surface: "#1e293b",
// slate-800 — dark stage
text: "#f1f5f9",
// slate-100
textDim: "#94a3b8"
// slate-400
},
network: {
// six-stop sequential for degree-coloured nodes lives in sequential();
// these fields cover axes, labels, stage
accent: "#6366f1",
// indigo-500 — low-degree nodes
accent2: "#ef4444",
// red-500 — high-degree nodes
dim: "#334155",
// slate-700
surface: "#0f172a",
// slate-900
text: "#f8fafc",
// slate-50
textDim: "#94a3b8"
// slate-400
},
algo: {
accent: "#0ea5e9",
// sky-500 — compare highlight
accent2: "#f43f5e",
// rose-500 — swap highlight
dim: "#334155",
// slate-700
surface: "#0f172a",
// slate-900
text: "#f8fafc",
textDim: "#94a3b8"
},
sequential,
viridis: (t) => sequential(VIRIDIS_STOPS, t),
magma: (t) => sequential(MAGMA_STOPS, t),
plasma: (t) => sequential(PLASMA_STOPS, t),
viridisStops: VIRIDIS_STOPS,
magmaStops: MAGMA_STOPS,
plasmaStops: PLASMA_STOPS
};
// docs/.readrun/widgets/loss-landscape.tsx
var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
var CMAPS = [
{ id: "viridis", label: "viridis" },
{ id: "magma", label: "magma" },
{ id: "plasma", label: "plasma" }
];
var OPTS = [
{ id: "sgd", label: "SGD" },
{ id: "momentum", label: "Momentum" }
];
var X_DOMAIN = [-2, 4];
var Y_DOMAIN = [-2, 2];
function loss(x, y) {
return 1.2 * (x - 1) * (x - 1) + 0.6 * (y + 0.5) * (y + 0.5) + 0.6 * Math.sin(2 * x) * Math.cos(2 * y);
}
function grad(x, y) {
return [
2 * 1.2 * (x - 1) + 1.2 * Math.cos(2 * x) * Math.cos(2 * y),
2 * 0.6 * (y + 0.5) - 1.2 * Math.sin(2 * x) * Math.sin(2 * y)
];
}
var W = 520;
var H = 380;
var INNER_W = W - 50;
var INNER_H = H - 40;
var N = 80;
function LossLandscape() {
const [start, setStart] = (0, import_react9.useState)([-1, 1.5]);
const [cmap, setCmap] = (0, import_react9.useState)("viridis");
const [opt, setOpt] = (0, import_react9.useState)("momentum");
const [lr, setLr] = (0, import_react9.useState)(0.06);
const [steps, setSteps] = (0, import_react9.useState)(80);
const xScale = scale.linear({ domain: X_DOMAIN, range: [0, INNER_W] });
const yScale = scale.linear({ domain: Y_DOMAIN, range: [INNER_H, 0] });
const grid = (0, import_react9.useMemo)(() => {
const g = [];
for (let i = 0; i < N; i++) {
g[i] = [];
for (let j = 0; j < N; j++) {
const x = X_DOMAIN[0] + i / (N - 1) * (X_DOMAIN[1] - X_DOMAIN[0]);
const y = Y_DOMAIN[0] + j / (N - 1) * (Y_DOMAIN[1] - Y_DOMAIN[0]);
g[i][j] = loss(x, y);
}
}
return g;
}, []);
const path = (0, import_react9.useMemo)(() => {
let x = start[0];
let y = start[1];
let mx = 0;
let my = 0;
const out = [[x, y]];
for (let i = 0; i < steps; i++) {
const [gx, gy] = grad(x, y);
if (opt === "sgd") {
x -= lr * gx;
y -= lr * gy;
} else {
mx = 0.9 * mx + gx;
my = 0.9 * my + gy;
x -= lr * mx;
y -= lr * my;
}
out.push([x, y]);
}
return out;
}, [start, steps, opt, lr]);
const finalLoss = loss(path[path.length - 1][0], path[path.length - 1][1]);
const cellToData = (i, j) => [
X_DOMAIN[0] + i / (N - 1) * (X_DOMAIN[1] - X_DOMAIN[0]),
Y_DOMAIN[0] + j / (N - 1) * (Y_DOMAIN[1] - Y_DOMAIN[0])
];
const toScreen = (x, y) => [xScale(x), yScale(y)];
const pathPoly = path.map(([x, y]) => toScreen(x, y).join(",")).join(" ");
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
WidgetLayout,
{
arrangement: "visual-left",
title: "Loss Landscape",
subtitle: "Click anywhere on the heatmap to drop the start point. The optimiser path overlays in real time.",
children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(WidgetLayout.Visual, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Frame,
{
width: W,
height: H,
xScale,
yScale,
margin: { top: 10, right: 10, bottom: 30, left: 40 },
xLabel: "x",
yLabel: "y",
children: ({ innerWidth, innerHeight }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Heatmap,
{
data: grid,
width: innerWidth,
height: innerHeight,
colorScale: palette[cmap],
onCellClick: (i, j) => setStart(cellToData(i, j))
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"polyline",
{
points: pathPoly,
fill: "none",
stroke: "var(--viz-warn)",
strokeWidth: 2.5,
opacity: 0.95,
pointerEvents: "none"
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"circle",
{
cx: xScale(start[0]),
cy: yScale(start[1]),
r: 7,
fill: "var(--viz-warn)",
stroke: "var(--bg)",
strokeWidth: 2,
pointerEvents: "none"
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"circle",
{
cx: xScale(path[path.length - 1][0]),
cy: yScale(path[path.length - 1][1]),
r: 5,
fill: "var(--viz-positive)",
stroke: "var(--bg)",
strokeWidth: 1.5,
pointerEvents: "none"
}
)
] })
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(WidgetLayout.Controls, { children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: 16, marginBottom: 12, flexWrap: "wrap" }, children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Stat, { label: "loss", value: finalLoss.toFixed(4) }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Stat, { label: "x", value: path[path.length - 1][0].toFixed(3) }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Stat, { label: "y", value: path[path.length - 1][1].toFixed(3) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tabs, { value: opt, onChange: (id) => setOpt(id), items: OPTS }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tabs, { value: cmap, onChange: (id) => setCmap(id), items: CMAPS }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Slider2, { label: "learning rate", value: lr, min: 5e-3, max: 0.25, step: 5e-3, onChange: setLr }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Slider2, { label: "steps", value: steps, min: 5, max: 250, step: 1, onChange: setSteps }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Btn, { kind: "ghost", onClick: () => setStart([-1, 1.5]), children: "Reset start" }) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(WidgetLayout.Aside, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ul", { style: { margin: 0, paddingLeft: 18, lineHeight: 1.55 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: "The surface is a paraboloid + a sin\xB7cos ripple, so optimisers can stall in local dips." }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: "Click placements update the start; the path recomputes from there." }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: "Momentum smooths through ripples that trap plain SGD." })
] }) })
]
}
);
}
// docs/.readrun/widgets/loss-landscape.readrun-entry.ts
render(<LossLandscape />);
/*! Bundled license information:
use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
(**
* @license React
* use-sync-external-store-shim.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*)
*/