@rowsncolumns/spreadsheet-state 29.1.19 → 29.3.2

package/dist/esm/components/editors/cell-format/border-edges.js

@@ -0,0 +1,79 @@
+/** Excel's Line Style list, in Excel's order (None, then thin → thick). */
+export const LINE_STYLES = [
+    { value: "none", label: "None" },
+    { value: "hair", label: "Hair" },
+    { value: "dotted", label: "Dotted" },
+    { value: "dashDotDot", label: "Dash dot dot" },
+    { value: "dashDot", label: "Dash dot" },
+    { value: "dashed", label: "Dashed" },
+    { value: "solid", label: "Thin" },
+    { value: "mediumDashDotDot", label: "Medium dash dot dot" },
+    { value: "slantDashDot", label: "Slanted dash dot" },
+    { value: "mediumDashDot", label: "Medium dash dot" },
+    { value: "mediumDashed", label: "Medium dashed" },
+    { value: "solid_medium", label: "Medium" },
+    { value: "solid_thick", label: "Thick" },
+    { value: "double", label: "Double" },
+];
+export const EDGE_LOCATION = {
+    top: "top",
+    insideHorizontal: "horizontal",
+    bottom: "bottom",
+    left: "left",
+    insideVertical: "vertical",
+    right: "right",
+    diagonalUp: "diagonalUp",
+    diagonalDown: "diagonalDown",
+};
+const OUTLINE = ["top", "bottom", "left", "right"];
+const INSIDE = ["insideHorizontal", "insideVertical"];
+export const ALL_EDGES = [...OUTLINE, ...INSIDE, "diagonalUp", "diagonalDown"];
+/** The active cell's own edges, as the preview opens on them. */
+export const edgesFromBorders = (borders) => {
+    const map = {};
+    for (const key of ["top", "bottom", "left", "right", "diagonalUp", "diagonalDown"]) {
+        const b = borders?.[key];
+        if (b?.style)
+            map[key] = { style: b.style, color: b.color ?? "#000000" };
+    }
+    return map;
+};
+const sameLine = (a, b) => !!a && a.style === b.style && JSON.stringify(a.color) === JSON.stringify(b.color);
+/**
+ * Click an edge: Excel removes it when it already carries the current style
+ * and colour (or the style is None), otherwise draws it in them.
+ */
+export const toggleEdge = (shown, key, lineStyle, color) => lineStyle === "none" || sameLine(shown[key], { style: lineStyle, color })
+    ? null
+    : { style: lineStyle, color };
+/** The None / Outline / Inside presets: the edges they set. */
+export const presetEdges = (preset, lineStyle, color) => {
+    if (preset === "none" || lineStyle === "none") {
+        return Object.fromEntries((preset === "none" ? ALL_EDGES : preset === "outline" ? OUTLINE : INSIDE).map((k) => [k, null]));
+    }
+    const line = { style: lineStyle, color };
+    return Object.fromEntries((preset === "outline" ? OUTLINE : INSIDE).map((k) => [k, line]));
+};
+/**
+ * The `onChangeBorder` calls for the edited edges. A None preset that touched
+ * every edge is one `"none"` command (clears diagonals too); everything else
+ * is one command per edited edge, removals first so a redraw lands on top.
+ */
+export const toBorderCommands = (edits, options = {}) => {
+    const commands = [];
+    if (options.clearedAll) {
+        commands.push({ location: "none", color: undefined, style: undefined });
+    }
+    const keys = ALL_EDGES.filter((k) => k in edits);
+    for (const key of keys) {
+        if (edits[key] === null && !options.clearedAll) {
+            commands.push({ location: EDGE_LOCATION[key], color: undefined, style: undefined });
+        }
+    }
+    for (const key of keys) {
+        const line = edits[key];
+        if (line)
+            commands.push({ location: EDGE_LOCATION[key], color: line.color, style: line.style });
+    }
+    return commands;
+};

package/dist/esm/components/editors/cell-format/border-tab.d.ts

@@ -0,0 +1,21 @@
+import type { Color, SpreadsheetTheme } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import { type EdgeMap, type LineStyleChoice } from "./border-edges";
+export type BorderTabProps = {
+    /** The edges as shown: the active cell's, with the user's edits on top. */
+    edges: EdgeMap;
+    onEdit(edits: EdgeMap, options?: {
+        clearedAll?: boolean;
+    }): void;
+    lineStyle: LineStyleChoice;
+    onLineStyle(style: LineStyleChoice): void;
+    color: Color;
+    onColor(color: Color): void;
+    /** Inside edges exist only for a multi-row / multi-column selection. */
+    hasInsideRows: boolean;
+    hasInsideColumns: boolean;
+    theme: SpreadsheetTheme;
+};
+/** Format Cells → Border. */
+export declare const BorderTab: ({ edges, onEdit, lineStyle, onLineStyle, color, onColor, hasInsideRows, hasInsideColumns, theme, }: BorderTabProps) => React.JSX.Element;
+//# sourceMappingURL=border-tab.d.ts.map

package/dist/esm/components/editors/cell-format/border-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-tab.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/border-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,KAAK,OAAO,EAEZ,KAAK,eAAe,EAGrB,MAAM,gBAAgB,CAAC;AA2FxB,MAAM,MAAM,cAAc,GAAG;IAC3B,2EAA2E;IAC3E,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;IACjE,SAAS,EAAE,eAAe,CAAC;IAC3B,WAAW,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;IAC1C,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,wEAAwE;IACxE,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,6BAA6B;AAC7B,eAAO,MAAM,SAAS,GAAI,oGAUvB,cAAc,sBA+HhB,CAAC"}

package/dist/esm/components/editors/cell-format/border-tab.js

@@ -0,0 +1,103 @@
+import { BorderColorSelector, getStringifiedColor } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import { LINE_STYLES, presetEdges, toggleEdge, } from "./border-edges";
+import { ListBox } from "./list-box";
+const DASH = {
+    hair: "1 1",
+    dotted: "1 2",
+    dashDotDot: "4 2 1 2 1 2",
+    dashDot: "4 2 1 2",
+    dashed: "3 2",
+    mediumDashDotDot: "4 2 1 2 1 2",
+    slantDashDot: "4 2 1 2",
+    mediumDashDot: "4 2 1 2",
+    mediumDashed: "4 2",
+};
+const WIDTH = {
+    mediumDashDotDot: 2,
+    slantDashDot: 2,
+    mediumDashDot: 2,
+    mediumDashed: 2,
+    solid_medium: 2,
+    solid_thick: 3,
+};
+/** One SVG line in a style's dash / weight (double = two thin lines). */
+const StyledLine = ({ x1, y1, x2, y2, style, color, }) => {
+    if (style === "none")
+        return null;
+    if (style === "double") {
+        const dx = y2 - y1;
+        const dy = x1 - x2;
+        const len = Math.hypot(dx, dy) || 1;
+        const [ox, oy] = [(dx / len) * 1.5, (dy / len) * 1.5];
+        return (React.createElement(React.Fragment, null,
+            React.createElement("line", { x1: x1 + ox, y1: y1 + oy, x2: x2 + ox, y2: y2 + oy, stroke: color, strokeWidth: 1 }),
+            React.createElement("line", { x1: x1 - ox, y1: y1 - oy, x2: x2 - ox, y2: y2 - oy, stroke: color, strokeWidth: 1 })));
+    }
+    return (React.createElement("line", { x1: x1, y1: y1, x2: x2, y2: y2, stroke: color, strokeWidth: WIDTH[style] ?? 1, strokeDasharray: DASH[style] }));
+};
+/** Preview geometry (a 2×2 grid when the selection has inside edges). */
+const W = 160;
+const H = 100;
+const EDGE_GEOMETRY = {
+    top: [10, 10, W - 10, 10],
+    insideHorizontal: [10, H / 2, W - 10, H / 2],
+    bottom: [10, H - 10, W - 10, H - 10],
+    left: [10, 10, 10, H - 10],
+    insideVertical: [W / 2, 10, W / 2, H - 10],
+    right: [W - 10, 10, W - 10, H - 10],
+    diagonalUp: [10, H - 10, W - 10, 10],
+    diagonalDown: [10, 10, W - 10, H - 10],
+};
+const EDGE_BUTTONS = [
+    { key: "top", label: "Top border" },
+    { key: "insideHorizontal", label: "Inside horizontal border" },
+    { key: "bottom", label: "Bottom border" },
+    { key: "diagonalUp", label: "Diagonal up border" },
+    { key: "left", label: "Left border" },
+    { key: "insideVertical", label: "Inside vertical border" },
+    { key: "right", label: "Right border" },
+    { key: "diagonalDown", label: "Diagonal down border" },
+];
+/** Format Cells → Border. */
+export const BorderTab = ({ edges, onEdit, lineStyle, onLineStyle, color, onColor, hasInsideRows, hasInsideColumns, theme, }) => {
+    const enabled = (key) => key === "insideHorizontal" ? hasInsideRows : key === "insideVertical" ? hasInsideColumns : true;
+    const cssColor = (c) => getStringifiedColor(c, theme) ?? "#000000";
+    return (React.createElement("div", { className: "grid grid-cols-[150px_1fr] gap-4" },
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement("span", { className: "font-system text-sm" }, "Line style"),
+            React.createElement(ListBox, { label: "Line style", value: lineStyle, className: "max-h-[220px]", items: LINE_STYLES.map(({ value, label }) => ({
+                    value,
+                    label: (React.createElement("span", { className: "flex items-center gap-1", title: label }, value === "none" ? ("None") : (React.createElement("svg", { width: "90", height: "8", "aria-label": label },
+                        React.createElement(StyledLine, { x1: 0, y1: 4, x2: 90, y2: 4, style: value, color: "currentColor" }))))),
+                })), onChange: onLineStyle }),
+            React.createElement("span", { className: "font-system text-sm" }, "Color"),
+            React.createElement(BorderColorSelector, { color: color, onChange: onColor, theme: theme })),
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement("span", { className: "font-system text-sm" }, "Presets"),
+            React.createElement("div", { className: "flex gap-2" }, [
+                ["none", "None"],
+                ["outline", "Outline"],
+                ["inside", "Inside"],
+            ].map(([preset, label]) => (React.createElement("button", { type: "button", key: preset, className: "rounded-sm border border-solid border-rnc-border px-2 py-1 text-xs", disabled: preset === "inside" && !hasInsideRows && !hasInsideColumns, onClick: () => onEdit(presetEdges(preset, lineStyle, color), {
+                    clearedAll: preset === "none",
+                }) }, label)))),
+            React.createElement("span", { className: "font-system text-sm" }, "Border"),
+            React.createElement("div", { className: "flex gap-2" },
+                React.createElement("div", { className: "grid grid-cols-2 gap-1", role: "group", "aria-label": "Border edges" }, EDGE_BUTTONS.map(({ key, label }) => (React.createElement("button", { type: "button", key: key, "aria-label": label, "aria-pressed": !!edges[key], disabled: !enabled(key), className: `h-7 w-7 rounded-sm border border-solid text-[10px] ${edges[key] ? "border-rnc-primary bg-rnc-muted" : "border-rnc-border"}`, onClick: () => onEdit({ [key]: toggleEdge(edges, key, lineStyle, color) }) },
+                    React.createElement("svg", { width: "16", height: "16", "aria-hidden": "true" }, (() => {
+                        const [x1, y1, x2, y2] = EDGE_GEOMETRY[key];
+                        return (React.createElement("line", { x1: (x1 / W) * 16, y1: (y1 / H) * 16, x2: (x2 / W) * 16, y2: (y2 / H) * 16, stroke: "currentColor" }));
+                    })()))))),
+                React.createElement("svg", { "data-testid": "border-preview", width: W, height: H, className: "rounded-sm border border-solid border-rnc-border bg-rnc-background" },
+                    React.createElement("text", { x: W / 2, y: H / 2 + 4, textAnchor: "middle", fontSize: "11", fill: "currentColor" }, "Text"),
+                    Object.keys(EDGE_GEOMETRY).map((key) => {
+                        const line = edges[key];
+                        if (!line || !enabled(key))
+                            return null;
+                        const [x1, y1, x2, y2] = EDGE_GEOMETRY[key];
+                        return (React.createElement("g", { key: key, "data-edge": key },
+                            React.createElement(StyledLine, { x1: x1, y1: y1, x2: x2, y2: y2, style: line.style, color: cssColor(line.color) })));
+                    }))),
+            React.createElement("p", { className: "font-system text-xs text-rnc-muted-foreground" }, "The selected border style can be applied by clicking the presets, preview diagram or the buttons above."))));
+};

package/dist/esm/components/editors/cell-format/fill-tab.d.ts

@@ -0,0 +1,14 @@
+import type { CellFill, SpreadsheetTheme } from "@rowsncolumns/spreadsheet";
+import React from "react";
+export type FillTabProps = {
+    fill: CellFill;
+    onChange(fill: CellFill): void;
+    theme: SpreadsheetTheme;
+};
+/**
+ * Format Cells → Fill: Background Color (No Color, the palette, More
+ * Colors…), Fill Effects… (two-colour gradient), Pattern Color and Pattern
+ * Style, and a Sample. A solid colour replaces a gradient, as in Excel.
+ */
+export declare const FillTab: ({ fill, onChange, theme }: FillTabProps) => React.JSX.Element;
+//# sourceMappingURL=fill-tab.d.ts.map

package/dist/esm/components/editors/cell-format/fill-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill-tab.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/fill-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAS5E,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC/B,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAYF;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,2BAA2B,YAAY,sBA8E9D,CAAC"}

package/dist/esm/components/editors/cell-format/fill-tab.js

@@ -0,0 +1,49 @@
+import { getStringifiedColor, gradientToCss, GradientFillPicker, PatternFillPicker, STANDARD_COLORS, } from "@rowsncolumns/spreadsheet";
+import { Button, ColorPicker, HexColorPicker } from "@rowsncolumns/ui";
+import React, { useState } from "react";
+/** CSS for the Sample box (gradient, else the solid colour; patterns show their base colour). */
+const sampleStyle = (fill, theme) => fill.gradient?.stops?.length
+    ? { backgroundImage: gradientToCss(fill.gradient) }
+    : {
+        backgroundColor: fill.backgroundColor
+            ? getStringifiedColor(fill.backgroundColor, theme)
+            : undefined,
+    };
+/**
+ * Format Cells → Fill: Background Color (No Color, the palette, More
+ * Colors…), Fill Effects… (two-colour gradient), Pattern Color and Pattern
+ * Style, and a Sample. A solid colour replaces a gradient, as in Excel.
+ */
+export const FillTab = ({ fill, onChange, theme }) => {
+    const [panel, setPanel] = useState("none");
+    const solid = fill.backgroundColor
+        ? getStringifiedColor(fill.backgroundColor, theme)
+        : undefined;
+    const pickSolid = (color) => onChange({
+        ...fill,
+        backgroundColor: color,
+        gradient: undefined,
+    });
+    return (React.createElement("div", { className: "grid grid-cols-[1fr_200px] gap-4" },
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement("span", { className: "font-system text-sm" }, "Background Color"),
+            React.createElement(Button, { size: "xs", variant: "outline", className: "justify-center", onClick: () => onChange({
+                    backgroundColor: undefined,
+                    fillPattern: undefined,
+                    foregroundColor: undefined,
+                    gradient: undefined,
+                }) }, "No Color"),
+            React.createElement("div", { role: "group", "aria-label": "Background color", className: "flex flex-col gap-1" },
+                React.createElement(ColorPicker, { value: solid, onChange: pickSolid, className: "flex-wrap gap-1" }),
+                React.createElement(ColorPicker, { value: solid, colors: STANDARD_COLORS, onChange: pickSolid, className: "gap-1" })),
+            React.createElement("div", { className: "flex gap-2" },
+                React.createElement(Button, { size: "xs", variant: "outline", "aria-expanded": panel === "effects", onClick: () => setPanel(panel === "effects" ? "none" : "effects") }, "Fill Effects..."),
+                React.createElement(Button, { size: "xs", variant: "outline", "aria-expanded": panel === "more", onClick: () => setPanel(panel === "more" ? "none" : "more") }, "More Colors...")),
+            panel === "more" ? (React.createElement(HexColorPicker, { value: solid ?? "#FFFFFF", onChange: pickSolid })) : null,
+            panel === "effects" ? (React.createElement("div", { "data-testid": "fill-effects" },
+                React.createElement(GradientFillPicker, { fill: fill, theme: theme, onChangeFill: onChange }))) : null),
+        React.createElement("div", { className: "flex flex-col gap-2" },
+            React.createElement(PatternFillPicker, { fill: fill, theme: theme, onChangeFill: onChange }),
+            React.createElement("span", { className: "font-system text-sm" }, "Sample"),
+            React.createElement("div", { "data-testid": "fill-sample", className: "h-10 rounded-sm border border-solid border-rnc-border", style: sampleStyle(fill, theme) }))));
+};

package/dist/esm/components/editors/cell-format/font-tab.d.ts

@@ -0,0 +1,18 @@
+import type { SpreadsheetTheme, TextFormat, UnderlineStyle } from "@rowsncolumns/spreadsheet";
+import React from "react";
+type UnderlineChoice = "none" | UnderlineStyle;
+/** Excel's Underline list. */
+export declare const UNDERLINE_OPTIONS: {
+    value: UnderlineChoice;
+    label: string;
+}[];
+export type FontTabProps = {
+    textFormat: TextFormat;
+    onChange(patch: Partial<TextFormat>): void;
+    theme: SpreadsheetTheme;
+    isDarkMode?: boolean;
+};
+/** Format Cells → Font. */
+export declare const FontTab: ({ textFormat, onChange, theme, isDarkMode, }: FontTabProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=font-tab.d.ts.map

package/dist/esm/components/editors/cell-format/font-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-tab.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/font-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACf,MAAM,2BAA2B,CAAC;AAOnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,eAAe,GAAG,MAAM,GAAG,cAAc,CAAC;AAS/C,8BAA8B;AAC9B,eAAO,MAAM,iBAAiB,EAAE;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAMxE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3C,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAoCF,2BAA2B;AAC3B,eAAO,MAAM,OAAO,GAAI,8CAKrB,YAAY,sBA2Gd,CAAC"}

package/dist/esm/components/editors/cell-format/font-tab.js

@@ -0,0 +1,88 @@
+import { FontFamilySelector, FontSizeSelector, getStringifiedColor, TextColorSelector, } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import { CheckboxField, ListBox, SelectField } from "./list-box";
+const FONT_STYLES = [
+    { value: "regular", label: "Regular" },
+    { value: "italic", label: "Italic" },
+    { value: "bold", label: "Bold" },
+    { value: "boldItalic", label: "Bold Italic" },
+];
+/** Excel's Underline list. */
+export const UNDERLINE_OPTIONS = [
+    { value: "none", label: "None" },
+    { value: "single", label: "Single" },
+    { value: "double", label: "Double" },
+    { value: "singleAccounting", label: "Single Accounting" },
+    { value: "doubleAccounting", label: "Double Accounting" },
+];
+/** CSS for the Preview box: the double / accounting underlines as CSS decorations. */
+const previewStyle = (tf, theme) => {
+    const style = tf.underline ? tf.underlineStyle ?? "single" : undefined;
+    const lines = [
+        style ? "underline" : "",
+        tf.strikethrough ? "line-through" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return {
+        fontFamily: tf.fontFamily ?? undefined,
+        fontSize: tf.fontSize ? `${tf.fontSize}pt` : undefined,
+        fontWeight: tf.bold ? "bold" : undefined,
+        fontStyle: tf.italic ? "italic" : undefined,
+        color: tf.color ? getStringifiedColor(tf.color, theme) : undefined,
+        textDecorationLine: lines || undefined,
+        textDecorationStyle: style === "double" || style === "doubleAccounting" ? "double" : undefined,
+        textUnderlineOffset: style === "singleAccounting" || style === "doubleAccounting"
+            ? "0.3em"
+            : undefined,
+        verticalAlign: tf.baselineOffset === "superscript"
+            ? "super"
+            : tf.baselineOffset === "subscript"
+                ? "sub"
+                : undefined,
+    };
+};
+/** Format Cells → Font. */
+export const FontTab = ({ textFormat, onChange, theme, isDarkMode, }) => {
+    const fontStyle = textFormat.bold && textFormat.italic
+        ? "boldItalic"
+        : textFormat.bold
+            ? "bold"
+            : textFormat.italic
+                ? "italic"
+                : "regular";
+    const underline = textFormat.underline
+        ? textFormat.underlineStyle ?? "single"
+        : "none";
+    return (React.createElement("div", { className: "flex flex-col gap-3" },
+        React.createElement("div", { className: "grid grid-cols-[1fr_120px_80px] gap-2" },
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Font"),
+                React.createElement(FontFamilySelector, { theme: theme, value: textFormat.fontFamily, onChange: (fontFamily) => onChange({ fontFamily }), triggerVariant: "outline" })),
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Font style"),
+                React.createElement(ListBox, { label: "Font style", value: fontStyle, items: FONT_STYLES, onChange: (value) => onChange({
+                        bold: value === "bold" || value === "boldItalic",
+                        italic: value === "italic" || value === "boldItalic",
+                    }) })),
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Size"),
+                React.createElement(FontSizeSelector, { value: textFormat.fontSize, onChange: (fontSize) => onChange({ fontSize }) }))),
+        React.createElement("div", { className: "grid grid-cols-2 gap-2" },
+            React.createElement(SelectField, { label: "Underline", value: underline, options: UNDERLINE_OPTIONS, onChange: (value) => onChange(value === "none"
+                    ? { underline: false }
+                    : { underline: true, underlineStyle: value }) }),
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Color"),
+                React.createElement(TextColorSelector, { color: textFormat.color, theme: theme, isDarkMode: isDarkMode, onChange: (color) => onChange({ color }) }))),
+        React.createElement("div", { className: "grid grid-cols-2 gap-2" },
+            React.createElement("fieldset", { className: "flex flex-col gap-1.5 border-0 p-0" },
+                React.createElement("legend", { className: "pb-1 font-system text-sm" }, "Effects"),
+                React.createElement(CheckboxField, { label: "Strikethrough", checked: !!textFormat.strikethrough, onChange: (strikethrough) => onChange({ strikethrough }) }),
+                React.createElement(CheckboxField, { label: "Superscript", checked: textFormat.baselineOffset === "superscript", onChange: (on) => onChange({ baselineOffset: on ? "superscript" : null }) }),
+                React.createElement(CheckboxField, { label: "Subscript", checked: textFormat.baselineOffset === "subscript", onChange: (on) => onChange({ baselineOffset: on ? "subscript" : null }) })),
+            React.createElement("div", { className: "flex flex-col gap-1" },
+                React.createElement("span", { className: "font-system text-sm" }, "Preview"),
+                React.createElement("div", { "data-testid": "font-preview", className: "flex h-14 items-center justify-center overflow-hidden rounded-sm border border-solid border-rnc-border bg-rnc-background" },
+                    React.createElement("span", { style: previewStyle(textFormat, theme) }, "AaBbCcYyZz"))))));
+};

package/dist/esm/components/editors/cell-format/list-box.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+export type ListBoxItem<T extends string> = {
+    value: T;
+    label: React.ReactNode;
+};
+/**
+ * Excel's always-open selection lists (Category, Type, Font style, Line
+ * style …): a listbox with arrow-key navigation, not a dropdown.
+ */
+export declare const ListBox: <T extends string>({ label, items, value, onChange, className, }: {
+    label: string;
+    items: ListBoxItem<T>[];
+    value: T | undefined;
+    onChange(value: T): void;
+    className?: string;
+}) => React.JSX.Element;
+/** A labelled native checkbox (Excel's Text control / Effects / Protection boxes). */
+export declare const CheckboxField: ({ label, checked, disabled, onChange, }: {
+    label: string;
+    checked: boolean;
+    disabled?: boolean;
+    onChange(checked: boolean): void;
+}) => React.JSX.Element;
+/** A labelled native select for the short option lists. */
+export declare const SelectField: <T extends string>({ label, value, options, onChange, disabled, }: {
+    label: string;
+    value: T;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    onChange(value: T): void;
+    disabled?: boolean;
+}) => React.JSX.Element;
+//# sourceMappingURL=list-box.d.ts.map

package/dist/esm/components/editors/cell-format/list-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-box.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/list-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI;IAC1C,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,MAAM,EAAE,+CAMvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAoCA,CAAC;AAEF,sFAAsF;AACtF,eAAO,MAAM,aAAa,GAAI,yCAK3B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CAClC,sBAcA,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,gDAM3C;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,sBAiBA,CAAC"}

package/dist/esm/components/editors/cell-format/list-box.js

@@ -0,0 +1,30 @@
+import React from "react";
+/**
+ * Excel's always-open selection lists (Category, Type, Font style, Line
+ * style …): a listbox with arrow-key navigation, not a dropdown.
+ */
+export const ListBox = ({ label, items, value, onChange, className = "", }) => {
+    const index = items.findIndex((item) => item.value === value);
+    return (React.createElement("div", { role: "listbox", "aria-label": label, tabIndex: 0, className: `max-h-[180px] overflow-auto rounded-sm border border-solid border-rnc-border text-xs outline-none focus-visible:ring-1 focus-visible:ring-rnc-primary ${className}`, onKeyDown: (event) => {
+            if (event.key !== "ArrowDown" && event.key !== "ArrowUp")
+                return;
+            event.preventDefault();
+            const step = event.key === "ArrowDown" ? 1 : -1;
+            const next = items[Math.max(0, Math.min(items.length - 1, index + step))];
+            if (next)
+                onChange(next.value);
+        } }, items.map((item) => {
+        const selected = item.value === value;
+        return (React.createElement("div", { key: item.value, role: "option", "aria-selected": selected, className: `cursor-default px-1.5 py-0.5 ${selected
+                ? "bg-rnc-primary text-rnc-primary-foreground"
+                : "hover:bg-rnc-muted"}`, onClick: () => onChange(item.value) }, item.label));
+    })));
+};
+/** A labelled native checkbox (Excel's Text control / Effects / Protection boxes). */
+export const CheckboxField = ({ label, checked, disabled, onChange, }) => (React.createElement("label", { className: `flex items-center gap-1.5 font-system text-xs ${disabled ? "opacity-50" : ""}` },
+    React.createElement("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: (event) => onChange(event.target.checked) }),
+    label));
+/** A labelled native select for the short option lists. */
+export const SelectField = ({ label, value, options, onChange, disabled, }) => (React.createElement("label", { className: "flex flex-col gap-1 font-system text-sm" },
+    label,
+    React.createElement("select", { "aria-label": label, className: "rounded-sm border border-solid border-rnc-border bg-rnc-background px-1 py-1 text-xs text-rnc-foreground", value: value, disabled: disabled, onChange: (event) => onChange(event.target.value) }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label))))));

package/dist/esm/components/editors/cell-format/number-formats.d.ts

@@ -0,0 +1,90 @@
+import type { NumberFormat, NumberFormatType } from "@rowsncolumns/spreadsheet";
+export type NumberCategoryId = "general" | "number" | "currency" | "accounting" | "date" | "time" | "percentage" | "fraction" | "scientific" | "text" | "special" | "custom";
+export type NumberCategory = {
+    id: NumberCategoryId;
+    name: string;
+    type: NumberFormatType;
+    description: string;
+};
+/** Excel's category list, in Excel's order. */
+export declare const NUMBER_CATEGORIES: NumberCategory[];
+/** Excel's four "Negative numbers" styles. */
+export type NegativeStyle = "minus" | "red" | "parens" | "redParens";
+export declare const NEGATIVE_STYLES: NegativeStyle[];
+/** Number: decimal places, 1000 separator, negative numbers. */
+export declare const buildNumberPattern: ({ decimals, thousands, negative, }: {
+    decimals: number;
+    thousands: boolean;
+    negative: NegativeStyle;
+}) => string;
+/** Currency: decimal places, symbol, negative numbers. */
+export declare const buildCurrencyPattern: ({ decimals, symbol, negative, }: {
+    decimals: number;
+    symbol: string;
+    negative: NegativeStyle;
+}) => string;
+/**
+ * Accounting: decimal places and symbol. The symbol sits at the left edge
+ * (`* ` repeats the space to fill the cell), zero shows a dash, and the `_(`
+ * / `_)` paddings line the decimal points up across positive and negative.
+ */
+export declare const buildAccountingPattern: ({ decimals, symbol, }: {
+    decimals: number;
+    symbol: string;
+}) => string;
+export declare const buildPercentPattern: (decimals: number) => string;
+export declare const buildScientificPattern: (decimals: number) => string;
+/** Excel's Currency / Accounting symbol list (a representative subset). */
+export declare const CURRENCY_SYMBOLS: {
+    symbol: string;
+    label: string;
+}[];
+export declare const FRACTION_TYPES: {
+    label: string;
+    pattern: string;
+}[];
+/** Excel's Special types for English (United States). */
+export declare const SPECIAL_TYPES: {
+    label: string;
+    pattern: string;
+}[];
+/** Locales offered by the Date / Time / Special "Locale (location)" list. */
+export type FormatLocale = {
+    /** BCP-47 tag. */
+    tag: string;
+    label: string;
+    /** Windows LCID (hex) written as Excel's `[$-xxxx]` locale prefix. */
+    lcid: string;
+    /** Day before month in the short date. */
+    dayFirst: boolean;
+};
+export declare const FORMAT_LOCALES: FormatLocale[];
+export declare const findFormatLocale: (tag: string | undefined) => FormatLocale;
+/**
+ * The Date / Time types for a locale. The default locale's codes are written
+ * bare (they follow the workbook); another locale's carry Excel's
+ * `[$-lcid]` prefix so the cell keeps that locale's names and order.
+ */
+export declare const getDateTimeTypes: (kind: "date" | "time", locale: FormatLocale, defaultLocale: FormatLocale) => string[];
+/** The locale a format code's `[$-lcid]` prefix names, if any. */
+export declare const getPatternLocale: (pattern: string | null | undefined) => FormatLocale | undefined;
+/** The pieces the Number / Currency options read back off a code. */
+export declare const parseNumericPattern: (pattern: string | null | undefined) => {
+    decimals: number;
+    thousands: boolean;
+    negative: NegativeStyle;
+    symbol: string;
+};
+/** Which category a cell's number format opens the Number tab on. */
+export declare const detectCategory: (format: NumberFormat | null | undefined) => NumberCategoryId;
+/** The format a category gets when it is first picked (Excel's defaults). */
+export declare const defaultFormatForCategory: (id: NumberCategoryId, { currencySymbol, locale, defaultLocale, }: {
+    currencySymbol: string;
+    locale: FormatLocale;
+    defaultLocale: FormatLocale;
+}) => NumberFormat | null;
+/** Excel's Custom type list (the built-in codes). */
+export declare const CUSTOM_PATTERNS: string[];
+/** The NumberFormatType a typed custom code is closest to. */
+export declare const inferTypeFromPattern: (pattern: string) => NumberFormatType;
+//# sourceMappingURL=number-formats.d.ts.map

package/dist/esm/components/editors/cell-format/number-formats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-formats.d.ts","sourceRoot":"","sources":["../../../../../components/editors/cell-format/number-formats.ts"],"names":[],"mappings":"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"}