@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/containers/comment/comment.js

@@ -23,7 +23,7 @@ function Comment({
       role: "note",
       "aria-label": label,
       className: cn(
-        "mx-4 mb-3.5 break-words rounded-control px-3 py-2.5 text-[12.5px]",
+        "mx-4 mb-3.5 break-words rounded-control px-3 py-2.5 text-fs-125",
         toneClasses[tone],
         className
       ),

package/dist/containers/confirm-action/confirm-action.d.ts

@@ -1,5 +1,7 @@
 import { type ButtonVariant } from "../../atoms/button/button.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { type ConfirmResult } from "./model.js";
+export type ConfirmActionPart = "root" | "trigger" | "consequence" | "error" | "actions" | "confirm" | "cancel";
 export interface ConfirmActionProps {
     /** Trigger label, a verb in the user's words ("Cancel order"). */
     label: string;
@@ -12,6 +14,8 @@ export interface ConfirmActionProps {
     onConfirm: () => Promise<ConfirmResult> | Promise<void>;
     triggerVariant?: ButtonVariant;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<ConfirmActionPart>;
 }
 /** Inline two-step confirmation for a destructive action; no modal, no lost context. */
-export declare function ConfirmAction({ label, consequence, confirmLabel, cancelLabel, onConfirm, triggerVariant, className, }: ConfirmActionProps): import("react").JSX.Element;
+export declare function ConfirmAction({ label, consequence, confirmLabel, cancelLabel, onConfirm, triggerVariant, className, classNames, }: ConfirmActionProps): import("react").JSX.Element;

package/dist/containers/confirm-action/confirm-action.js

@@ -13,7 +13,8 @@ function ConfirmAction({
   cancelLabel,
   onConfirm,
   triggerVariant = "secondary",
-  className
+  className,
+  classNames
 }) {
   const strings = useUiStrings();
   const consequenceId = useId();
@@ -35,32 +36,52 @@ function ConfirmAction({
     else setConfirming(false);
   }
   if (!confirming) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
-      failure === null ? null : /* @__PURE__ */ jsx(Banner, { tone: "danger", children: failure }),
-      /* @__PURE__ */ jsx(Button, { ref: triggerRef, variant: triggerVariant, onClick: () => setConfirming(true), children: label })
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", classNames?.root, className), children: [
+      failure === null ? null : /* @__PURE__ */ jsx(Banner, { tone: "danger", className: classNames?.error, children: failure }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref: triggerRef,
+          variant: triggerVariant,
+          className: classNames?.trigger,
+          onClick: () => setConfirming(true),
+          children: label
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs(
     "fieldset",
     {
       "aria-describedby": consequenceId,
-      className: cn("m-0 flex min-w-0 flex-col gap-3 border-0 p-0", className),
+      className: cn("m-0 flex min-w-0 flex-col gap-3 border-0 p-0", classNames?.root, className),
       children: [
         /* @__PURE__ */ jsx("legend", { className: "sr-only", children: label }),
-        /* @__PURE__ */ jsx("p", { id: consequenceId, className: "text-body text-ink", children: consequence }),
-        failure === null ? null : /* @__PURE__ */ jsx(Banner, { tone: "danger", children: failure }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx("p", { id: consequenceId, className: cn("text-body text-ink", classNames?.consequence), children: consequence }),
+        failure === null ? null : /* @__PURE__ */ jsx(Banner, { tone: "danger", className: classNames?.error, children: failure }),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap gap-2", classNames?.actions), children: [
           /* @__PURE__ */ jsx(
             Button,
             {
               variant: "danger",
+              className: classNames?.confirm,
               loading: busy,
               loadingLabel: strings.processing,
               onClick: () => void confirm(),
               children: confirmLabel ?? strings.confirm
             }
           ),
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: busy, autoFocus: true, onClick: () => setConfirming(false), children: cancelLabel ?? strings.cancel })
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              className: classNames?.cancel,
+              disabled: busy,
+              autoFocus: true,
+              onClick: () => setConfirming(false),
+              children: cancelLabel ?? strings.cancel
+            }
+          )
         ] })
       ]
     }

package/dist/containers/data-grid/chart-panel.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { BarChart2, X } from "lucide-react";
 import { useMemo } from "react";
 import { AreaChart } from "../../charts/area-chart/area-chart.js";
 import { BarChart } from "../../charts/bar-chart/bar-chart.js";
 import { LineChart } from "../../charts/line-chart/line-chart.js";
 import { PieChart } from "../../charts/pie-chart/pie-chart.js";
+import { BarChart2, X } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   availableKinds,
   pieSlices
 } from "./chart-range.js";
-const buttonClass = "inline-flex h-7 items-center rounded-xs px-2 font-[600] text-[12px] text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink";
+const buttonClass = "inline-flex h-7 items-center rounded-xs px-2 font-[600] text-fs-120 text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink";
 function ChartPanel({
   data,
   kind,
@@ -36,7 +36,7 @@ function ChartPanel({
       children: [
         /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center gap-2 px-3 pt-2", children: [
           /* @__PURE__ */ jsx(BarChart2, { "aria-hidden": "true", className: "size-4 shrink-0 text-ink-3" }),
-          /* @__PURE__ */ jsx("h3", { className: "mr-auto min-w-0 truncate font-[650] text-[13px] text-ink", children: labels.title }),
+          /* @__PURE__ */ jsx("h3", { className: "mr-auto min-w-0 truncate font-[650] text-fs-130 text-ink", children: labels.title }),
           data ? /* @__PURE__ */ jsxs("fieldset", { className: "flex h-control-sm items-center rounded-control border-divider bg-surface-control p-0.5", children: [
             /* @__PURE__ */ jsx("legend", { className: "sr-only", children: labels.kindGroup }),
             kinds.map((option) => /* @__PURE__ */ jsx(
@@ -104,7 +104,7 @@ function ChartPanel({
             valueFormat,
             animate: false
           }
-        ) }) : /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-[13px] text-ink-3", children: labels.noData })
+        ) }) : /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-fs-130 text-ink-3", children: labels.noData })
       ]
     }
   );

package/dist/containers/data-grid/column-menu.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
 import {
   ArrowDown,
   ArrowLeft,
@@ -16,8 +17,7 @@ import {
   PinOff,
   Plus,
   X
-} from "lucide-react";
-import { useId, useState } from "react";
+} from "../../icons/index.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../overlays/popover/popover.js";
 import { cn } from "../../utils/cn.js";
 import {
@@ -27,8 +27,8 @@ import {
   searchOptions,
   toggleSetValues
 } from "./model.js";
-const itemClass = "flex min-h-8 w-full items-center gap-2 rounded-xs px-2 text-left text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink focus-visible:bg-surface-2 focus-visible:text-ink disabled:pointer-events-none disabled:opacity-40 aria-pressed:text-accent-ink [&_svg]:size-3.5 [&_svg]:shrink-0";
-const inputClass = "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
+const itemClass = "flex min-h-8 w-full items-center gap-2 rounded-xs px-2 text-left text-fs-130 text-ink-2 hover:bg-surface-2 hover:text-ink focus-visible:bg-surface-2 focus-visible:text-ink disabled:pointer-events-none disabled:opacity-40 aria-pressed:text-accent-ink [&_svg]:size-3.5 [&_svg]:shrink-0";
+const inputClass = "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-fs-130 text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
 function Item({
   icon: Icon,
   children,
@@ -42,7 +42,7 @@ function Item({
 }
 function Section({ children, label }) {
   return /* @__PURE__ */ jsxs("div", { className: "border-t-divider py-1 first:border-t-0 first:pt-0 last:pb-0", children: [
-    label ? /* @__PURE__ */ jsx("p", { className: "px-2 pt-1 pb-1.5 font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]", children: label }) : null,
+    label ? /* @__PURE__ */ jsx("p", { className: "px-2 pt-1 pb-1.5 font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em]", children: label }) : null,
     children
   ] });
 }
@@ -78,7 +78,7 @@ function SetFilterEditor({
     ),
     /* @__PURE__ */ jsxs("fieldset", { className: "grid max-h-48 gap-0.5 overflow-y-auto", children: [
       /* @__PURE__ */ jsx("legend", { className: "sr-only", children: `${labels.filter}: ${column.header}` }),
-      /* @__PURE__ */ jsxs("label", { className: "flex min-h-7 items-center gap-2 border-b-divider px-1 text-[13px] text-ink-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex min-h-7 items-center gap-2 border-b-divider px-1 text-fs-130 text-ink-2", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -93,14 +93,14 @@ function SetFilterEditor({
           }
         ),
         /* @__PURE__ */ jsx("span", { className: "flex-1", children: labels.selectAllValues }),
-        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-ink-3 tabular-nums", children: labels.valuesChecked(checked.size, options.length) })
+        /* @__PURE__ */ jsx("span", { className: "text-fs-110 text-ink-3 tabular-nums", children: labels.valuesChecked(checked.size, options.length) })
       ] }),
-      visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-1.5 text-[13px] text-ink-3", children: labels.noMatches }) : null,
+      visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-1.5 text-fs-130 text-ink-3", children: labels.noMatches }) : null,
       visible.map((value, index) => /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: `${id}-${index}`,
-          className: "flex min-h-7 items-center gap-2 px-1 text-[13px] text-ink",
+          className: "flex min-h-7 items-center gap-2 px-1 text-fs-130 text-ink",
           children: [
             /* @__PURE__ */ jsx(
               "input",
@@ -163,7 +163,7 @@ function FilterEditor({
   if (kind === "dateRange") {
     const range = filter?.kind === "dateRange" ? filter : { kind: "dateRange" };
     return /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: ["from", "to"].map((end) => /* @__PURE__ */ jsxs("label", { className: "grid grid-cols-[3.5rem_1fr] items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-[12px] text-ink-3", children: labels[end] }),
+      /* @__PURE__ */ jsx("span", { className: "text-fs-120 text-ink-3", children: labels[end] }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -195,7 +195,7 @@ function FilterEditor({
   };
   return /* @__PURE__ */ jsxs("fieldset", { className: "grid max-h-48 gap-0.5 overflow-y-auto", children: [
     /* @__PURE__ */ jsx("legend", { className: "sr-only", children: `${labels.filter}: ${name}` }),
-    /* @__PURE__ */ jsxs("label", { className: "flex min-h-7 items-center gap-2 px-1 text-[13px] text-ink-2", children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex min-h-7 items-center gap-2 px-1 text-fs-130 text-ink-2", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -211,7 +211,7 @@ function FilterEditor({
       "label",
       {
         htmlFor: `${id}-${index}`,
-        className: "flex min-h-7 items-center gap-2 px-1 text-[13px] text-ink",
+        className: "flex min-h-7 items-center gap-2 px-1 text-fs-130 text-ink",
         children: [
           /* @__PURE__ */ jsx(
             "input",

package/dist/containers/data-grid/data-grid.demos.js

@@ -21,7 +21,7 @@ import { describeFilter, emptyGroup } from "./filter-builder.js";
 import { FilterBuilder } from "./filter-builder-editor.js";
 import { DEFAULT_DATA_GRID_LABELS } from "./labels.js";
 import { distinctValues } from "./model.js";
-const note = "text-[12.5px] text-ink-3";
+const note = "text-fs-125 text-ink-3";
 function Stack({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "grid gap-2", children });
 }
@@ -118,7 +118,7 @@ function ExpansionDemo({ density, height }) {
       defaultPinned: { left: ["id"] },
       detailHeight: 116,
       defaultExpandedRowIds: ["V-1002"],
-      renderDetail: (row) => /* @__PURE__ */ jsx("dl", { className: "grid gap-x-6 gap-y-2 text-[13px] @sm/grid:grid-cols-3", children: [
+      renderDetail: (row) => /* @__PURE__ */ jsx("dl", { className: "grid gap-x-6 gap-y-2 text-fs-130 @sm/grid:grid-cols-3", children: [
         ["Cliente", row.cliente],
         ["Barbero", row.barbero],
         ["Servicio", row.servicio],
@@ -126,7 +126,7 @@ function ExpansionDemo({ density, height }) {
         ["Total", formatCurrency(row.total)],
         ["Propina", row.propina ? formatCurrency(row.propina) : "Sin propina"]
       ].map(([term, value]) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx("dt", { className: "text-[11px] text-ink-3 uppercase tracking-[.07em]", children: term }),
+        /* @__PURE__ */ jsx("dt", { className: "text-fs-110 text-ink-3 uppercase tracking-[.07em]", children: term }),
         /* @__PURE__ */ jsx("dd", { className: "truncate font-[600] text-ink", children: value })
       ] }, term)) })
     }
@@ -207,7 +207,7 @@ function PersistenceGrid({ density, height, onReset }) {
           {
             type: "button",
             onClick: reset,
-            className: "inline-flex h-control-sm items-center rounded-control border-divider bg-surface-control px-2.5 font-[600] text-[12.5px] text-ink-2 hover:border-line-strong hover:text-ink",
+            className: "inline-flex h-control-sm items-center rounded-control border-divider bg-surface-control px-2.5 font-[600] text-fs-125 text-ink-2 hover:border-line-strong hover:text-ink",
             children: "Restablecer todo"
           }
         )
@@ -262,7 +262,7 @@ function KeyboardDemo({ density }) {
             rangeSelection: true,
             defaultPinned: { left: ["producto"] },
             detailHeight: 72,
-            renderDetail: (row) => /* @__PURE__ */ jsxs("p", { className: "text-[13px] text-ink-2", children: [
+            renderDetail: (row) => /* @__PURE__ */ jsxs("p", { className: "text-fs-130 text-ink-2", children: [
               row.producto,
               ": ",
               row.stock,
@@ -284,14 +284,14 @@ function KeyboardDemo({ density }) {
         )
       }
     ),
-    /* @__PURE__ */ jsxs("p", { className: "text-[13px] text-ink", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-fs-130 text-ink", "aria-live": "polite", children: [
       "Celda activa: ",
       /* @__PURE__ */ jsx("b", { className: "font-[650]", children: where })
     ] }),
-    /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-[12.5px]", children: [
+    /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-left text-fs-125", children: [
       /* @__PURE__ */ jsx("caption", { className: "sr-only", children: "Atajos de teclado" }),
       /* @__PURE__ */ jsx("tbody", { children: SHORTCUTS.map(([keys, action]) => /* @__PURE__ */ jsxs("tr", { className: "border-t-divider", children: [
-        /* @__PURE__ */ jsx("th", { scope: "row", className: "w-1/2 py-1.5 pr-3 font-[600] text-ink", children: /* @__PURE__ */ jsx("kbd", { className: "font-mono text-[12px]", children: keys }) }),
+        /* @__PURE__ */ jsx("th", { scope: "row", className: "w-1/2 py-1.5 pr-3 font-[600] text-ink", children: /* @__PURE__ */ jsx("kbd", { className: "font-mono text-fs-120", children: keys }) }),
         /* @__PURE__ */ jsx("td", { className: "py-1.5 text-ink-2", children: action })
       ] }, keys)) })
     ] })
@@ -314,7 +314,7 @@ function TreeDemo({ density, height }) {
   );
 }
 function RequestLog({ entries, label }) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-card border-card shadow-card p-2 text-[12px] text-ink-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-card border-card shadow-card p-2 text-fs-120 text-ink-2", children: [
     /* @__PURE__ */ jsxs("p", { className: "font-[650] text-ink", children: [
       label,
       ": ",
@@ -364,7 +364,7 @@ function RemotePaginationDemo({ density, height }) {
         defaultPinned: { left: ["id"] }
       }
     ),
-    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-[13px] text-ink", children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-fs-130 text-ink", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -407,7 +407,7 @@ function InfiniteScrollDemo({ density, height }) {
         defaultPinned: { left: ["id"] }
       }
     ),
-    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-[13px] text-ink", children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-fs-130 text-ink", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -467,7 +467,7 @@ function FilterBuilderDemo({ density, height }) {
           }
         }
       ),
-      /* @__PURE__ */ jsxs("p", { className: "mt-3 border-t-divider pt-2 text-[12.5px] text-ink-3", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mt-3 border-t-divider pt-2 text-fs-125 text-ink-3", children: [
         text ? `Filtro: ${text}` : "Sin filtro activo.",
         " ",
         /* @__PURE__ */ jsx(
@@ -545,7 +545,7 @@ function ExportDemo({ density, height }) {
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "rounded-card border-card shadow-card p-2 text-[12px] text-ink-2",
+        className: "rounded-card border-card shadow-card p-2 text-fs-120 text-ink-2",
         "aria-live": "polite",
         children: last ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("p", { className: "font-[650] text-ink", children: [

package/dist/containers/data-grid/data-grid.js

@@ -1,5 +1,19 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Chip } from "../../atoms/chip/chip.js";
+import { formatCurrency, formatNumber } from "../../charts/core/format.js";
+import { Sparkline } from "../../charts/sparkline/sparkline.js";
 import {
   ArrowDown,
   ArrowDownToLine,
@@ -15,21 +29,7 @@ import {
   Copy,
   GripVertical,
   PinOff
-} from "lucide-react";
-import {
-  lazy,
-  Suspense,
-  useCallback,
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { Chip } from "../../atoms/chip/chip.js";
-import { formatCurrency, formatNumber } from "../../charts/core/format.js";
-import { Sparkline } from "../../charts/sparkline/sparkline.js";
+} from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { computePinOffsets, sanitizePinned } from "../table/pin.js";
 import { rangeToChart } from "./chart-range.js";
@@ -1651,7 +1651,7 @@ function DataGrid({
         className: cn(
           cellBase,
           sticky,
-          "select-none whitespace-nowrap font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]",
+          "select-none whitespace-nowrap font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em]",
           sortable && "cursor-pointer hover:text-ink",
           drop === "before" && "shadow-[inset_2px_0_0_var(--accent)]",
           drop === "after" && "shadow-[inset_-2px_0_0_var(--accent)]"
@@ -1669,14 +1669,14 @@ function DataGrid({
                     "span",
                     {
                       "aria-hidden": "true",
-                      className: "shrink-0 rounded-xs bg-surface-2 px-1 font-[650] text-[10px] text-ink-3 normal-case tracking-normal",
+                      className: "shrink-0 rounded-xs bg-surface-2 px-1 font-[650] text-fs-100 text-ink-3 normal-case tracking-normal",
                       children: cellLetter(column.id)
                     }
                   ) : null,
                   /* @__PURE__ */ jsx("span", { className: "truncate", title: column.header, children: column.header }),
                   state ? /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center text-accent-ink", children: [
                     state.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": "true", className: "size-3" }) : /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true", className: "size-3" }),
-                    sort.length > 1 ? /* @__PURE__ */ jsx("span", { className: "text-[10px] tabular-nums", children: state.index + 1 }) : null,
+                    sort.length > 1 ? /* @__PURE__ */ jsx("span", { className: "text-fs-100 tabular-nums", children: state.index + 1 }) : null,
                     state.index > 0 ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: state.direction === "asc" ? labels.sortAsc : labels.sortDesc }) : null
                   ] }) : null
                 ] }),
@@ -1770,7 +1770,7 @@ function DataGrid({
     if (!editing) return null;
     const errorId = `${helpId}-error`;
     const editorClass = cn(
-      "h-[calc(100%-6px)] w-full min-w-0 rounded-xs border bg-surface px-1.5 text-[13px] text-ink outline-none",
+      "h-[calc(100%-6px)] w-full min-w-0 rounded-xs border bg-surface px-1.5 text-fs-130 text-ink outline-none",
       editing.error ? "border-danger" : "border-accent"
     );
     const common = {
@@ -1813,7 +1813,7 @@ function DataGrid({
         {
           id: errorId,
           role: "alert",
-          className: "absolute top-full left-1 z-5 mt-0.5 flex max-w-64 items-center gap-1.5 rounded-xs border border-danger bg-surface px-2 py-1 text-[12px] text-danger shadow-overlay",
+          className: "absolute top-full left-1 z-5 mt-0.5 flex max-w-64 items-center gap-1.5 rounded-xs border border-danger bg-surface px-2 py-1 text-fs-120 text-danger shadow-overlay",
           children: [
             /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
             editing.error
@@ -1846,7 +1846,7 @@ function DataGrid({
             tabIndex: labelActive ? 0 : -1,
             role: "gridcell",
             "aria-expanded": !row.collapsed,
-            className: cn(cellBase, "cursor-pointer overflow-visible text-[13px]"),
+            className: cn(cellBase, "cursor-pointer overflow-visible text-fs-130"),
             children: /* @__PURE__ */ jsxs(
               "span",
               {
@@ -1874,7 +1874,7 @@ function DataGrid({
                     ":"
                   ] }),
                   /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: row.label }),
-                  /* @__PURE__ */ jsx(Chip, { className: "h-5 shrink-0 px-2 text-[11px]", children: row.count })
+                  /* @__PURE__ */ jsx(Chip, { className: "h-5 shrink-0 px-2 text-fs-110", children: row.count })
                 ]
               }
             )
@@ -1895,7 +1895,7 @@ function DataGrid({
           style: pinStyle(position),
           className: cn(
             cellBase,
-            "cursor-pointer text-[13px]",
+            "cursor-pointer text-fs-130",
             position && "sticky z-1 bg-surface-2",
             pinShadow(position),
             column && alignClass[columnAlign(column)]
@@ -2191,7 +2191,7 @@ function DataGrid({
         onDragOver: reorderAllowed ? (event) => onRowDragOver(event, row.key) : void 0,
         onDrop: reorderAllowed ? (event) => onRowDrop(event, row.key) : void 0,
         className: cn(
-          "group/row text-[13px] text-ink hover:bg-surface-2 aria-selected:bg-accent-soft",
+          "group/row text-fs-130 text-ink hover:bg-surface-2 aria-selected:bg-accent-soft",
           "data-[drop=before]:[&>td]:shadow-[inset_0_2px_0_var(--accent)] data-[drop=after]:[&>td]:shadow-[inset_0_-2px_0_var(--accent)]",
           "data-[divider=top]:[&>td]:border-b-line-strong"
         ),
@@ -2262,7 +2262,7 @@ function DataGrid({
       {
         style: pinStyle(position),
         className: cn(
-          "sticky bottom-0 overflow-hidden border-t-divider bg-surface px-3 font-[650] text-[13px] text-ink @max-sm/grid:px-2",
+          "sticky bottom-0 overflow-hidden border-t-divider bg-surface px-3 font-[650] text-fs-130 text-ink @max-sm/grid:px-2",
           position ? "z-3" : "z-2",
           pinShadow(position),
           column && alignClass[columnAlign(column)],
@@ -2274,7 +2274,7 @@ function DataGrid({
             ": "
           ] }),
           formatAggregate(value, column.aggregate, column)
-        ] }) : c === firstDataIndex ? /* @__PURE__ */ jsx("span", { className: "text-[11px] text-ink-3 uppercase tracking-[.07em]", children: labels.total }) : null
+        ] }) : c === firstDataIndex ? /* @__PURE__ */ jsx("span", { className: "text-fs-110 text-ink-3 uppercase tracking-[.07em]", children: labels.total }) : null
       },
       idOfColumn(entry)
     );
@@ -2338,7 +2338,7 @@ function DataGrid({
             role: cell.label ? "columnheader" : "presentation",
             colSpan: cell.span,
             className: cn(
-              "sticky overflow-clip border-b-divider bg-surface px-3 text-center font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em] @max-sm/grid:px-2",
+              "sticky overflow-clip border-b-divider bg-surface px-3 text-center font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em] @max-sm/grid:px-2",
               zone === "center" ? "z-2" : "z-3",
               cell.label && "border-x"
             ),
@@ -2518,7 +2518,7 @@ function DataGrid({
           "div",
           {
             role: "alert",
-            className: "flex flex-wrap items-center gap-2 border-b-divider bg-danger-soft px-3 py-2 text-[13px] text-danger",
+            className: "flex flex-wrap items-center gap-2 border-b-divider bg-danger-soft px-3 py-2 text-fs-130 text-danger",
             children: [
               /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true", className: "size-4 shrink-0" }),
               /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: labels.loadError }),
@@ -2526,7 +2526,7 @@ function DataGrid({
                 "button",
                 {
                   type: "button",
-                  className: "rounded-control border border-danger px-2.5 py-1 font-[600] text-[12.5px] hover:bg-surface",
+                  className: "rounded-control border border-danger px-2.5 py-1 font-[600] text-fs-125 hover:bg-surface",
                   onClick: remote.retry,
                   children: labels.retry
                 }
@@ -2612,13 +2612,13 @@ function DataGrid({
                         renderColumns.map((entry) => /* @__PURE__ */ jsx("td", { className: cn(cellBase), children: /* @__PURE__ */ jsx("span", { className: "block h-2.5 w-3/4 rounded-pill bg-surface-2 motion-safe:animate-pulse" }) }, idOfColumn(entry))),
                         /* @__PURE__ */ jsx("td", { className: "border-b-divider" })
                       ] }, index)
-                    )) : bodyLength === 0 ? /* @__PURE__ */ jsx("tr", { "aria-rowindex": groupLevels + 2, children: /* @__PURE__ */ jsx("td", { colSpan, className: "px-4 py-10 text-center text-[13px] text-ink-3", children: /* @__PURE__ */ jsxs("div", { className: "sticky left-0 inline-flex max-w-[calc(100cqw-2rem)] flex-col items-center gap-2", children: [
+                    )) : bodyLength === 0 ? /* @__PURE__ */ jsx("tr", { "aria-rowindex": groupLevels + 2, children: /* @__PURE__ */ jsx("td", { colSpan, className: "px-4 py-10 text-center text-fs-130 text-ink-3", children: /* @__PURE__ */ jsxs("div", { className: "sticky left-0 inline-flex max-w-[calc(100cqw-2rem)] flex-col items-center gap-2", children: [
                       /* @__PURE__ */ jsx("span", { children: sourceActive && remote.failed ? labels.loadError : emptyFiltered ? labels.emptyFiltered : emptyMessage ?? labels.empty }),
                       sourceActive && remote.failed ? /* @__PURE__ */ jsx(
                         "button",
                         {
                           type: "button",
-                          className: "rounded-control border-divider px-2.5 py-1 font-[600] text-[12.5px] text-ink-2 hover:text-ink",
+                          className: "rounded-control border-divider px-2.5 py-1 font-[600] text-fs-125 text-ink-2 hover:text-ink",
                           onClick: remote.retry,
                           children: labels.retry
                         }
@@ -2626,7 +2626,7 @@ function DataGrid({
                         "button",
                         {
                           type: "button",
-                          className: "rounded-control border-divider px-2.5 py-1 font-[600] text-[12.5px] text-ink-2 hover:text-ink",
+                          className: "rounded-control border-divider px-2.5 py-1 font-[600] text-fs-125 text-ink-2 hover:text-ink",
                           onClick: () => {
                             setFiltersState({});
                             setSearch("");
@@ -2659,7 +2659,7 @@ function DataGrid({
             }
           )
         ] }),
-        rangeSelection ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 border-t-divider px-3 py-1.5 text-[12.5px] text-ink-2", children: stats && cellRange ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        rangeSelection ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 border-t-divider px-3 py-1.5 text-fs-125 text-ink-2", children: stats && cellRange ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: "font-[650] text-ink", children: labels.rangeCells(rangeCellCount) }),
           /* @__PURE__ */ jsxs("span", { children: [
             labels.rangeCount,
@@ -2698,7 +2698,7 @@ function DataGrid({
             {
               type: "button",
               onClick: openChart,
-              className: "ml-auto inline-flex h-7 items-center gap-1.5 rounded-control border-divider bg-surface-control px-2 font-[600] text-[12px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5",
+              className: "ml-auto inline-flex h-7 items-center gap-1.5 rounded-control border-divider bg-surface-control px-2 font-[600] text-fs-120 text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5",
               children: [
                 /* @__PURE__ */ jsx(BarChart3, { "aria-hidden": "true" }),
                 labels.chart
@@ -2711,7 +2711,7 @@ function DataGrid({
               type: "button",
               onClick: copyRange,
               className: cn(
-                "inline-flex h-7 items-center gap-1.5 rounded-control border-divider bg-surface-control px-2 font-[600] text-[12px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5",
+                "inline-flex h-7 items-center gap-1.5 rounded-control border-divider bg-surface-control px-2 font-[600] text-fs-120 text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5",
                 !charts && "ml-auto"
               ),
               children: [
@@ -2778,7 +2778,7 @@ function Pagination({
     "nav",
     {
       "aria-label": labels.rowsPerPage,
-      className: "flex flex-wrap items-center justify-end gap-x-3 gap-y-1 border-t-divider px-2 py-1.5 text-[12.5px] text-ink-2",
+      className: "flex flex-wrap items-center justify-end gap-x-3 gap-y-1 border-t-divider px-2 py-1.5 text-fs-125 text-ink-2",
       children: [
         /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx("span", { children: labels.rowsPerPage }),
@@ -2787,7 +2787,7 @@ function Pagination({
             {
               value: pageSize,
               onChange: (event) => onPageSize(Number(event.target.value)),
-              className: "h-control-sm rounded-input border-control bg-surface-control px-1.5 text-[12.5px] text-ink",
+              className: "h-control-sm rounded-input border-control bg-surface-control px-1.5 text-fs-125 text-ink",
               children: [.../* @__PURE__ */ new Set([...options, pageSize])].sort((a, b) => a - b).map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
             }
           )

package/dist/containers/data-grid/data-grid.samples.js

@@ -72,7 +72,7 @@ const catalogoColumns = [
             style: { width: `${percent}%` }
           }
         ) }),
-        /* @__PURE__ */ jsxs("span", { className: "w-8 text-right text-[12px] text-ink-2 tabular-nums", children: [
+        /* @__PURE__ */ jsxs("span", { className: "w-8 text-right text-fs-120 text-ink-2 tabular-nums", children: [
           percent,
           "%"
         ] })

package/dist/containers/data-grid/filter-builder-editor.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Plus, Trash2 } from "lucide-react";
+import { Plus, Trash2 } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   addChild,
@@ -14,8 +14,8 @@ import {
 } from "./filter-builder.js";
 import { DEFAULT_DATA_GRID_LABELS } from "./labels.js";
 import { filterKindOf } from "./model.js";
-const fieldClass = "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
-const buttonClass = "inline-flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-control border-divider bg-surface-control px-2.5 font-[600] text-[12.5px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5";
+const fieldClass = "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-fs-130 text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
+const buttonClass = "inline-flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-control border-divider bg-surface-control px-2.5 font-[600] text-fs-125 text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5";
 function FilterBuilder({
   columns,
   value,
@@ -64,7 +64,7 @@ function GroupEditor({
                 type: "button",
                 "aria-pressed": group.logic === logic,
                 onClick: () => onChange(updateNode(root, group.id, (n) => ({ ...n, logic }))),
-                className: "h-full rounded-xs px-2 font-[600] text-[12px] text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink",
+                className: "h-full rounded-xs px-2 font-[600] text-fs-120 text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink",
                 children: logic === "and" ? labels.matchAll : labels.matchAny
               },
               logic
@@ -107,8 +107,8 @@ function GroupEditor({
             }
           )
         ] }),
-        group.children.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 text-[12.5px] text-ink-3", children: labels.noConditions }) : /* @__PURE__ */ jsx("ul", { className: "grid gap-2", children: group.children.map((child, index) => /* @__PURE__ */ jsxs("li", { className: "grid gap-1", children: [
-          index > 0 ? /* @__PURE__ */ jsx("span", { className: "font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]", children: group.logic === "and" ? labels.filterAnd : labels.filterOr }) : null,
+        group.children.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 text-fs-125 text-ink-3", children: labels.noConditions }) : /* @__PURE__ */ jsx("ul", { className: "grid gap-2", children: group.children.map((child, index) => /* @__PURE__ */ jsxs("li", { className: "grid gap-1", children: [
+          index > 0 ? /* @__PURE__ */ jsx("span", { className: "font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em]", children: group.logic === "and" ? labels.filterAnd : labels.filterOr }) : null,
           child.type === "group" ? /* @__PURE__ */ jsx(GroupEditor, { group: child, ...context }) : /* @__PURE__ */ jsx(ConditionEditor, { condition: child, ...context })
         ] }, child.id)) })
       ]