@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,531 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CellStyleSelector = exports.getCellStyles = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var icons_2 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var ui_2 = require("@rowsncolumns/ui");
+var ui_3 = require("@rowsncolumns/ui");
+var ui_4 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var atoms_1 = require("../../atoms");
+var helpers_1 = require("../../helpers");
+var themes_1 = require("../../themes");
+var getCellStyles = function (theme, currencySymbol) {
+    return new Map([
+        [
+            "Good, Bad and Neutral",
+            [
+                ["Normal", {}],
+                [
+                    "Good",
+                    {
+                        textFormat: {
+                            color: "#0B5001",
+                        },
+                        backgroundColor: "#BBEDC2",
+                    },
+                    {
+                        backgroundColor: "#BBEDC2",
+                        color: "#0B5001",
+                    },
+                ],
+                [
+                    "Bad",
+                    {
+                        textFormat: {
+                            color: "#920014",
+                        },
+                        backgroundColor: "#FDB9C3",
+                    },
+                    {
+                        backgroundColor: "#FDB9C3",
+                        color: "#920014",
+                    },
+                ],
+                [
+                    "Neutral",
+                    {
+                        textFormat: {
+                            color: "#894402",
+                        },
+                        backgroundColor: "#FFE88B",
+                    },
+                    {
+                        backgroundColor: "#FFE88B",
+                        color: "#894402",
+                    },
+                ],
+            ],
+        ],
+        [
+            "Data and Model",
+            [
+                [
+                    "Calculation",
+                    {
+                        backgroundColor: "#EFEFEF",
+                        textFormat: {
+                            color: "#F66806",
+                            bold: true,
+                            fontSize: 12,
+                        },
+                        borders: {
+                            top: { width: 1, style: "solid", color: { theme: 3 } },
+                            bottom: { width: 1, style: "solid", color: { theme: 3 } },
+                            left: { width: 1, style: "solid", color: { theme: 3 } },
+                            right: { width: 1, style: "solid", color: { theme: 3 } },
+                        },
+                    },
+                    {
+                        backgroundColor: "#EFEFEF",
+                        color: "#F66806",
+                        fontWeight: "bold",
+                        fontSize: 12,
+                        border: "1px solid ".concat((0, themes_1.getStringifiedColor)({ theme: 3 }, theme)),
+                    },
+                ],
+                [
+                    "Check Cell",
+                    {
+                        backgroundColor: "#949494",
+                        textFormat: {
+                            color: { theme: 0 },
+                            bold: true,
+                            fontSize: 12,
+                        },
+                        borders: {
+                            top: { width: 2, style: "double", color: { theme: 3 } },
+                            bottom: { width: 2, style: "double", color: { theme: 3 } },
+                            left: { width: 2, style: "double", color: { theme: 3 } },
+                            right: { width: 2, style: "double", color: { theme: 3 } },
+                        },
+                    },
+                    {
+                        backgroundColor: "#949494",
+                        color: (0, themes_1.getStringifiedColor)({ theme: 0 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 12,
+                        border: "2px double ".concat((0, themes_1.getStringifiedColor)({ theme: 3 }, theme)),
+                    },
+                ],
+                [
+                    "Explanatory text",
+                    {
+                        backgroundColor: { theme: 0 },
+                        textFormat: {
+                            color: { theme: 1 },
+                            italic: true,
+                            fontSize: 12,
+                        },
+                    },
+                    {
+                        backgroundColor: (0, themes_1.getStringifiedColor)({ theme: 0 }, theme),
+                        color: (0, themes_1.getStringifiedColor)({ theme: 1 }, theme),
+                        fontStyle: "italic",
+                        fontSize: 12,
+                    },
+                ],
+                [
+                    "Followed hype",
+                    {
+                        textFormat: {
+                            color: { theme: 10 },
+                            underline: true,
+                            fontSize: 11,
+                        },
+                    },
+                    {
+                        backgroundColor: (0, themes_1.getStringifiedColor)({ theme: 0 }, theme),
+                        color: (0, themes_1.getStringifiedColor)({ theme: 10 }, theme),
+                        textDecoration: "underline",
+                        fontSize: 11,
+                    },
+                ],
+                [
+                    "Hyperlink",
+                    {
+                        textFormat: {
+                            color: {
+                                theme: 10,
+                            },
+                            underline: true,
+                        },
+                    },
+                    {
+                        color: (0, themes_1.getStringifiedColor)({ theme: 10 }, theme),
+                        textDecoration: "underline",
+                    },
+                ],
+                [
+                    "Input",
+                    {
+                        backgroundColor: "#FEC188",
+                        textFormat: {
+                            color: { theme: 1 },
+                            fontSize: 12,
+                        },
+                        borders: {
+                            top: { width: 2, style: "solid", color: { theme: 1, tint: 0.4 } },
+                            bottom: {
+                                width: 2,
+                                style: "solid",
+                                color: { theme: 1, tint: 0.4 },
+                            },
+                            left: {
+                                width: 2,
+                                style: "solid",
+                                color: { theme: 1, tint: 0.4 },
+                            },
+                            right: {
+                                width: 2,
+                                style: "solid",
+                                color: { theme: 1, tint: 0.4 },
+                            },
+                        },
+                    },
+                    {
+                        backgroundColor: "#FEC188",
+                        color: (0, themes_1.getStringifiedColor)({ theme: 1 }, theme),
+                        fontSize: 12,
+                        border: "1px solid ".concat((0, themes_1.getStringifiedColor)({ theme: 1, tint: 0.4 }, theme)),
+                    },
+                ],
+                [
+                    "Note",
+                    {
+                        backgroundColor: "#FFFFC1",
+                        textFormat: {
+                            color: { theme: 1 },
+                        },
+                    },
+                    {
+                        background: "#FFFFC1",
+                        color: (0, themes_1.getStringifiedColor)({ theme: 1 }, theme),
+                    },
+                ],
+                [
+                    "Output",
+                    {
+                        backgroundColor: "#EFEFEF",
+                        textFormat: {
+                            bold: true,
+                            fontSize: 12,
+                            color: { theme: 3 },
+                        },
+                        borders: {
+                            top: { width: 1, style: "solid", color: { theme: 3 } },
+                            bottom: { width: 1, style: "solid", color: { theme: 3 } },
+                            left: { width: 1, style: "solid", color: { theme: 3 } },
+                            right: { width: 1, style: "solid", color: { theme: 3 } },
+                        },
+                    },
+                    {
+                        backgroundColor: "#EFEFEF",
+                        fontWeight: "bold",
+                        fontSize: 12,
+                        border: "1px solid ".concat((0, themes_1.getStringifiedColor)({ theme: 3 }, theme)),
+                        color: (0, themes_1.getStringifiedColor)({ theme: 3 }, theme),
+                    },
+                ],
+                [
+                    "Warning text",
+                    {
+                        textFormat: {
+                            color: "#FB0006",
+                            fontSize: 12,
+                        },
+                    },
+                    {
+                        color: "#FB0006",
+                        fontSize: 12,
+                    },
+                ],
+            ],
+        ],
+        [
+            "Title and Headings",
+            [
+                [
+                    "Heading 1",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 15,
+                            bold: true,
+                        },
+                        borders: {
+                            bottom: {
+                                width: 2,
+                                style: "solid_medium",
+                                color: { theme: 4 },
+                            },
+                        },
+                    },
+                    {
+                        color: (0, themes_1.getStringifiedColor)({ theme: 3 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 15,
+                        borderBottomWidth: 2,
+                        borderBottomStyle: "solid",
+                        borderBottomColor: (0, themes_1.getStringifiedColor)({ theme: 4 }, theme),
+                    },
+                ],
+                [
+                    "Heading 2",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 13,
+                            bold: true,
+                        },
+                        borders: {
+                            bottom: {
+                                width: 2,
+                                style: "solid_medium",
+                                color: { theme: 4, tint: 0.4 },
+                            },
+                        },
+                    },
+                    {
+                        color: (0, themes_1.getStringifiedColor)({ theme: 3 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 13,
+                        borderBottomWidth: 2,
+                        borderBottomStyle: "solid",
+                        borderBottomColor: (0, themes_1.getStringifiedColor)({ theme: 4, tint: 0.4 }, theme),
+                    },
+                ],
+                [
+                    "Heading 3",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 11,
+                            bold: true,
+                        },
+                        borders: {
+                            bottom: {
+                                width: 2,
+                                style: "solid_medium",
+                                color: { theme: 4, tint: 0.4 },
+                            },
+                        },
+                    },
+                    {
+                        color: (0, themes_1.getStringifiedColor)({ theme: 3 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 11,
+                        borderBottomWidth: 2,
+                        borderBottomStyle: "solid",
+                        borderBottomColor: (0, themes_1.getStringifiedColor)({ theme: 4, tint: 0.4 }, theme),
+                    },
+                ],
+                [
+                    "Heading 4",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 11,
+                            bold: true,
+                        },
+                    },
+                    {
+                        color: (0, themes_1.getStringifiedColor)({ theme: 3 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 11,
+                    },
+                ],
+                [
+                    "Heading 5",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 18,
+                        },
+                    },
+                    {
+                        color: (0, themes_1.getStringifiedColor)({ theme: 3 }, theme),
+                        fontSize: 14,
+                    },
+                ],
+                [
+                    "Total",
+                    {
+                        textFormat: {
+                            color: { theme: 3 },
+                            fontSize: 11,
+                            bold: true,
+                        },
+                        borders: {
+                            bottom: {
+                                width: 2,
+                                style: "double",
+                                color: { theme: 4 },
+                            },
+                            top: {
+                                width: 1,
+                                style: "solid",
+                                color: { theme: 4 },
+                            },
+                        },
+                    },
+                    {
+                        color: (0, themes_1.getStringifiedColor)({ theme: 3 }, theme),
+                        fontWeight: "bold",
+                        fontSize: 11,
+                        borderBottomWidth: 2,
+                        borderBottomStyle: "double",
+                        borderBottomColor: (0, themes_1.getStringifiedColor)({ theme: 4 }, theme),
+                        borderTopWidth: 1,
+                        borderTopStyle: "solid",
+                        borderTopColor: (0, themes_1.getStringifiedColor)({ theme: 4 }, theme),
+                    },
+                ],
+            ],
+        ],
+    ]);
+};
+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 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]);
+    // Number formats
+    var numberFormats = [
+        [
+            "Comma",
+            {
+                type: "NUMBER",
+                pattern: "#,##0.00",
+            },
+        ],
+        [
+            "Comma[0]",
+            {
+                type: "NUMBER",
+                pattern: "#,##0",
+            },
+        ],
+        [
+            "Currency",
+            {
+                type: "CURRENCY",
+                pattern: "_(\"".concat(currencySymbol, "\"* #,##0.00_);_(\"").concat(currencySymbol, "\"* (#,##0.00);_(\"").concat(currencySymbol, "\"* \"-\"??_);_(@_)"),
+            },
+        ],
+        [
+            "Currency[0]",
+            {
+                type: "CURRENCY",
+                pattern: "_(\"".concat(currencySymbol, "\"* #,##0_);_(\"").concat(currencySymbol, "\"* (#,##0);_(\"").concat(currencySymbol, "\"* \"-\"??_);_(@_)"),
+            },
+        ],
+        [
+            "Percent",
+            {
+                type: "PERCENT",
+                pattern: "0%",
+            },
+        ],
+    ];
+    var hoverClass = "rounded-none hover:outline-solid hover:outline-1 hover:outline hover:outline-offset-1 hover:outline-rnc-primary focus:outline focus:outline-offset-1 focus:outline-rnc-primary hover:bg-transparent focus:bg-transparent text-rnc-foreground";
+    var activeClass = "outline-solid outline outline-offset-1 outline-rnc-primary";
+    var headingClass = "text-xs font-system pt-2 pb-1 text-rnc-foreground";
+    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(icons_2.MdBrush, null),
+                react_1.default.createElement("div", { className: "text-xs" }, "Cell styles"),
+                react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_2.DropdownMenuPortal, null,
+            react_1.default.createElement(ui_2.DropdownMenuContent, { loop: true, align: "start", onFocusOutside: function (event) { return event.preventDefault(); }, onCloseAutoFocus: function (event) {
+                    event.preventDefault();
+                    if (shouldFocusSheetRef.current) {
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    }
+                }, onInteractOutside: function () {
+                    shouldFocusSheetRef.current = false;
+                } },
+                react_1.default.createElement("div", { className: "max-w-dropdown md:min-w-[400px] p-2 pt-0" },
+                    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 },
+                            react_1.default.createElement("div", { className: headingClass }, category),
+                            react_1.default.createElement(ui_1.Separator, { className: "mb-2" }),
+                            react_1.default.createElement("div", { className: gridClass }, cellStyleList.map(function (_a, index) {
+                                var _b = tslib_1.__read(_a, 3), type = _b[0], cellFormat = _b[1], style = _b[2];
+                                return (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                        if (Object.keys(cellFormat).length) {
+                                            onChangeFormatting(cellFormat);
+                                        }
+                                        else {
+                                            onClearFormatting();
+                                        }
+                                    }, className: hoverClass, key: index, style: style }, type));
+                            }))));
+                    }),
+                    react_1.default.createElement("div", { className: headingClass }, "Themed Cell Styles"),
+                    react_1.default.createElement(ui_1.Separator, { className: "mb-2" }),
+                    react_1.default.createElement("div", { className: gridClass }, colorIndexes.map(function (unit, colorIndex) {
+                        return (react_1.default.createElement("div", { className: "grid grid-rows-4 gap-1", key: unit }, colorTints.map(function (tint, index) {
+                            var _a;
+                            var title = tint !== 0
+                                ? ((1 - tint) * 100).toFixed(0) + "% - "
+                                : "";
+                            var backgroundTheme = { theme: unit, tint: tint };
+                            var backgroundColor = (0, themes_1.getStringifiedColor)({ theme: unit, tint: tint }, theme);
+                            var colorTheme = {
+                                theme: index === colorTints.length - 1 ? 0 : 1,
+                            };
+                            var color = (0, themes_1.getStringifiedColor)(colorTheme, theme);
+                            var isActive = isSameColor((_a = selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.textFormat) === null || _a === void 0 ? void 0 : _a.color, colorTheme, theme) &&
+                                isSameColor(selectedFormat === null || selectedFormat === void 0 ? void 0 : selectedFormat.backgroundColor, backgroundTheme, theme);
+                            return (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                    onChangeFormatting === null || onChangeFormatting === void 0 ? void 0 : onChangeFormatting({
+                                        backgroundColor: {
+                                            theme: unit,
+                                            tint: tint,
+                                        },
+                                        textFormat: {
+                                            color: colorTheme,
+                                        },
+                                    });
+                                }, style: {
+                                    backgroundColor: backgroundColor,
+                                    color: color,
+                                }, className: (0, ui_4.cn)(hoverClass, isActive ? activeClass : undefined), key: tint },
+                                title,
+                                "Accent ",
+                                colorIndex + 1,
+                                " ",
+                                unit,
+                                " ",
+                                tint));
+                        })));
+                    })),
+                    react_1.default.createElement("div", { className: headingClass }, "Number Format"),
+                    react_1.default.createElement(ui_1.Separator, { className: "mb-2" }),
+                    react_1.default.createElement("div", { className: gridClass }, numberFormats.map(function (_a, index) {
+                        var _b = tslib_1.__read(_a, 2), type = _b[0], numberFormat = _b[1];
+                        return (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onChangeFormatting("numberFormat", numberFormat);
+                            }, className: hoverClass, key: index }, type));
+                    }))),
+                canAddCustomStyle ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(ui_3.DropdownMenuSeparator, null),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, null, "New Cell Style"))) : null))));
+});
+// Check if 2 colors are the same
+var isSameColor = function (a, b, theme) {
+    if (typeof a === "string" && typeof b === "string") {
+        return a === b;
+    }
+    return (0, themes_1.getStringifiedColor)(a, theme) === (0, themes_1.getStringifiedColor)(b, theme);
+};

package/dist/cjs/components/toolbar/color-selector.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { Color } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+export type ColorSelectorProps = {
+    color?: Color | null;
+    onChange?(color: Color | undefined): void;
+    theme: SpreadsheetTheme;
+    resetButtonTitle?: string;
+    userDefinedColors?: string[];
+    onAddUserDefinedColor?(color: string): void;
+};
+export declare const ColorSelector: ({ color, onChange, theme, resetButtonTitle, userDefinedColors, onAddUserDefinedColor, }: ColorSelectorProps) => React.JSX.Element;
+//# sourceMappingURL=color-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/color-selector.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,qBAAqB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,yFAO3B,kBAAkB,sBA8FpB,CAAC"}

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorSelector = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var themes_1 = require("../../themes");
+var ColorSelector = function (_a) {
+    var color = _a.color, onChange = _a.onChange, theme = _a.theme, _b = _a.resetButtonTitle, resetButtonTitle = _b === void 0 ? "Automatic" : _b, userDefinedColors = _a.userDefinedColors, onAddUserDefinedColor = _a.onAddUserDefinedColor;
+    var colorString = (0, themes_1.getStringifiedColor)(color, theme);
+    // Remove hyperlink color
+    var themeColors = tslib_1.__spreadArray([], tslib_1.__read(themes_1.colorKeys.values()), false).slice(0, -1)
+        .map(function (value) { var _a; return (_a = theme.themeColors[value]) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
+    return (react_1.default.createElement(ui_1.Stack, { className: "gap-1", direction: "vertical" },
+        react_1.default.createElement(ui_1.Button, { variant: "outline", size: "xs", tabIndex: -1, className: "justify-center py-1", onClick: function () {
+                onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+            } }, resetButtonTitle),
+        react_1.default.createElement("div", { className: "pt-2 text-xs text-left" },
+            "Theme colors (",
+            theme.name,
+            ")"),
+        react_1.default.createElement(ui_1.ColorPicker, { value: colorString, onChange: function (color) {
+                onChange === null || onChange === void 0 ? void 0 : onChange({
+                    theme: themeColors.indexOf(color),
+                });
+            }, className: "gap-1", colors: themeColors }),
+        react_1.default.createElement(ui_1.Stack, { className: "gap-1" }, themes_1.colorTintsToDisplay.map(function (tints, tintIndex) {
+            var colors = (0, themes_1.createColorShades)(themeColors[tintIndex], tints);
+            return (react_1.default.createElement(ui_1.ColorPicker, { key: tintIndex, direction: "vertical", value: colorString, colors: colors, onChange: function (color) {
+                    var tint = tints[colors.indexOf(color)];
+                    onChange === null || onChange === void 0 ? void 0 : onChange({
+                        theme: tintIndex,
+                        tint: tint,
+                    });
+                } }));
+        })),
+        react_1.default.createElement("div", { className: "pt-2 text-xs text-left" }, "Standard colors"),
+        react_1.default.createElement(ui_1.ColorPicker, { value: colorString, colors: themes_1.STANDARD_COLORS, onChange: function (color) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(color);
+            }, className: "gap-1" }),
+        react_1.default.createElement("div", { className: "pt-2 text-xs text-left" }, "Recent colors"),
+        react_1.default.createElement("div", { className: "flex items-center gap-1 max-w-[200px] flex-wrap" },
+            (userDefinedColors === null || userDefinedColors === void 0 ? void 0 : userDefinedColors.length) ? (react_1.default.createElement(ui_1.ColorPicker, { value: colorString, colors: userDefinedColors, onChange: function (color) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(color);
+                }, className: "gap-1" })) : null,
+            react_1.default.createElement(ui_1.HexColorPicker, { value: colorString, onChange: function (color) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(color);
+                    // Add user defined color
+                    onAddUserDefinedColor === null || onAddUserDefinedColor === void 0 ? void 0 : onAddUserDefinedColor(color);
+                } }),
+            react_1.default.createElement(ui_1.EyeDropper, { value: colorString, onChange: function (color) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(color);
+                    // Add user defined color
+                    onAddUserDefinedColor === null || onAddUserDefinedColor === void 0 ? void 0 : onAddUserDefinedColor(color);
+                } }))));
+};
+exports.ColorSelector = ColorSelector;

package/dist/cjs/components/toolbar/font-family-selector.d.ts

@@ -0,0 +1,22 @@
+import type { IconButtonProps } from "@rowsncolumns/ui";
+import React from "react";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+type FontFamilySelectorProps = {
+    value: string | undefined | null;
+    theme: SpreadsheetTheme;
+    fontList?: Array<{
+        value: string;
+        label: string;
+    }>;
+    triggerVariant?: IconButtonProps["variant"];
+    /**
+     * User can provide their own font loader
+     * @param font
+     * @returns
+     */
+    onRequestFonts?: (fonts: string[]) => Promise<void | undefined>;
+    onChange(value: string | undefined): void;
+};
+export declare const FontFamilySelector: React.MemoExoticComponent<({ theme, value, fontList, triggerVariant, onRequestFonts, onChange, }: FontFamilySelectorProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=font-family-selector.d.ts.map

package/dist/cjs/components/toolbar/font-family-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-family-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/font-family-selector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAYxD,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,cAAc,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAC5C;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC;IAChE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;CAC3C,CAAC;AA6HF,eAAO,MAAM,kBAAkB,oGAQ1B,uBAAuB,uBA8D3B,CAAC"}