@jcsoftdev/ui 0.1.7 → 0.2.0

package/dist/calendar/week-view/week-view.js

@@ -34,7 +34,8 @@ function WeekView({
   allDayLabel,
   onOpenEvent,
   onOpenMarker,
-  className
+  className,
+  classNames
 }) {
   const scrollRef = useRef(null);
   const first = startOfWeek(week, weekStartsOn);
@@ -45,127 +46,157 @@ function WeekView({
       scrollRef.current.scrollTop = INITIAL_SCROLL_HOUR * PX_PER_HOUR;
     }
   }, []);
-  return /* @__PURE__ */ jsx("div", { className: cn("@container/week min-w-0", className), children: /* @__PURE__ */ jsx("div", { ref: scrollRef, "data-hours-scroll": true, className: "max-h-150 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-[820px] flex-col @max-[40rem]/week:min-w-[836px]", children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("sticky top-0 z-20 grid bg-surface", COLUMNS), children: [
-      /* @__PURE__ */ jsx("div", { className: GUTTER }),
-      days.map((date) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-date": date,
-          "data-today": date === today || void 0,
-          className: cn(
-            "flex h-10 min-w-0 items-center truncate whitespace-nowrap border-b-divider px-2 text-meta text-ink-3",
-            date === today && "text-accent-ink"
-          ),
-          children: formatWeekdayAndDay(date, locale)
-        },
-        date
-      ))
-    ] }),
-    /* @__PURE__ */ jsxs("div", { "data-all-day-row": true, className: cn("sticky top-10 z-20 grid bg-surface", COLUMNS), children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            GUTTER,
-            "whitespace-nowrap border-b-divider px-1.5 pt-2.5 text-right text-meta text-ink-3"
-          ),
-          children: allDayLabel
-        }
-      ),
-      days.map((date) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex min-h-10 flex-col gap-1 border-b-divider border-l-divider p-1",
-          children: [
-            markers.filter((marker) => marker.date === date).map((marker) => /* @__PURE__ */ jsx(DayChip, { marker, onOpen: onOpenMarker }, marker.id)),
-            events.filter((event) => event.date === date && event.allDay).map((event) => /* @__PURE__ */ jsx("div", { "data-event": event.id, children: /* @__PURE__ */ jsx(EventBlock, { event, variant: "compact", onOpen: onOpenEvent }) }, event.id))
-          ]
-        },
-        date
-      ))
-    ] }),
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: cn("grid", COLUMNS), style: { height: HOURS.length * PX_PER_HOUR }, children: [
-      /* @__PURE__ */ jsx("div", { className: GUTTER, children: HOURS.map((hour) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "-translate-y-1/2 absolute right-2 whitespace-nowrap font-mono text-meta text-ink-3",
-          style: { top: hour * PX_PER_HOUR },
-          children: formatHour(hour, locale)
-        },
-        hour
-      )) }),
-      days.map((date) => {
-        const isToday = date === today;
-        const positioned = layoutDayEvents(
-          events.filter((event) => event.date === date && !event.allDay)
-        );
-        const nowMinutes = isToday && currentTime ? minutesSinceMidnight(currentTime) : void 0;
-        return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/week min-w-0", classNames?.root, className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scrollRef,
+      "data-hours-scroll": true,
+      className: cn("max-h-150 overflow-auto", classNames?.scroll),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-205 flex-col @max-[40rem]/week:min-w-209", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("sticky top-0 z-20 grid bg-surface", COLUMNS, classNames?.header), children: [
+          /* @__PURE__ */ jsx("div", { className: GUTTER }),
+          days.map((date) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-date": date,
+              "data-today": date === today || void 0,
+              className: cn(
+                "flex h-10 min-w-0 items-center truncate whitespace-nowrap border-b-divider px-2 text-meta text-ink-3",
+                date === today && "text-accent-ink",
+                classNames?.dayHeader
+              ),
+              children: formatWeekdayAndDay(date, locale)
+            },
+            date
+          ))
+        ] }),
+        /* @__PURE__ */ jsxs(
           "div",
           {
-            "data-date": date,
-            "data-hours-column": true,
-            "data-shaded": shaded.has(date) || void 0,
-            className: cn(
-              "relative border-l-divider bg-[linear-gradient(to_bottom,var(--line)_1px,transparent_1px)] bg-size-[100%_48px]",
-              isToday && "bg-accent-soft/40",
-              shaded.has(date) && SHADED_DAY_CLASS
-            ),
+            "data-all-day-row": true,
+            className: cn("sticky top-10 z-20 grid bg-surface", COLUMNS, classNames?.allDayRow),
             children: [
-              workingHours ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 "div",
                 {
-                  "data-working-hours": true,
-                  className: "pointer-events-none absolute inset-x-0 bg-accent-soft/30",
-                  style: {
-                    top: workingHours[0] * PX_PER_HOUR,
-                    height: (workingHours[1] - workingHours[0]) * PX_PER_HOUR
-                  }
+                  className: cn(
+                    GUTTER,
+                    "whitespace-nowrap border-b-divider px-1.5 pt-2.5 text-right text-meta text-ink-3",
+                    classNames?.allDayLabel
+                  ),
+                  children: allDayLabel
                 }
-              ) : null,
-              positioned.map(({ event, start, end, column, columns }) => {
-                const short = end - start <= 30;
-                const width = 100 / columns;
-                return /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "data-event": event.id,
-                    className: "absolute px-px",
-                    style: {
-                      top: start / 60 * PX_PER_HOUR,
-                      height: Math.max((end - start) / 60 * PX_PER_HOUR - 2, 18),
-                      left: `${column * width}%`,
-                      width: `${width}%`
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      EventBlock,
-                      {
-                        event,
-                        variant: short ? "compact" : "detailed",
-                        onOpen: onOpenEvent,
-                        className: "h-full"
-                      }
-                    )
-                  },
-                  event.id
-                );
-              }),
-              nowMinutes !== void 0 ? /* @__PURE__ */ jsx(
+              ),
+              days.map((date) => /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  "data-now-line": true,
-                  className: "pointer-events-none absolute inset-x-0 h-0.5 bg-danger",
-                  style: { top: nowMinutes / 60 * PX_PER_HOUR }
-                }
-              ) : null
+                  className: cn(
+                    "flex min-h-10 flex-col gap-1 border-b-divider border-l-divider p-1",
+                    classNames?.allDayCell
+                  ),
+                  children: [
+                    markers.filter((marker) => marker.date === date).map((marker) => /* @__PURE__ */ jsx(DayChip, { marker, onOpen: onOpenMarker }, marker.id)),
+                    events.filter((event) => event.date === date && event.allDay).map((event) => /* @__PURE__ */ jsx("div", { "data-event": event.id, children: /* @__PURE__ */ jsx(EventBlock, { event, variant: "compact", onOpen: onOpenEvent }) }, event.id))
+                  ]
+                },
+                date
+              ))
             ]
-          },
-          date
-        );
-      })
-    ] }) })
-  ] }) }) });
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: cn("grid", COLUMNS), style: { height: HOURS.length * PX_PER_HOUR }, children: [
+          /* @__PURE__ */ jsx("div", { className: GUTTER, children: HOURS.map((hour) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "-translate-y-1/2 absolute right-2 whitespace-nowrap font-mono text-meta text-ink-3",
+                classNames?.hourLabel
+              ),
+              style: { top: hour * PX_PER_HOUR },
+              children: formatHour(hour, locale)
+            },
+            hour
+          )) }),
+          days.map((date) => {
+            const isToday = date === today;
+            const positioned = layoutDayEvents(
+              events.filter((event) => event.date === date && !event.allDay)
+            );
+            const nowMinutes = isToday && currentTime ? minutesSinceMidnight(currentTime) : void 0;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-date": date,
+                "data-hours-column": true,
+                "data-shaded": shaded.has(date) || void 0,
+                className: cn(
+                  "relative border-l-divider bg-[linear-gradient(to_bottom,var(--line)_1px,transparent_1px)] bg-size-[100%_48px]",
+                  isToday && "bg-accent-soft/40",
+                  shaded.has(date) && SHADED_DAY_CLASS,
+                  classNames?.column
+                ),
+                children: [
+                  workingHours ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-working-hours": true,
+                      className: cn(
+                        "pointer-events-none absolute inset-x-0 bg-accent-soft/30",
+                        classNames?.workingHours
+                      ),
+                      style: {
+                        top: workingHours[0] * PX_PER_HOUR,
+                        height: (workingHours[1] - workingHours[0]) * PX_PER_HOUR
+                      }
+                    }
+                  ) : null,
+                  positioned.map(({ event, start, end, column, columns }) => {
+                    const short = end - start <= 30;
+                    const width = 100 / columns;
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-event": event.id,
+                        className: cn("absolute px-px", classNames?.event),
+                        style: {
+                          top: start / 60 * PX_PER_HOUR,
+                          height: Math.max((end - start) / 60 * PX_PER_HOUR - 2, 18),
+                          left: `${column * width}%`,
+                          width: `${width}%`
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          EventBlock,
+                          {
+                            event,
+                            variant: short ? "compact" : "detailed",
+                            onOpen: onOpenEvent,
+                            className: "h-full"
+                          }
+                        )
+                      },
+                      event.id
+                    );
+                  }),
+                  nowMinutes !== void 0 ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-now-line": true,
+                      className: cn(
+                        "pointer-events-none absolute inset-x-0 h-0.5 bg-danger",
+                        classNames?.nowLine
+                      ),
+                      style: { top: nowMinutes / 60 * PX_PER_HOUR }
+                    }
+                  ) : null
+                ]
+              },
+              date
+            );
+          })
+        ] }) })
+      ] })
+    }
+  ) });
 }
 export {
   WeekView

package/dist/charts/bar-chart/bar-race-chart.js

@@ -130,7 +130,7 @@ function BarRaceChart({
             className: "h-1.5 min-w-0 flex-1 cursor-pointer accent-(--accent)"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "min-w-12 text-right font-bold text-[12px] text-ink-2 tabular-nums", children: caption })
+        /* @__PURE__ */ jsx("span", { className: "min-w-12 text-right font-bold text-fs-120 text-ink-2 tabular-nums", children: caption })
       ] }),
       table: /* @__PURE__ */ jsx(
         ChartDataTable,
@@ -198,7 +198,7 @@ function RacePlot({
             x: width - 2,
             y: height - 6,
             textAnchor: "end",
-            className: "pointer-events-none font-extrabold text-[44px] tabular-nums",
+            className: "pointer-events-none font-extrabold text-fs-440 tabular-nums",
             style: { fill: "var(--ink-3)", fillOpacity: 0.22 },
             children: caption
           }
@@ -225,7 +225,7 @@ function RacePlot({
                 y: barHeight / 2,
                 dy: "0.34em",
                 textAnchor: "end",
-                className: "font-semibold text-[12px]",
+                className: "font-semibold text-fs-120",
                 style: { fill: "var(--ink-2)" },
                 children: entity.name
               }
@@ -236,7 +236,7 @@ function RacePlot({
                 x: length + 8,
                 y: barHeight / 2,
                 dy: "0.34em",
-                className: "font-bold text-[11px] tabular-nums",
+                className: "font-bold text-fs-110 tabular-nums",
                 style: { fill: "var(--ink-2)" },
                 children: fmt(item.value)
               }

package/dist/charts/bubble-map/bubble-map.js

@@ -456,7 +456,7 @@ function BubblePlot({
                       textAnchor: "middle",
                       dominantBaseline: "central",
                       pointerEvents: "none",
-                      className: "font-bold text-[11px]",
+                      className: "font-bold text-fs-110",
                       style: { fill: "var(--surface)" },
                       children: item.points.length
                     }

package/dist/charts/bullet-chart/bullet-chart.js

@@ -420,7 +420,7 @@ function BulletPlot({
                       x: centre,
                       y: -8,
                       textAnchor: "middle",
-                      className: "font-bold text-[11px] tabular-nums",
+                      className: "font-bold text-fs-110 tabular-nums",
                       style: { fill: "var(--ink-2)" },
                       children: fmt(item.actual)
                     }
@@ -432,7 +432,7 @@ function BulletPlot({
                       x: innerWidth + 10,
                       y: centre,
                       dy: "0.34em",
-                      className: "font-bold text-[11px] tabular-nums",
+                      className: "font-bold text-fs-110 tabular-nums",
                       style: { fill: "var(--ink-2)" },
                       children: item.target == null ? fmt(item.actual) : `${fmt(item.actual)} / ${fmt(item.target)}`
                     }

package/dist/charts/candlestick-chart/candlestick-chart.js

@@ -314,7 +314,7 @@ function CandlePlot({
                 y: 4,
                 dy: "0.34em",
                 textAnchor: "end",
-                className: "fill-ink-3 font-medium text-[10.5px] tabular-nums",
+                className: "fill-ink-3 font-medium text-fs-105 tabular-nums",
                 children: vfmt(maxVolume)
               }
             ),
@@ -403,7 +403,7 @@ function CandlePlot({
                   y: 0,
                   dy: "0.34em",
                   textAnchor: "middle",
-                  className: "font-bold text-[10.5px] tabular-nums",
+                  className: "font-bold text-fs-105 tabular-nums",
                   style: { fill: "var(--surface)" },
                   children: fmt(last.close)
                 }
@@ -433,7 +433,7 @@ function CandlePlot({
       {
         type: "button",
         onClick: () => setRange([0, data.length - 1]),
-        className: "absolute top-0 right-0 z-10 cursor-pointer rounded-button border-divider bg-surface-control px-2.5 py-1 font-semibold text-[11px] text-ink-2 hover:bg-surface-2",
+        className: "absolute top-0 right-0 z-10 cursor-pointer rounded-button border-divider bg-surface-control px-2.5 py-1 font-semibold text-fs-110 text-ink-2 hover:bg-surface-2",
         children: labels.resetZoom
       }
     ) : null,

package/dist/charts/chart-grid/chart-grid.js

@@ -81,11 +81,11 @@ function ChartGrid({
                         "h3",
                         {
                           id: headingId,
-                          className: "m-0 truncate font-bold text-[12.5px] text-ink-2 leading-tight",
+                          className: "m-0 truncate font-bold text-fs-125 text-ink-2 leading-tight",
                           children: panel.title
                         }
                       ),
-                      panel.subtitle ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-semibold text-[11.5px] text-ink-3 tabular-nums", children: panel.subtitle }) : null
+                      panel.subtitle ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-semibold text-fs-115 text-ink-3 tabular-nums", children: panel.subtitle }) : null
                     ] }),
                     /* @__PURE__ */ jsx("div", { className: "relative min-w-0", children: children(panel, {
                       index,

package/dist/charts/chord-chart/chord-chart.js

@@ -354,7 +354,7 @@ function ChordPlot({
                 x: at.x,
                 y: at.y + (cos > 0.4 ? -2 : cos < -0.4 ? 10 : 4),
                 textAnchor: sin > 0.25 ? "start" : sin < -0.25 ? "end" : "middle",
-                className: "pointer-events-none select-none fill-ink-2 font-semibold text-[11.5px]",
+                className: "pointer-events-none select-none fill-ink-2 font-semibold text-fs-115",
                 style: { opacity: dim ? 0.4 : 1, transition: "opacity 150ms" },
                 children: groups[group.index]?.name
               },

package/dist/charts/choropleth-map/choropleth-map.js

@@ -90,7 +90,7 @@ function ChoroplethMap({
           "aria-pressed": tableOpen,
           onClick: () => setTableOpen((open) => !open),
           className: cn(
-            "cursor-pointer rounded-button border-0 px-3 py-1 font-semibold text-[12px] outline-none focus-visible:outline-2 focus-visible:outline-accent-ink",
+            "cursor-pointer rounded-button border-0 px-3 py-1 font-semibold text-fs-120 outline-none focus-visible:outline-2 focus-visible:outline-accent-ink",
             tableOpen ? "bg-surface-2 text-ink" : "bg-surface-2 text-ink-3 hover:text-ink"
           ),
           children: tableOpen ? labels.showMap : labels.showTable

package/dist/charts/core/axes.js

@@ -12,7 +12,7 @@ function thinTicks(ticks, gap = 10) {
   const every = Math.max(1, Math.ceil((widest + gap) / spacing));
   return ticks.filter((_, index) => index % every === 0);
 }
-const TEXT = "fill-ink-3 font-medium text-[11px] tabular-nums";
+const TEXT = "fill-ink-3 font-medium text-fs-110 tabular-nums";
 const GridLines = memo(function GridLines2({
   ticks,
   direction,
@@ -70,7 +70,7 @@ const AxisLeft = memo(function AxisLeft2({ ticks, offset, title, color }) {
         x: -10,
         y: -16,
         textAnchor: "end",
-        className: "fill-ink-3 font-bold text-[10.5px]",
+        className: "fill-ink-3 font-bold text-fs-105",
         style: color ? { fill: color } : void 0,
         children: title
       }
@@ -98,7 +98,7 @@ const AxisRight = memo(function AxisRight2({ ticks, offset, title, color }) {
         x: 10,
         y: -16,
         textAnchor: "start",
-        className: "fill-ink-3 font-bold text-[10.5px]",
+        className: "fill-ink-3 font-bold text-fs-105",
         style: color ? { fill: color } : void 0,
         children: title
       }

package/dist/charts/core/breadcrumb.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 function ChartBreadcrumb({ items, onSelect, label, className }) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": label, className: cn("min-w-0", className), children: /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none flex-wrap items-center gap-1 p-0 text-[12px]", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, className: cn("min-w-0", className), children: /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none flex-wrap items-center gap-1 p-0 text-fs-120", children: items.map((item, index) => {
     const current = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: "flex min-w-0 max-w-[12rem] items-center gap-1", children: [
       index > 0 ? /* @__PURE__ */ jsx(

package/dist/charts/core/cartesian/annotations.js

@@ -21,7 +21,7 @@ function Pill({
         y,
         dy: "0.35em",
         textAnchor: "middle",
-        className: "font-bold text-[10.5px]",
+        className: "font-bold text-fs-105",
         style: { fill: ink },
         children: text
       }
@@ -64,7 +64,7 @@ const AnnotationLayer = memo(function AnnotationLayer2({
             paintOrder: "stroke",
             strokeWidth: 3,
             strokeLinejoin: "round",
-            className: "stroke-surface font-bold text-[11px]",
+            className: "stroke-surface font-bold text-fs-110",
             style: { fill: ink },
             children: note.label
           }
@@ -89,7 +89,7 @@ const AnnotationLayer = memo(function AnnotationLayer2({
           {
             x: (horizontal ? 0 : note.from) + 6,
             y: (horizontal ? note.from : 0) + 13,
-            className: "font-bold text-[10.5px]",
+            className: "font-bold text-fs-105",
             style: { fill: ink },
             children: note.label
           }

package/dist/charts/core/cartesian/cartesian-chart.js

@@ -1027,7 +1027,7 @@ function CartesianPlot({
       {
         type: "button",
         onClick: () => onRangeChange(null),
-        className: "absolute top-0 right-0 inline-flex h-7 cursor-pointer items-center gap-1 rounded-button border-0 bg-surface-2 px-3 font-semibold text-[12px] text-ink-2 hover:bg-sunken hover:text-ink",
+        className: "absolute top-0 right-0 inline-flex h-7 cursor-pointer items-center gap-1 rounded-button border-0 bg-surface-2 px-3 font-semibold text-fs-120 text-ink-2 hover:bg-sunken hover:text-ink",
         children: [
           /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
             "path",

package/dist/charts/core/cartesian/category-group-axis.js

@@ -27,7 +27,7 @@ function CategoryGroupAxis({
         x: span.center,
         y: 19,
         textAnchor: "middle",
-        className: "font-bold text-[12px]",
+        className: "font-bold text-fs-120",
         style: { fill: "var(--ink-2)" },
         children: fit(span.label, span.to - span.from - 8)
       }

package/dist/charts/core/cartesian/ink-layer.js

@@ -321,7 +321,7 @@ function Ruler({
     )
   ] });
 }
-const buttonClass = "inline-flex h-7 cursor-pointer items-center rounded-button border-0 px-3 font-semibold text-[12px] outline-none focus-visible:outline-2 focus-visible:outline-accent-ink disabled:cursor-not-allowed disabled:opacity-40";
+const buttonClass = "inline-flex h-7 cursor-pointer items-center rounded-button border-0 px-3 font-semibold text-fs-120 outline-none focus-visible:outline-2 focus-visible:outline-accent-ink disabled:cursor-not-allowed disabled:opacity-40";
 function ChartInkToolbar({ ink, className }) {
   const { labels } = ink;
   const tool = (id) => /* @__PURE__ */ jsx(

package/dist/charts/core/cartesian/marks.js

@@ -95,7 +95,7 @@ const DataLabels = memo(function DataLabels2({ geometry, dimmed }) {
       strokeWidth: label.inside ? 0 : 3,
       strokeLinejoin: "round",
       className: cn(
-        "font-bold text-[10.5px] tabular-nums",
+        "font-bold text-fs-105 tabular-nums",
         label.inside ? "fill-surface" : "fill-ink-2 stroke-surface"
       ),
       children: label.text

package/dist/charts/core/chart-states.js

@@ -39,7 +39,7 @@ function ChartSkeleton({ height, label, shape = "bars", className }) {
         ) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-end gap-[3%] border-b-divider px-[2%]", children: SKELETON_BARS.map((ratio) => /* @__PURE__ */ jsx(
           "span",
           {
-            className: "flex-1 rounded-t-[6px] bg-surface-2",
+            className: "flex-1 rounded-t-chip bg-surface-2",
             style: { height: `${ratio * 100}%` }
           },
           ratio
@@ -68,7 +68,7 @@ function ChartEmpty({ height, label, className }) {
             strokeLinecap: "round"
           }
         ) }),
-        /* @__PURE__ */ jsx("p", { className: "m-0 font-semibold text-[13px] text-ink-3", children: label })
+        /* @__PURE__ */ jsx("p", { className: "m-0 font-semibold text-fs-130 text-ink-3", children: label })
       ]
     }
   );

package/dist/charts/core/distribution/layout.js

@@ -171,7 +171,7 @@ function tooltipFit(width) {
   if (width >= 480) return { containerWidth: width };
   return {
     containerWidth: width * 1.2,
-    className: "min-w-[112px] max-w-[calc(50cqw-16px)]"
+    className: "min-w-28 max-w-[calc(50cqw-16px)]"
   };
 }
 export {

package/dist/charts/core/distribution/marks.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { AxisBottom, AxisLeft, GridLines } from "../axes.js";
 import { ChartDataTable } from "../data-table.js";
-const TITLE = "fill-ink-3 font-bold text-[10.5px]";
+const TITLE = "fill-ink-3 font-bold text-fs-105";
 const CategoryAxes = memo(function CategoryAxes2({
   layout,
   title,
@@ -26,7 +26,7 @@ const CategoryAxes = memo(function CategoryAxes2({
           y: tick.position,
           dy: "0.34em",
           textAnchor: "end",
-          className: "fill-ink-2 font-semibold text-[12px]",
+          className: "fill-ink-2 font-semibold text-fs-120",
           children: tick.label
         },
         tick.key

package/dist/charts/core/distribution/xy-points.js

@@ -179,7 +179,7 @@ function SizeKey({
     r: maxRadius * Math.sqrt(share)
   }));
   const box = maxRadius * 2 + 2;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 px-2 text-[12px] text-ink-3", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 px-2 text-fs-120 text-ink-3", children: [
     /* @__PURE__ */ jsx("span", { className: "font-semibold", children: label }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-end gap-x-3 gap-y-1", children: steps.map((step) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: box, height: box, className: "shrink-0", children: /* @__PURE__ */ jsx(
@@ -741,7 +741,7 @@ function XYPointPlot({
           x: Math.min(trend.x2, innerWidth) - 4,
           y: trend.y2 - 8,
           textAnchor: "end",
-          className: "font-bold text-[10.5px] tabular-nums",
+          className: "font-bold text-fs-105 tabular-nums",
           style: { fill: trend.series.color },
           children: `R\xB2 ${formatNumber(trend.fit.r2, { maximumFractionDigits: 2 })}`
         }
@@ -761,7 +761,7 @@ function XYPointPlot({
           dy: "0.34em",
           textAnchor: inside ? "middle" : "start",
           className: cn(
-            "pointer-events-none font-semibold text-[11px] transition-opacity duration-150",
+            "pointer-events-none font-semibold text-fs-110 transition-opacity duration-150",
             inside ? "fill-ink" : "fill-ink-2"
           ),
           style: { opacity: isDimmed(point.series.id) ? 0.2 : 1 },
@@ -860,7 +860,7 @@ function XYPointPlot({
                         x: left ? 8 : innerWidth - 8,
                         y: top ? 16 : innerHeight - 8,
                         textAnchor: left ? "start" : "end",
-                        className: "font-bold text-[11px]",
+                        className: "font-bold text-fs-110",
                         style: { fill: tone ? TONE_COLORS[tone].ink : "var(--ink-3)" },
                         children: truncateLabel(text, half(innerWidth))
                       },

package/dist/charts/core/export-menu.js

@@ -37,7 +37,7 @@ function ExportMenu({
             type: "button",
             "aria-label": `${texts.export} ${texts[kind]}`,
             onClick: () => run(kind),
-            className: "cursor-pointer rounded-button px-2 py-1 font-semibold text-[11.5px] text-ink-3 outline-none hover:bg-surface hover:text-ink focus-visible:outline-2 focus-visible:outline-accent-ink",
+            className: "cursor-pointer rounded-button px-2 py-1 font-semibold text-fs-115 text-ink-3 outline-none hover:bg-surface hover:text-ink focus-visible:outline-2 focus-visible:outline-accent-ink",
             children: texts[kind]
           },
           kind

package/dist/charts/core/legend.js

@@ -21,7 +21,7 @@ function Swatch({ color, shape = "square" }) {
     "span",
     {
       "aria-hidden": "true",
-      className: cn("size-2.5 shrink-0", shape === "dot" ? "rounded-pill" : "rounded-[3px]"),
+      className: cn("size-2.5 shrink-0", shape === "dot" ? "rounded-pill" : "rounded-xs"),
       style: { background: color }
     }
   );
@@ -49,7 +49,7 @@ function ChartLegend({
           /* @__PURE__ */ jsx("span", { className: "truncate", children: item.name })
         ] });
         const itemClass = cn(
-          "inline-flex max-w-[220px] items-center gap-1.5 rounded-pill px-2 py-1 font-semibold text-[12px] text-ink-2 transition-[opacity,background-color] duration-150",
+          "inline-flex max-w-[220px] items-center gap-1.5 rounded-pill px-2 py-1 font-semibold text-fs-120 text-ink-2 transition-[opacity,background-color] duration-150",
           item.hidden && "opacity-45 [&>span:last-child]:line-through"
         );
         return /* @__PURE__ */ jsx("li", { children: onToggle ? /* @__PURE__ */ jsx(