@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/components/toolbar/text-format-selector.js

@@ -0,0 +1,263 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFormatSelector = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var atoms_1 = require("../../atoms");
+var helpers_1 = require("../../helpers");
+exports.TextFormatSelector = (0, react_1.memo)(function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _t = _a.locale, locale = _t === void 0 ? "en-US" : _t, _u = _a.currency, currency = _u === void 0 ? "USD" : _u, cellFormat = _a.cellFormat, onChangeFormatting = _a.onChangeFormatting, onRequestFormatCells = _a.onRequestFormatCells;
+    var localeDateFormat = (0, utils_1.getDefaultDateFormat)(locale);
+    var longDateFormat = (0, utils_1.getLongDateFormat)(locale);
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    var date = new Date(Date.UTC(2023, 8, 26, 0, 0, 0));
+    var dateformat = new Intl.DateTimeFormat(locale).format(date);
+    var currencySymbol = (0, helpers_1.getCurrencySymbol)(locale, currency);
+    var longDate = new Intl.DateTimeFormat(locale, {
+        dateStyle: "full",
+    }).format(date);
+    var percentPattern = "0%";
+    var scientficPattern = "0.00E+00";
+    var isScientific = ((_b = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _b === void 0 ? void 0 : _b.pattern) === scientficPattern;
+    var accountingPattern = "\"".concat(currencySymbol, "\"* #,##0.00;_(\"").concat(currencySymbol, "\"* (#,##0.00);_(\"").concat(currencySymbol, "\"* \"-\"??_);_(@_)");
+    var isAccounting = ((_c = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _c === void 0 ? void 0 : _c.pattern) === accountingPattern;
+    var financialPattern = "#,##0.00;(#,##0.00)";
+    var isFinancial = ((_d = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _d === void 0 ? void 0 : _d.pattern) === financialPattern;
+    var currencyPattern = "\"".concat(currencySymbol, "\"#,##0.00");
+    // financial is of type currency too
+    var isCurrency = ((_e = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _e === void 0 ? void 0 : _e.pattern) === currencyPattern ||
+        (((_f = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _f === void 0 ? void 0 : _f.type) === "CURRENCY" && !isFinancial);
+    var timePattern = "[$-".concat(locale, "]h:mm AM/PM;@");
+    var isTimePattern = ((_g = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _g === void 0 ? void 0 : _g.pattern) === timePattern;
+    var dateTimePattern = "[$-".concat(locale, "]").concat(localeDateFormat, " hh:mm:ss");
+    var isDateTimePattern = ((_h = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _h === void 0 ? void 0 : _h.pattern) === dateTimePattern;
+    var durationPattern = "[$-".concat(locale, "][h]:mm:ss");
+    var isDurationPattern = ((_j = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _j === void 0 ? void 0 : _j.pattern) === durationPattern;
+    var currencyRoundedPattern = "\"".concat(currencySymbol, "\"#,##0");
+    var isCurrencyRounded = ((_k = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _k === void 0 ? void 0 : _k.pattern) === currencyRoundedPattern;
+    return (react_1.default.createElement(ui_1.DropdownMenu, { modal: false },
+        react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
+            react_1.default.createElement(ui_1.IconButton, { tooltip: "More formats" },
+                react_1.default.createElement("div", { className: "text-xs" }, "123"),
+                react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+            react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start" },
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: !((_l = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _l === void 0 ? void 0 : _l.type) ||
+                        ((_m = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _m === void 0 ? void 0 : _m.type) === "GENERAL", onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", undefined);
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "General"),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: ((_o = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _o === void 0 ? void 0 : _o.type) === "TEXT", onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "TEXT",
+                            pattern: "General",
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Plain text"),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: ((_p = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _p === void 0 ? void 0 : _p.type) === "NUMBER", onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "NUMBER",
+                            pattern: "#,##0.00",
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Number",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, "1,000.12")),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: ((_q = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _q === void 0 ? void 0 : _q.type) === "PERCENT", onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "PERCENT",
+                            pattern: percentPattern,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Percent",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, "10.12%")),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: isScientific, onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "SCIENTIFIC",
+                            pattern: scientficPattern,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Scientific",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, "1.01E+03")),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: isAccounting, onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "CURRENCY",
+                            pattern: accountingPattern,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Accounting",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                        currencySymbol,
+                        "(1000.12)")),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: isFinancial, onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "CURRENCY",
+                            pattern: financialPattern,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Financial",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, "(1000.12)")),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: isCurrency, onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "CURRENCY",
+                            pattern: currencyPattern,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Currency",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                        currencySymbol,
+                        "1,000.12")),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: isCurrencyRounded, onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "CURRENCY",
+                            pattern: currencyRoundedPattern,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Currency rounded",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                        currencySymbol,
+                        "1000")),
+                react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { className: "pl-8" },
+                        "More currency",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: "\"$\"#,##0",
+                                });
+                                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                            } }, "$ US Dollar"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: "\"\u20AC\"#,##0",
+                                });
+                                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                            } }, "\u20AC Euro"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: "\"\u20A4\"#,##0",
+                                });
+                                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                            } }, "\u20A4 Pound"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: "\"\u00A5\"#,##0",
+                                });
+                                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                            } }, "\u00A5 Yen"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: "\"CN\u00A5\"#,##0",
+                                });
+                                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                            } }, "CN\u00A5 Chinese Yuan"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onChangeFormatting("numberFormat", {
+                                    type: "CURRENCY",
+                                    pattern: "\"\u20B9\"#,##0",
+                                });
+                                focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                            } }, "\u20B9 Rupee"))),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: ((_r = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _r === void 0 ? void 0 : _r.pattern) === localeDateFormat, onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "DATE",
+                            pattern: localeDateFormat,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Date",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, dateformat)),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: ((_s = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.numberFormat) === null || _s === void 0 ? void 0 : _s.pattern) === longDateFormat, onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "DATE",
+                            pattern: longDateFormat,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Long date",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, longDate)),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: isTimePattern, onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "DATE_TIME",
+                            pattern: timePattern,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Time",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, "3:59 AM")),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: isDateTimePattern, onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "DATE_TIME",
+                            pattern: dateTimePattern,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Date time",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                        dateformat,
+                        " 15:59:00")),
+                react_1.default.createElement(ui_1.DropdownMenuCheckboxItem, { checked: isDurationPattern, onCheckedChange: function () {
+                        onChangeFormatting("numberFormat", {
+                            type: "TIME",
+                            pattern: durationPattern,
+                        });
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    } },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    "Duration",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, "24:01:00")),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { className: "pl-8", onClick: function () {
+                        onRequestFormatCells === null || onRequestFormatCells === void 0 ? void 0 : onRequestFormatCells();
+                    } }, "Custom format")))));
+});
+exports.TextFormatSelector.displayName = "TextFormatSelector";

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { HorizontalAlign } from "../../types";
+type TextHorizontalAlignSelectorProps = {
+    disabled?: boolean;
+    value: HorizontalAlign | undefined | null;
+    onChange(value: HorizontalAlign): void;
+};
+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

@@ -0,0 +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"}

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextHorizontalAlignSelector = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+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");
+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); };
+    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(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" },
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", isActive: value === "left", onClick: function () {
+                        onChange("left");
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        close();
+                    } },
+                    react_1.default.createElement(icons_1.MdFormatAlignLeft, null)),
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", isActive: value === "center", onClick: function () {
+                        onChange("center");
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        close();
+                    } },
+                    react_1.default.createElement(icons_1.MdFormatAlignCenter, null)),
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", isActive: value === "right", onClick: function () {
+                        onChange("right");
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        close();
+                    } },
+                    react_1.default.createElement(icons_1.MdFormatAlignRight, null))))));
+};
+exports.TextHorizontalAlignSelector = TextHorizontalAlignSelector;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { VerticalAlign } from "../../types";
+type TextVerticalAlignSelectorProps = {
+    value: VerticalAlign | undefined | null;
+    onChange(value: VerticalAlign): void;
+};
+export declare const TextVerticalAlignSelector: ({ value, onChange, }: TextVerticalAlignSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=text-vertical-align-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-vertical-align-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-vertical-align-selector.tsx"],"names":[],"mappings":"AASA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,8BAA8B,GAAG;IACpC,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,sBAGvC,8BAA8B,sBA0DhC,CAAC"}

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextVerticalAlignSelector = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+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");
+var TextVerticalAlignSelector = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? "bottom" : _b, onChange = _a.onChange;
+    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); };
+    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: "Vertical align" },
+                value === "top" ? (react_1.default.createElement(icons_1.MdVerticalAlignTop, null)) : value === "middle" ? (react_1.default.createElement(icons_1.MdVerticalAlignCenter, null)) : (react_1.default.createElement(icons_1.MdVerticalAlignBottom, 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 flex-wrap max-w-[140px]" },
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", isActive: value === "top", onClick: function () {
+                        onChange("top");
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        close();
+                    } },
+                    react_1.default.createElement(icons_1.MdVerticalAlignTop, null)),
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", isActive: value === "middle", onClick: function () {
+                        onChange("middle");
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        close();
+                    } },
+                    react_1.default.createElement(icons_1.MdVerticalAlignCenter, null)),
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", isActive: value === "bottom", onClick: function () {
+                        onChange("bottom");
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        close();
+                    } },
+                    react_1.default.createElement(icons_1.MdVerticalAlignBottom, null))))));
+};
+exports.TextVerticalAlignSelector = TextVerticalAlignSelector;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { WrapStrategy } from "../../types";
+type TextWrapSelectorProps = {
+    value?: WrapStrategy | null;
+    onChange(value: WrapStrategy): void;
+};
+export declare const TextWrapSelector: ({ value, onChange, }: TextWrapSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=text-wrap-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-wrap-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/text-wrap-selector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,KAAK,qBAAqB,GAAG;IAC3B,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,sBAG9B,qBAAqB,sBA8DvB,CAAC"}

package/dist/cjs/components/toolbar/text-wrap-selector.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextWrapSelector = 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 react_1 = tslib_1.__importStar(require("react"));
+var atoms_1 = require("../../atoms");
+var TextWrapSelector = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? "overflow" : _b, onChange = _a.onChange;
+    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); };
+    return (react_1.default.createElement(ui_1.Popover, { open: isOpen, onOpenChange: onOpenChange },
+        react_1.default.createElement(ui_1.PopoverTrigger, { asChild: true },
+            react_1.default.createElement(ui_1.IconButton, { size: "lg", tooltip: "Text wrapping" },
+                value === "overflow" ? (react_1.default.createElement(icons_1.TextOverflowIcon, null)) : value === "wrap" ? (react_1.default.createElement(icons_1.TextOverflowWrapIcon, null)) : (react_1.default.createElement(icons_1.TextoverflowClipIcon, null)),
+                react_1.default.createElement(icons_2.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_1.PopoverContent, { align: "start" },
+            react_1.default.createElement(ui_1.Stack, { direction: "horizontal", className: "flex-wrap gap-1 max-w-[140px]" },
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", isActive: value === "overflow", tooltip: "Overflow", onClick: function () {
+                        onChange("overflow");
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        close();
+                    } },
+                    react_1.default.createElement(icons_1.TextOverflowIcon, null)),
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", isActive: value === "wrap", tooltip: "Wrap", onClick: function () {
+                        onChange("wrap");
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        close();
+                    } },
+                    react_1.default.createElement(icons_1.TextOverflowWrapIcon, null)),
+                react_1.default.createElement(ui_1.IconButton, { size: "lg", isActive: value === "clip", tooltip: "Clip", onClick: function () {
+                        onChange("clip");
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        close();
+                    } },
+                    react_1.default.createElement(icons_1.TextoverflowClipIcon, null))))));
+};
+exports.TextWrapSelector = TextWrapSelector;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+type ThemeSelectorProps = {
+    theme?: SpreadsheetTheme;
+    themes?: SpreadsheetTheme[];
+    onChangeTheme?(theme: SpreadsheetTheme): void;
+};
+export declare const ThemeSelector: React.MemoExoticComponent<({ onChangeTheme, theme: selectedTheme, themes, }: ThemeSelectorProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=theme-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/theme-selector.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,CAAC,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,aAAa,+EAKrB,kBAAkB,uBAwCtB,CAAC"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSelector = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var atoms_1 = require("../../atoms");
+var themes_1 = require("../../themes");
+exports.ThemeSelector = (0, react_1.memo)(function (_a) {
+    var onChangeTheme = _a.onChangeTheme, selectedTheme = _a.theme, _b = _a.themes, themes = _b === void 0 ? themes_1.availableThemes : _b;
+    var focusSheet = (0, atoms_1.useFocusSheet)();
+    return (react_1.default.createElement(ui_1.DropdownMenu, { modal: false },
+        react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
+            react_1.default.createElement(ui_1.IconButton, { size: "xl", tooltip: "Themes", className: "gap-1" },
+                react_1.default.createElement(icons_1.MdPalette, null),
+                react_1.default.createElement("div", { className: "text-xs" }, "Theme"),
+                react_1.default.createElement(icons_1.MdOutlineArrowDropDown, null))),
+        react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+            react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start" }, themes.map(function (theme, idx) {
+                var themeColors = tslib_1.__spreadArray([], tslib_1.__read(themes_1.colorKeys.values()), false).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.DropdownMenuCheckboxItem, { key: idx, onClick: function () {
+                        onChangeTheme === null || onChangeTheme === void 0 ? void 0 : onChangeTheme(theme);
+                        focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                    }, checked: theme === selectedTheme },
+                    react_1.default.createElement(ui_1.DropdownMenuItemIndicator, null,
+                        react_1.default.createElement(icons_1.CheckIcon, null)),
+                    react_1.default.createElement("div", { className: "flex-1 text-xs pr-4" }, theme.name),
+                    react_1.default.createElement(ui_1.ColorPicker, { size: 10, colors: themeColors })));
+            })))));
+});
+exports.ThemeSelector.displayName = "ThemeSelector";

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

@@ -0,0 +1,12 @@
+import type { Stack } from "@rowsncolumns/ui";
+import type { FC } from "react";
+import React from "react";
+export declare const Toolbar: FC<{
+    children?: React.ReactNode;
+    enableFloating?: boolean;
+    gap?: number;
+    padding?: number;
+    moreButtonWidth?: number;
+} & React.ComponentProps<typeof Stack>>;
+export declare const ToolbarSeparator: () => React.JSX.Element;
+//# sourceMappingURL=toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAU9C,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,eAAO,MAAM,OAAO,EAAE,EAAE,CACtB;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CA6MvC,CAAC;AAIF,eAAO,MAAM,gBAAgB,yBAE5B,CAAC"}