@rowsncolumns/spreadsheet 10.2.73 → 10.2.75

package/dist/cjs/components/toolbar/background-color-selector.js

@@ -11,24 +11,70 @@ var atoms_1 = require("../../atoms");
 var config_1 = require("../../config");
 var themes_1 = require("../../themes");
 var color_selector_1 = require("./color-selector");
+var fill_selectors_1 = require("./fill-selectors");
 var BackgroundColorSelector = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? "transparent" : _b, _c = _a.theme, theme = _c === void 0 ? config_1.defaultSpreadsheetTheme : _c, onChange = _a.onChange, onAddUserDefinedColor = _a.onAddUserDefinedColor, userDefinedColors = _a.userDefinedColors, disabled = _a.disabled, _d = _a.ColorSelector, ColorSelectorComponent = _d === void 0 ? color_selector_1.ColorSelector : _d;
-    var _e = tslib_1.__read((0, react_2.useState)(false), 2), isOpen = _e[0], setIsOpen = _e[1];
+    var _b, _c;
+    var _d = _a.color, color = _d === void 0 ? "transparent" : _d, _e = _a.theme, theme = _e === void 0 ? config_1.defaultSpreadsheetTheme : _e, onChange = _a.onChange, fill = _a.fill, onChangeFill = _a.onChangeFill, onAddUserDefinedColor = _a.onAddUserDefinedColor, userDefinedColors = _a.userDefinedColors, disabled = _a.disabled, _f = _a.ColorSelector, ColorSelectorComponent = _f === void 0 ? color_selector_1.ColorSelector : _f;
+    var _g = tslib_1.__read((0, react_2.useState)(false), 2), isOpen = _g[0], setIsOpen = _g[1];
     var close = function () { return setIsOpen(false); };
     var open = function () { return setIsOpen(true); };
     var colorString = (0, themes_1.getStringifiedColor)(color, theme);
     var focusSheet = (0, atoms_1.useFocusSheet)();
+    // The trigger underline previews the effective fill: gradient, then the
+    // pattern colour, then the solid colour.
+    var swatchStyle = (fill === null || fill === void 0 ? void 0 : fill.gradient)
+        ? {
+            borderBottom: "4px solid transparent",
+            borderImage: "".concat((0, fill_selectors_1.gradientToCss)(fill.gradient), " 1"),
+        }
+        : {
+            borderBottom: "4px ".concat((fill === null || fill === void 0 ? void 0 : fill.fillPattern) &&
+                fill.fillPattern !== "none" &&
+                fill.foregroundColor
+                ? (0, themes_1.getStringifiedColor)(fill.foregroundColor, theme)
+                : colorString, " solid"),
+        };
+    var solidPicker = (react_1.default.createElement(ColorSelectorComponent, { color: color, onChange: function (color) {
+            var _a, _b;
+            // A solid pick replaces a gradient (Excel keeps them exclusive) and,
+            // with "No fill", clears the pattern too.
+            if (onChangeFill && ((fill === null || fill === void 0 ? void 0 : fill.gradient) || (!color && (fill === null || fill === void 0 ? void 0 : fill.fillPattern)))) {
+                onChangeFill({
+                    backgroundColor: color,
+                    fillPattern: color ? (_a = fill === null || fill === void 0 ? void 0 : fill.fillPattern) !== null && _a !== void 0 ? _a : undefined : undefined,
+                    foregroundColor: color
+                        ? (_b = fill === null || fill === void 0 ? void 0 : fill.foregroundColor) !== null && _b !== void 0 ? _b : undefined
+                        : undefined,
+                    gradient: undefined,
+                });
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange(color);
+            }
+            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+            close();
+        }, theme: theme, resetButtonTitle: "No fill", userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }));
+    var applyFill = function (next) {
+        onChangeFill === null || onChangeFill === void 0 ? void 0 : onChangeFill(next);
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+    };
     return (react_1.default.createElement(ui_1.Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
         react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
-            react_1.default.createElement(ui_2.IconButton, { className: "text-base flex-row", style: {
-                    borderBottom: "4px ".concat(colorString, " solid"),
-                }, tooltip: "Fill color", onClick: open, disabled: disabled },
+            react_1.default.createElement(ui_2.IconButton, { className: "text-base flex-row", style: swatchStyle, tooltip: "Fill color", "aria-label": "Fill color", onClick: open, disabled: disabled },
                 react_1.default.createElement(icons_1.IoMdColorFill, null))),
-        react_1.default.createElement(ui_1.PopoverContent, { align: "start" },
-            react_1.default.createElement(ColorSelectorComponent, { color: color, onChange: function (color) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(color);
-                    focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
-                    close();
-                }, theme: theme, resetButtonTitle: "No fill", userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }))));
+        react_1.default.createElement(ui_1.PopoverContent, { align: "start" }, onChangeFill ? (react_1.default.createElement(ui_2.Tabs, { defaultValue: (fill === null || fill === void 0 ? void 0 : fill.gradient)
+                ? "gradient"
+                : (fill === null || fill === void 0 ? void 0 : fill.fillPattern) && fill.fillPattern !== "none"
+                    ? "pattern"
+                    : "solid" },
+            react_1.default.createElement(ui_2.TabsList, { className: "grid-cols-3 mb-2" },
+                react_1.default.createElement(ui_2.TabsTrigger, { value: "solid" }, "Solid"),
+                react_1.default.createElement(ui_2.TabsTrigger, { value: "pattern" }, "Pattern"),
+                react_1.default.createElement(ui_2.TabsTrigger, { value: "gradient" }, "Gradient")),
+            react_1.default.createElement(ui_2.TabsContent, { value: "solid" }, solidPicker),
+            react_1.default.createElement(ui_2.TabsContent, { value: "pattern" },
+                react_1.default.createElement(fill_selectors_1.PatternFillPicker, { fill: tslib_1.__assign(tslib_1.__assign({}, fill), { backgroundColor: (_b = fill === null || fill === void 0 ? void 0 : fill.backgroundColor) !== null && _b !== void 0 ? _b : color }), theme: theme, onChangeFill: applyFill })),
+            react_1.default.createElement(ui_2.TabsContent, { value: "gradient" },
+                react_1.default.createElement(fill_selectors_1.GradientFillPicker, { fill: tslib_1.__assign(tslib_1.__assign({}, fill), { backgroundColor: (_c = fill === null || fill === void 0 ? void 0 : fill.backgroundColor) !== null && _c !== void 0 ? _c : color }), theme: theme, onChangeFill: applyFill })))) : (solidPicker))));
 };
 exports.BackgroundColorSelector = BackgroundColorSelector;

package/dist/cjs/components/toolbar/cell-style-selector.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CellFormat } from "../../types";
+import type { CellFormat, NamedCellStyle } from "../../types";
 import type { SpreadsheetTheme } from "../canvas-grid/typings";
 type WithCellFormat = (value: CellFormat) => void;
 type WithTypeValue<T extends keyof CellFormat> = (type: T, value: CellFormat[T]) => void;
@@ -8,6 +8,13 @@ export type CellStyleSelectorProps = {
     locale?: string;
     theme: SpreadsheetTheme;
     userDefinedStyles?: [string, CellFormat][];
+    /**
+     * Workbook named cell styles imported from `<cellStyles>` ("Heading 1",
+     * "Good", "Accent 1", …). Shown as a "Workbook styles" section ahead of
+     * the built-in gallery; hidden entries and the "Normal" base style are
+     * skipped, as is any entry whose xf resolved to no formatting.
+     */
+    namedCellStyles?: NamedCellStyle[] | null;
     selectedFormat?: CellFormat | null;
     onAddUserDefinedStyle?(name: string): void;
     onChangeFormatting: (...args: Parameters<WithCellFormat | WithTypeValue<keyof CellFormat>>) => void;
@@ -19,7 +26,13 @@ type StyleList = [
     format: CellFormat,
     style?: React.CSSProperties
 ];
+/** Named styles worth showing in the gallery (see `namedCellStyles` prop). */
+export declare const getGalleryNamedCellStyles: (namedCellStyles: NamedCellStyle[] | null | undefined) => Array<NamedCellStyle & {
+    format: CellFormat;
+}>;
+/** CSS preview of a named style's format for the gallery swatch. */
+export declare const getNamedCellStylePreview: (format: CellFormat | undefined, theme: SpreadsheetTheme) => React.CSSProperties;
 export declare const getCellStyles: (theme: SpreadsheetTheme, currencySymbol?: string) => Map<string, StyleList[]>;
-export declare const CellStyleSelector: React.MemoExoticComponent<({ currency, locale, theme, selectedFormat, canAddCustomStyle, onChangeFormatting, onClearFormatting, }: CellStyleSelectorProps) => React.JSX.Element>;
+export declare const CellStyleSelector: React.MemoExoticComponent<({ currency, locale, theme, selectedFormat, namedCellStyles, canAddCustomStyle, onChangeFormatting, onClearFormatting, }: CellStyleSelectorProps) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=cell-style-selector.d.ts.map

package/dist/cjs/components/toolbar/cell-style-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/cell-style-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EAAE,UAAU,EAAuB,MAAM,aAAa,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAClD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,CAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;IAC3C,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC,qBAAqB,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAClB,GAAG,IAAI,EAAE,UAAU,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,UAAU,CAAC,CAAC,KAClE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,gBAAgB,EACvB,iBAAiB,MAAM,6BAgYxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qIASzB,sBAAsB,uBAwM1B,CAAC"}
+{"version":3,"file":"cell-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/cell-style-selector.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,KAAK,EACV,UAAU,EAEV,cAAc,EAEf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAClD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,UAAU,IAAI,CAC/C,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC,qBAAqB,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAClB,GAAG,IAAI,EAAE,UAAU,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,UAAU,CAAC,CAAC,KAClE,IAAI,CAAC;IACV,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,MAAM,EAAE,UAAU;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa;CAC5B,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,GACpC,iBAAiB,cAAc,EAAE,GAAG,IAAI,GAAG,SAAS,KACnD,KAAK,CAAC,cAAc,GAAG;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,CAQ7C,CAAC;AAcJ,oEAAoE;AACpE,eAAO,MAAM,wBAAwB,GACnC,QAAQ,UAAU,GAAG,SAAS,EAC9B,OAAO,gBAAgB,KACtB,KAAK,CAAC,aAqBR,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,OAAO,gBAAgB,EACvB,iBAAiB,MAAM,6BAgYxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,sJAUzB,sBAAsB,uBAsO1B,CAAC"}

package/dist/cjs/components/toolbar/cell-style-selector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CellStyleSelector = exports.getCellStyles = void 0;
+exports.CellStyleSelector = exports.getCellStyles = exports.getNamedCellStylePreview = exports.getGalleryNamedCellStyles = void 0;
 var tslib_1 = require("tslib");
 var icons_1 = require("@rowsncolumns/icons");
 var icons_2 = require("@rowsncolumns/icons");
@@ -12,6 +12,54 @@ var react_1 = tslib_1.__importStar(require("react"));
 var atoms_1 = require("../../atoms");
 var helpers_1 = require("../../helpers");
 var themes_1 = require("../../themes");
+/** Named styles worth showing in the gallery (see `namedCellStyles` prop). */
+var getGalleryNamedCellStyles = function (namedCellStyles) {
+    return (namedCellStyles !== null && namedCellStyles !== void 0 ? namedCellStyles : []).filter(function (style) {
+        return !style.hidden &&
+            style.builtinId !== 0 &&
+            style.name !== "Normal" &&
+            !!style.format &&
+            Object.keys(style.format).length > 0;
+    });
+};
+exports.getGalleryNamedCellStyles = getGalleryNamedCellStyles;
+var previewBorder = function (border, theme) {
+    var _a;
+    return border
+        ? "".concat((_a = border.width) !== null && _a !== void 0 ? _a : 1, "px ").concat(border.style === "double" ? "double" : "solid", " ").concat((0, themes_1.getStringifiedColor)(border.color, theme))
+        : undefined;
+};
+/** CSS preview of a named style's format for the gallery swatch. */
+var getNamedCellStylePreview = function (format, theme) {
+    if (!format)
+        return {};
+    var style = {};
+    if (format.backgroundColor) {
+        style.backgroundColor = (0, themes_1.getStringifiedColor)(format.backgroundColor, theme);
+    }
+    var text = format.textFormat;
+    if (text === null || text === void 0 ? void 0 : text.color)
+        style.color = (0, themes_1.getStringifiedColor)(text.color, theme);
+    if (text === null || text === void 0 ? void 0 : text.bold)
+        style.fontWeight = "bold";
+    if (text === null || text === void 0 ? void 0 : text.italic)
+        style.fontStyle = "italic";
+    if (text === null || text === void 0 ? void 0 : text.underline)
+        style.textDecoration = "underline";
+    if (text === null || text === void 0 ? void 0 : text.fontSize)
+        style.fontSize = text.fontSize;
+    if (text === null || text === void 0 ? void 0 : text.fontFamily)
+        style.fontFamily = text.fontFamily;
+    var borders = format.borders;
+    if (borders) {
+        style.borderTop = previewBorder(borders.top, theme);
+        style.borderBottom = previewBorder(borders.bottom, theme);
+        style.borderLeft = previewBorder(borders.left, theme);
+        style.borderRight = previewBorder(borders.right, theme);
+    }
+    return style;
+};
+exports.getNamedCellStylePreview = getNamedCellStylePreview;
 var getCellStyles = function (theme, currencySymbol) {
     return new Map([
         [
@@ -389,13 +437,14 @@ var getCellStyles = function (theme, currencySymbol) {
 };
 exports.getCellStyles = getCellStyles;
 exports.CellStyleSelector = (0, react_1.memo)(function (_a) {
-    var currency = _a.currency, locale = _a.locale, theme = _a.theme, selectedFormat = _a.selectedFormat, _b = _a.canAddCustomStyle, canAddCustomStyle = _b === void 0 ? false : _b, onChangeFormatting = _a.onChangeFormatting, onClearFormatting = _a.onClearFormatting;
+    var currency = _a.currency, locale = _a.locale, theme = _a.theme, selectedFormat = _a.selectedFormat, namedCellStyles = _a.namedCellStyles, _b = _a.canAddCustomStyle, canAddCustomStyle = _b === void 0 ? false : _b, onChangeFormatting = _a.onChangeFormatting, onClearFormatting = _a.onClearFormatting;
     var colorIndexes = [4, 5, 6, 7, 8, 9];
     var colorTints = [0.8, 0.6, 0.4, 0];
     var currencySymbol = (0, helpers_1.getCurrencySymbol)(locale, currency);
     var shouldFocusSheetRef = (0, react_1.useRef)(true);
     var focusSheet = (0, atoms_1.useFocusSheet)();
     var cellStyles = (0, react_1.useMemo)(function () { return tslib_1.__spreadArray([], tslib_1.__read((0, exports.getCellStyles)(theme, currencySymbol).entries()), false); }, [theme, currencySymbol]);
+    var workbookStyles = (0, react_1.useMemo)(function () { return (0, exports.getGalleryNamedCellStyles)(namedCellStyles); }, [namedCellStyles]);
     // Number formats
     var numberFormats = [
         [
@@ -440,7 +489,7 @@ exports.CellStyleSelector = (0, react_1.memo)(function (_a) {
     var gridClass = "grid grid-cols-3 md:grid-cols-6 gap-1 pb-1";
     return (react_1.default.createElement(ui_2.DropdownMenu, { modal: false },
         react_1.default.createElement(ui_2.DropdownMenuTrigger, { asChild: true },
-            react_1.default.createElement(ui_2.IconButton, { size: "xl", tooltip: "Cell styles", className: "gap-1" },
+            react_1.default.createElement(ui_2.IconButton, { size: "xl", tooltip: "Cell styles", "aria-label": "Cell styles", className: "gap-1" },
                 react_1.default.createElement(icons_2.MdBrush, null),
                 react_1.default.createElement("div", { className: "text-xs" }, "Cell styles"),
                 react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
@@ -454,6 +503,10 @@ exports.CellStyleSelector = (0, react_1.memo)(function (_a) {
                     shouldFocusSheetRef.current = false;
                 } },
                 react_1.default.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" },
+                    workbookStyles.length ? (react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: headingClass }, "Workbook styles"),
+                        react_1.default.createElement(ui_1.Separator, { className: "mb-2" }),
+                        react_1.default.createElement("div", { className: gridClass }, workbookStyles.map(function (namedStyle) { return (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onChangeFormatting(namedStyle.format); }, className: hoverClass, key: "".concat(namedStyle.name, "-").concat(namedStyle.xfId), style: (0, exports.getNamedCellStylePreview)(namedStyle.format, theme) }, namedStyle.name)); })))) : null,
                     cellStyles.map(function (_a) {
                         var _b = tslib_1.__read(_a, 2), category = _b[0], cellStyleList = _b[1];
                         return (react_1.default.createElement("div", { key: category },

package/dist/cjs/components/toolbar/fill-selectors.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import type { CellFormat, FillPattern, GradientFill } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+/** The fill-related slice of a cell format the fill popover authors. */
+export type CellFill = Pick<CellFormat, "backgroundColor" | "fillPattern" | "foregroundColor" | "gradient">;
+/** Excel's Format Cells → Fill → Pattern Style menu, in Excel's order. */
+export declare const FILL_PATTERN_OPTIONS: ReadonlyArray<{
+    pattern: FillPattern;
+    label: string;
+}>;
+/**
+ * Excel's Fill Effects → Shading styles. `degree` follows OOXML
+ * `<gradientFill degree>`: 0 runs left → right, 90 top → bottom.
+ */
+export declare const GRADIENT_PRESETS: ReadonlyArray<{
+    label: string;
+    gradient: Omit<GradientFill, "stops">;
+}>;
+/** Two-stop gradient from a preset and two colours. */
+export declare const buildGradientFill: (preset: Omit<GradientFill, "stops">, color1: string, color2: string) => GradientFill;
+/**
+ * CSS preview of a gradient fill. OOXML measures the linear angle from the
+ * left→right axis; CSS from the bottom→top axis, so CSS = degree + 90.
+ */
+export declare const gradientToCss: (gradient: GradientFill) => string;
+export type PatternFillPickerProps = {
+    fill?: CellFill | null;
+    theme: SpreadsheetTheme;
+    onChangeFill(fill: CellFill): void;
+};
+/**
+ * Pattern fill authoring (Excel: Format Cells → Fill → Pattern Color /
+ * Pattern Style). The pattern paints in `foregroundColor` over the solid
+ * `backgroundColor`; a gradient on the cell is cleared, as Excel treats the
+ * two as exclusive.
+ */
+export declare const PatternFillPicker: ({ fill, theme, onChangeFill, }: PatternFillPickerProps) => React.JSX.Element;
+export type GradientFillPickerProps = {
+    fill?: CellFill | null;
+    theme: SpreadsheetTheme;
+    onChangeFill(fill: CellFill): void;
+};
+/**
+ * Gradient fill authoring (Excel: Fill Effects → Gradient, two colours +
+ * shading style). Picking a style applies immediately with the two colours;
+ * changing a colour re-applies when the cell already has a gradient.
+ */
+export declare const GradientFillPicker: ({ fill, theme, onChangeFill, }: GradientFillPickerProps) => React.JSX.Element;
+//# sourceMappingURL=fill-selectors.d.ts.map

package/dist/cjs/components/toolbar/fill-selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill-selectors.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/fill-selectors.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,wEAAwE;AACxE,MAAM,MAAM,QAAQ,GAAG,IAAI,CACzB,UAAU,EACV,iBAAiB,GAAG,aAAa,GAAG,iBAAiB,GAAG,UAAU,CACnE,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,oBAAoB,EAAE,aAAa,CAAC;IAC/C,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAkBA,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;CACvC,CASA,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,EACnC,QAAQ,MAAM,EACd,QAAQ,MAAM,KACb,YAMD,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,UAAU,YAAY,KAAG,MAUtD,CAAC;AAqCF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,gCAI/B,sBAAsB,sBA+ExB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,gCAIhC,uBAAuB,sBA8FzB,CAAC"}

package/dist/cjs/components/toolbar/fill-selectors.js

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GradientFillPicker = exports.PatternFillPicker = exports.gradientToCss = exports.buildGradientFill = exports.GRADIENT_PRESETS = exports.FILL_PATTERN_OPTIONS = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var fill_patterns_1 = require("../../api/fill-patterns");
+var themes_1 = require("../../themes");
+/** Excel's Format Cells → Fill → Pattern Style menu, in Excel's order. */
+exports.FILL_PATTERN_OPTIONS = [
+    { pattern: "gray0625", label: "6.25% Gray" },
+    { pattern: "gray125", label: "12.5% Gray" },
+    { pattern: "lightGray", label: "25% Gray" },
+    { pattern: "mediumGray", label: "50% Gray" },
+    { pattern: "darkGray", label: "75% Gray" },
+    { pattern: "darkHorizontal", label: "Horizontal Stripe" },
+    { pattern: "darkVertical", label: "Vertical Stripe" },
+    { pattern: "darkDown", label: "Reverse Diagonal Stripe" },
+    { pattern: "darkUp", label: "Diagonal Stripe" },
+    { pattern: "darkGrid", label: "Diagonal Crosshatch" },
+    { pattern: "darkTrellis", label: "Thick Diagonal Crosshatch" },
+    { pattern: "lightHorizontal", label: "Thin Horizontal Stripe" },
+    { pattern: "lightVertical", label: "Thin Vertical Stripe" },
+    { pattern: "lightDown", label: "Thin Reverse Diagonal Stripe" },
+    { pattern: "lightUp", label: "Thin Diagonal Stripe" },
+    { pattern: "lightGrid", label: "Thin Horizontal Crosshatch" },
+    { pattern: "lightTrellis", label: "Thin Diagonal Crosshatch" },
+];
+/**
+ * Excel's Fill Effects → Shading styles. `degree` follows OOXML
+ * `<gradientFill degree>`: 0 runs left → right, 90 top → bottom.
+ */
+exports.GRADIENT_PRESETS = [
+    { label: "Horizontal", gradient: { type: "linear", degree: 90 } },
+    { label: "Vertical", gradient: { type: "linear", degree: 0 } },
+    { label: "Diagonal up", gradient: { type: "linear", degree: 45 } },
+    { label: "Diagonal down", gradient: { type: "linear", degree: 135 } },
+    {
+        label: "From center",
+        gradient: { type: "path", left: 0.5, right: 0.5, top: 0.5, bottom: 0.5 },
+    },
+];
+/** Two-stop gradient from a preset and two colours. */
+var buildGradientFill = function (preset, color1, color2) { return (tslib_1.__assign(tslib_1.__assign({}, preset), { stops: [
+        { position: 0, color: color1 },
+        { position: 1, color: color2 },
+    ] })); };
+exports.buildGradientFill = buildGradientFill;
+/**
+ * CSS preview of a gradient fill. OOXML measures the linear angle from the
+ * left→right axis; CSS from the bottom→top axis, so CSS = degree + 90.
+ */
+var gradientToCss = function (gradient) {
+    var _a;
+    var stops = gradient.stops
+        .slice()
+        .sort(function (a, b) { return a.position - b.position; })
+        .map(function (stop) { return "".concat(stop.color, " ").concat(Math.round(stop.position * 100), "%"); })
+        .join(", ");
+    if (gradient.type === "path") {
+        return "radial-gradient(circle, ".concat(stops, ")");
+    }
+    return "linear-gradient(".concat((((_a = gradient.degree) !== null && _a !== void 0 ? _a : 0) + 90) % 360, "deg, ").concat(stops, ")");
+};
+exports.gradientToCss = gradientToCss;
+var DEFAULT_PATTERN_COLOR = "#000000";
+var PatternSwatch = function (_a) {
+    var pattern = _a.pattern, foregroundColor = _a.foregroundColor, backgroundColor = _a.backgroundColor, label = _a.label;
+    var url = (0, react_1.useMemo)(function () {
+        var _a;
+        var canvas = (0, fill_patterns_1.getPatternCanvas)(pattern, foregroundColor, backgroundColor);
+        try {
+            return (_a = canvas === null || canvas === void 0 ? void 0 : canvas.toDataURL()) !== null && _a !== void 0 ? _a : undefined;
+        }
+        catch (_b) {
+            return undefined;
+        }
+    }, [pattern, foregroundColor, backgroundColor]);
+    return (react_1.default.createElement("span", { "aria-hidden": "true", className: "block w-full h-full border border-solid border-rnc-border", style: url
+            ? { backgroundImage: "url(".concat(url, ")"), backgroundRepeat: "repeat" }
+            : { backgroundColor: backgroundColor }, title: label }));
+};
+/**
+ * Pattern fill authoring (Excel: Format Cells → Fill → Pattern Color /
+ * Pattern Style). The pattern paints in `foregroundColor` over the solid
+ * `backgroundColor`; a gradient on the cell is cleared, as Excel treats the
+ * two as exclusive.
+ */
+var PatternFillPicker = function (_a) {
+    var fill = _a.fill, theme = _a.theme, onChangeFill = _a.onChangeFill;
+    var background = (fill === null || fill === void 0 ? void 0 : fill.backgroundColor)
+        ? (0, themes_1.getStringifiedColor)(fill.backgroundColor, theme)
+        : undefined;
+    var patternColor = (fill === null || fill === void 0 ? void 0 : fill.foregroundColor)
+        ? (0, themes_1.getStringifiedColor)(fill.foregroundColor, theme)
+        : DEFAULT_PATTERN_COLOR;
+    var activePattern = (fill === null || fill === void 0 ? void 0 : fill.fillPattern) &&
+        fill.fillPattern !== "none" &&
+        fill.fillPattern !== "solid"
+        ? fill.fillPattern
+        : undefined;
+    var apply = function (pattern, foregroundColor) {
+        var _a;
+        return onChangeFill({
+            backgroundColor: (_a = fill === null || fill === void 0 ? void 0 : fill.backgroundColor) !== null && _a !== void 0 ? _a : undefined,
+            fillPattern: pattern,
+            foregroundColor: pattern ? foregroundColor : undefined,
+            gradient: undefined,
+        });
+    };
+    return (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1" },
+        react_1.default.createElement(ui_1.Button, { variant: "outline", size: "xs", tabIndex: -1, className: "justify-center py-1", onClick: function () { return apply(undefined, undefined); } }, "No pattern"),
+        react_1.default.createElement("div", { className: "pt-2 text-xs text-left" }, "Pattern style"),
+        react_1.default.createElement("div", { role: "group", "aria-label": "Pattern style", className: "grid grid-cols-6 gap-1" }, exports.FILL_PATTERN_OPTIONS.map(function (_a) {
+            var pattern = _a.pattern, label = _a.label;
+            return (react_1.default.createElement("button", { type: "button", key: pattern, "aria-label": label, "aria-pressed": activePattern === pattern, className: "w-6 h-6 p-0 border-2 border-solid rounded-sm bg-transparent cursor-pointer ".concat(activePattern === pattern
+                    ? "border-rnc-primary"
+                    : "border-transparent"), onClick: function () {
+                    return apply(pattern, (fill === null || fill === void 0 ? void 0 : fill.foregroundColor) ? patternColor : undefined);
+                } },
+                react_1.default.createElement(PatternSwatch, { pattern: pattern, foregroundColor: patternColor, backgroundColor: background, label: label })));
+        })),
+        react_1.default.createElement("div", { className: "pt-2 text-xs text-left" }, "Pattern color"),
+        react_1.default.createElement(ui_1.ColorPicker, { value: patternColor, colors: themes_1.STANDARD_COLORS, onChange: function (color) { return apply(activePattern !== null && activePattern !== void 0 ? activePattern : "darkGray", color); }, className: "gap-1" }),
+        react_1.default.createElement("div", { className: "flex items-center gap-1" },
+            react_1.default.createElement(ui_1.HexColorPicker, { value: patternColor, onChange: function (color) { return apply(activePattern !== null && activePattern !== void 0 ? activePattern : "darkGray", color); } }))));
+};
+exports.PatternFillPicker = PatternFillPicker;
+/**
+ * Gradient fill authoring (Excel: Fill Effects → Gradient, two colours +
+ * shading style). Picking a style applies immediately with the two colours;
+ * changing a colour re-applies when the cell already has a gradient.
+ */
+var GradientFillPicker = function (_a) {
+    var _b;
+    var fill = _a.fill, theme = _a.theme, onChangeFill = _a.onChangeFill;
+    var existing = (_b = fill === null || fill === void 0 ? void 0 : fill.gradient) !== null && _b !== void 0 ? _b : undefined;
+    var _c = tslib_1.__read((0, react_1.useState)(function () {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = existing === null || existing === void 0 ? void 0 : existing.stops) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : ((fill === null || fill === void 0 ? void 0 : fill.backgroundColor)
+            ? (0, themes_1.getStringifiedColor)(fill.backgroundColor, theme)
+            : "#FFFFFF");
+    }), 2), color1 = _c[0], setColor1 = _c[1];
+    var _d = tslib_1.__read((0, react_1.useState)(function () { var _a, _b, _c; return (_c = (_b = (_a = existing === null || existing === void 0 ? void 0 : existing.stops) === null || _a === void 0 ? void 0 : _a[existing.stops.length - 1]) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : "#4472C4"; }), 2), color2 = _d[0], setColor2 = _d[1];
+    var apply = function (preset, c1, c2) {
+        if (c1 === void 0) { c1 = color1; }
+        if (c2 === void 0) { c2 = color2; }
+        return onChangeFill({
+            backgroundColor: undefined,
+            fillPattern: undefined,
+            foregroundColor: undefined,
+            gradient: (0, exports.buildGradientFill)(preset, c1, c2),
+        });
+    };
+    var reapply = function (c1, c2) {
+        if (!existing)
+            return;
+        var _stops = existing.stops, preset = tslib_1.__rest(existing, ["stops"]);
+        apply(preset, c1, c2);
+    };
+    var isActive = function (preset) {
+        var _a, _b;
+        return !!existing &&
+            existing.type === preset.type &&
+            (preset.type === "path" || ((_a = existing.degree) !== null && _a !== void 0 ? _a : 0) === ((_b = preset.degree) !== null && _b !== void 0 ? _b : 0));
+    };
+    return (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1" },
+        react_1.default.createElement(ui_1.Button, { variant: "outline", size: "xs", tabIndex: -1, className: "justify-center py-1", onClick: function () {
+                var _a, _b, _c;
+                return onChangeFill({
+                    backgroundColor: (_a = fill === null || fill === void 0 ? void 0 : fill.backgroundColor) !== null && _a !== void 0 ? _a : undefined,
+                    fillPattern: (_b = fill === null || fill === void 0 ? void 0 : fill.fillPattern) !== null && _b !== void 0 ? _b : undefined,
+                    foregroundColor: (_c = fill === null || fill === void 0 ? void 0 : fill.foregroundColor) !== null && _c !== void 0 ? _c : undefined,
+                    gradient: undefined,
+                });
+            } }, "No gradient"),
+        react_1.default.createElement("div", { className: "grid grid-cols-[auto_1fr] items-center gap-2 pt-2 text-xs" },
+            react_1.default.createElement("span", null, "Color 1"),
+            react_1.default.createElement(ui_1.HexColorPicker, { value: color1, onChange: function (color) {
+                    setColor1(color);
+                    reapply(color, color2);
+                } }),
+            react_1.default.createElement("span", null, "Color 2"),
+            react_1.default.createElement(ui_1.HexColorPicker, { value: color2, onChange: function (color) {
+                    setColor2(color);
+                    reapply(color1, color);
+                } })),
+        react_1.default.createElement("div", { className: "pt-2 text-xs text-left" }, "Shading style"),
+        react_1.default.createElement("div", { role: "group", "aria-label": "Shading style", className: "grid grid-cols-5 gap-1" }, exports.GRADIENT_PRESETS.map(function (_a) {
+            var label = _a.label, gradient = _a.gradient;
+            return (react_1.default.createElement("button", { type: "button", key: label, "aria-label": label, "aria-pressed": isActive(gradient), className: "w-8 h-6 p-0 border-2 border-solid rounded-sm cursor-pointer ".concat(isActive(gradient) ? "border-rnc-primary" : "border-rnc-border"), style: {
+                    backgroundImage: (0, exports.gradientToCss)((0, exports.buildGradientFill)(gradient, color1, color2)),
+                }, onClick: function () { return apply(gradient); } }));
+        }))));
+};
+exports.GradientFillPicker = GradientFillPicker;

package/dist/cjs/components/toolbar/index.d.ts

@@ -4,12 +4,14 @@ export * from "./scale-selector";
 export * from "./font-size-selector";
 export * from "./text-color-selector";
 export * from "./background-color-selector";
+export * from "./fill-selectors";
 export * from "./merge-cells-selector";
 export * from "./border-selector";
 export * from "./font-family-selector";
 export * from "./text-horizontal-align-selector";
 export * from "./text-vertical-align-selector";
 export * from "./text-wrap-selector";
+export * from "./text-rotation-selector";
 export * from "./text-format-selector";
 export * from "./theme-selector";
 export * from "./table-actions";

package/dist/cjs/components/toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

package/dist/cjs/components/toolbar/index.js

@@ -7,12 +7,14 @@ tslib_1.__exportStar(require("./scale-selector"), exports);
 tslib_1.__exportStar(require("./font-size-selector"), exports);
 tslib_1.__exportStar(require("./text-color-selector"), exports);
 tslib_1.__exportStar(require("./background-color-selector"), exports);
+tslib_1.__exportStar(require("./fill-selectors"), exports);
 tslib_1.__exportStar(require("./merge-cells-selector"), exports);
 tslib_1.__exportStar(require("./border-selector"), exports);
 tslib_1.__exportStar(require("./font-family-selector"), exports);
 tslib_1.__exportStar(require("./text-horizontal-align-selector"), exports);
 tslib_1.__exportStar(require("./text-vertical-align-selector"), exports);
 tslib_1.__exportStar(require("./text-wrap-selector"), exports);
+tslib_1.__exportStar(require("./text-rotation-selector"), exports);
 tslib_1.__exportStar(require("./text-format-selector"), exports);
 tslib_1.__exportStar(require("./theme-selector"), exports);
 tslib_1.__exportStar(require("./table-actions"), exports);

package/dist/cjs/components/toolbar/text-horizontal-align-selector.d.ts

@@ -5,6 +5,14 @@ type TextHorizontalAlignSelectorProps = {
     value: HorizontalAlign | undefined | null;
     onChange(value: HorizontalAlign): void;
 };
+/**
+ * Excel's remaining Format Cells → Alignment → Horizontal entries. They have
+ * no toolbar glyph, so they render as labelled buttons under the icon row.
+ */
+export declare const EXTENDED_HORIZONTAL_ALIGNMENTS: ReadonlyArray<{
+    value: HorizontalAlign;
+    label: string;
+}>;
 export declare const TextHorizontalAlignSelector: ({ value, onChange, disabled, }: TextHorizontalAlignSelectorProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=text-horizontal-align-selector.d.ts.map

package/dist/cjs/components/toolbar/text-horizontal-align-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-horizontal-align-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-horizontal-align-selector.tsx"],"names":[],"mappings":"AASA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,KAAK,gCAAgC,GAAG;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,gCAIzC,gCAAgC,sBA0DlC,CAAC"}
+{"version":3,"file":"text-horizontal-align-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-horizontal-align-selector.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,KAAK,gCAAgC,GAAG;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;CACxC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,8BAA8B,EAAE,aAAa,CAAC;IACzD,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAGA,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,gCAIzC,gCAAgC,sBA6FlC,CAAC"}

package/dist/cjs/components/toolbar/text-horizontal-align-selector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextHorizontalAlignSelector = void 0;
+exports.TextHorizontalAlignSelector = exports.EXTENDED_HORIZONTAL_ALIGNMENTS = void 0;
 var tslib_1 = require("tslib");
 var icons_1 = require("@rowsncolumns/icons");
 var ui_1 = require("@rowsncolumns/ui");
@@ -8,15 +8,28 @@ var ui_2 = require("@rowsncolumns/ui");
 var ui_3 = require("@rowsncolumns/ui");
 var react_1 = tslib_1.__importStar(require("react"));
 var atoms_1 = require("../../atoms");
+/**
+ * Excel's remaining Format Cells → Alignment → Horizontal entries. They have
+ * no toolbar glyph, so they render as labelled buttons under the icon row.
+ */
+exports.EXTENDED_HORIZONTAL_ALIGNMENTS = [
+    { value: "distributed", label: "Distributed" },
+    { value: "fill", label: "Fill" },
+];
 var TextHorizontalAlignSelector = function (_a) {
     var _b = _a.value, value = _b === void 0 ? "left" : _b, onChange = _a.onChange, disabled = _a.disabled;
     var focusSheet = (0, atoms_1.useFocusSheet)();
     var _c = tslib_1.__read((0, react_1.useState)(false), 2), isOpen = _c[0], onOpenChange = _c[1];
     var close = function () { return onOpenChange(false); };
+    var select = function (next) {
+        onChange(next);
+        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+        close();
+    };
     return (react_1.default.createElement(ui_2.Popover, { open: isOpen, onOpenChange: onOpenChange },
         react_1.default.createElement(ui_2.PopoverTrigger, { asChild: true },
-            react_1.default.createElement(ui_1.IconButton, { size: "lg", tooltip: "Horizontal align", disabled: disabled },
-                value === "right" ? (react_1.default.createElement(icons_1.MdFormatAlignRight, null)) : value === "center" ? (react_1.default.createElement(icons_1.MdFormatAlignCenter, null)) : (react_1.default.createElement(icons_1.MdFormatAlignLeft, null)),
+            react_1.default.createElement(ui_1.IconButton, { size: "lg", tooltip: "Horizontal align", "aria-label": "Horizontal align", disabled: disabled },
+                value === "right" ? (react_1.default.createElement(icons_1.MdFormatAlignRight, null)) : value === "center" || value === "centerContinuous" ? (react_1.default.createElement(icons_1.MdFormatAlignCenter, null)) : value === "justify" || value === "distributed" ? (react_1.default.createElement(icons_1.MdFormatAlignJustify, null)) : (react_1.default.createElement(icons_1.MdFormatAlignLeft, null)),
                 react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
         react_1.default.createElement(ui_2.PopoverContent, { align: "start" },
             react_1.default.createElement(ui_3.Stack, { direction: "horizontal", className: "gap-1 max-w-[140px] flex-wrap" },
@@ -37,6 +50,12 @@ var TextHorizontalAlignSelector = function (_a) {
                         focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
                         close();
                     } },
-                    react_1.default.createElement(icons_1.MdFormatAlignRight, null))))));
+                    react_1.default.createElement(icons_1.MdFormatAlignRight, null)),
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", tooltip: "Justify", "aria-label": "Justify", isActive: value === "justify", onClick: function () { return select("justify"); } },
+                    react_1.default.createElement(icons_1.MdFormatAlignJustify, null))),
+            react_1.default.createElement(ui_3.Stack, { direction: "horizontal", className: "gap-1 pt-1 max-w-[140px]" }, exports.EXTENDED_HORIZONTAL_ALIGNMENTS.map(function (_a) {
+                var option = _a.value, label = _a.label;
+                return (react_1.default.createElement(ui_1.Button, { key: option, type: "button", variant: value === option ? "secondary" : "ghost", size: "xs", "aria-pressed": value === option, onClick: function () { return select(option); } }, label));
+            })))));
 };
 exports.TextHorizontalAlignSelector = TextHorizontalAlignSelector;

package/dist/cjs/components/toolbar/text-rotation-selector.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { CellFormat } from "../../types";
+export type TextRotationValue = NonNullable<CellFormat["textRotation"]>;
+type TextRotationPreset = {
+    label: string;
+    value: TextRotationValue;
+};
+/**
+ * Excel's Orientation menu. Degrees are counter-clockwise positive (Excel's
+ * convention, what the renderer and the xlsx round-trip use), so "clockwise"
+ * presets are negative. `0` is horizontal — used instead of clearing the
+ * property so both engines apply it as a plain format write.
+ */
+export declare const TEXT_ROTATION_PRESETS: TextRotationPreset[];
+export declare const MIN_TEXT_ROTATION = -90;
+export declare const MAX_TEXT_ROTATION = 90;
+/**
+ * Coerce free-form degree input into the supported -90…90 range. Returns
+ * `undefined` for input that is not a finite number.
+ */
+export declare const clampTextRotation: (input: string | number) => number | undefined;
+type TextRotationSelectorProps = {
+    disabled?: boolean;
+    value?: CellFormat["textRotation"];
+    onChange(value: TextRotationValue): void;
+};
+export declare const TextRotationSelector: ({ value, onChange, disabled, }: TextRotationSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=text-rotation-selector.d.ts.map

package/dist/cjs/components/toolbar/text-rotation-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-rotation-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-rotation-selector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC;AAExE,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,kBAAkB,EAOrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM,GAAG,MAAM,uBAMvD,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,gCAIlC,yBAAyB,sBAoF3B,CAAC"}