@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/sort-range-dialog/index.js

@@ -0,0 +1,215 @@
+import { ArrowDownIcon, ArrowUpIcon, Cross1Icon, PlusIcon, SortDownIcon, SortUpIcon, TrashIcon, } from "@rowsncolumns/icons";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, IconButton, Select, SelectContent, SelectItem, SelectPortal, SelectTrigger, SelectValue, Separator, } from "@rowsncolumns/ui";
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { useSortDialogState } from "../../atoms/sort-dialog.atom";
+const CUSTOM_LIST_PREFIX = "custom:";
+const ColorSwatch = ({ color }) => (React.createElement("span", { className: "inline-block h-3.5 w-3.5 rounded border border-gray-300 shrink-0", style: { backgroundColor: color } }));
+const IconSwatch = ({ glyph, color }) => (React.createElement("span", { className: "inline-block h-3.5 w-3.5 leading-none text-center text-sm shrink-0", style: color ? { color } : undefined }, glyph));
+const makeDefaultLevel = (columns) => ({
+    dimensionIndex: columns[0]?.dimensionIndex ?? 0,
+    sortBy: "value",
+    sortOrder: "ASCENDING",
+});
+const specToLevel = (spec, customLists) => {
+    const sortBy = (spec.sortBy ?? "value");
+    const customListIndex = spec.customList && spec.customList.length
+        ? customLists.findIndex((list) => list.length === spec.customList.length &&
+            list.every((v, i) => v === spec.customList[i]))
+        : -1;
+    return {
+        dimensionIndex: spec.dimensionIndex,
+        sortBy,
+        sortOrder: spec.sortOrder,
+        sortColor: spec.sortColor ?? undefined,
+        sortIcon: spec.sortIcon ?? undefined,
+        customListIndex: customListIndex >= 0 ? customListIndex : undefined,
+    };
+};
+/**
+ * Custom multi-level sort dialog. Mirrors Excel's "Sort…" dialog and
+ * Google Sheets' "Sort range — advanced". Each row is a sort level:
+ * pick a column, what to sort on (value / cell color / font color /
+ * icon), and the direction (A→Z / Z→A) or — for color/icon — the
+ * swatch to surface. Levels apply as "then by" tiebreakers in order.
+ *
+ * UI-only: the dialog never mutates state. It emits the assembled
+ * `SortSpecs[]` via `onApply`; the host disambiguates table vs range and
+ * routes through its existing sort callbacks.
+ */
+export const SortRangeDialog = memo(({ open, onOpenChange, columns, customLists, initialSpecs, onApply, }) => {
+    const lists = useMemo(() => customLists ?? [], [customLists]);
+    const [levels, setLevels] = useState(() => initialSpecs?.length
+        ? initialSpecs.map((spec) => specToLevel(spec, lists))
+        : [makeDefaultLevel(columns)]);
+    // Re-seed when reopened with different columns / specs.
+    useEffect(() => {
+        if (open) {
+            setLevels(initialSpecs?.length
+                ? initialSpecs.map((spec) => specToLevel(spec, lists))
+                : [makeDefaultLevel(columns)]);
+        }
+        // Only reset on open transitions.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const columnByIndex = useMemo(() => {
+        const map = new Map();
+        for (const c of columns)
+            map.set(c.dimensionIndex, c);
+        return map;
+    }, [columns]);
+    const updateLevel = useCallback((rowIndex, patch) => {
+        setLevels((prev) => prev.map((lvl, i) => (i === rowIndex ? { ...lvl, ...patch } : lvl)));
+    }, []);
+    const addLevel = useCallback(() => {
+        setLevels((prev) => [...prev, makeDefaultLevel(columns)]);
+    }, [columns]);
+    const deleteLevel = useCallback((rowIndex) => {
+        setLevels((prev) => prev.length > 1 ? prev.filter((_, i) => i !== rowIndex) : prev);
+    }, []);
+    const moveLevel = useCallback((rowIndex, delta) => {
+        setLevels((prev) => {
+            const target = rowIndex + delta;
+            if (target < 0 || target >= prev.length)
+                return prev;
+            const next = prev.slice();
+            const [item] = next.splice(rowIndex, 1);
+            next.splice(target, 0, item);
+            return next;
+        });
+    }, []);
+    const commit = useCallback(() => {
+        const specs = levels.map((lvl) => {
+            const spec = {
+                dimensionIndex: lvl.dimensionIndex,
+                sortOrder: lvl.sortOrder,
+                sortBy: lvl.sortBy,
+            };
+            if (lvl.sortBy === "cellColor" || lvl.sortBy === "fontColor") {
+                if (lvl.sortColor)
+                    spec.sortColor = lvl.sortColor;
+            }
+            else if (lvl.sortBy === "icon") {
+                if (lvl.sortIcon)
+                    spec.sortIcon = lvl.sortIcon;
+            }
+            else if (lvl.customListIndex != null &&
+                lists[lvl.customListIndex]) {
+                spec.customList = lists[lvl.customListIndex];
+            }
+            return spec;
+        });
+        onApply(specs);
+        onOpenChange(false);
+    }, [levels, lists, onApply, onOpenChange]);
+    return (React.createElement(Dialog, { open: open, onOpenChange: onOpenChange },
+        React.createElement(DialogContent, { className: "w-[640px] max-w-[92vw] pointer-events-auto" },
+            React.createElement(DialogTitle, null, "Sort"),
+            React.createElement(DialogCloseButton, { onClick: () => onOpenChange(false) },
+                React.createElement(Cross1Icon, null)),
+            React.createElement(DialogBody, { className: "flex flex-col gap-3" },
+                React.createElement("div", { className: "flex flex-col gap-2" }, levels.map((lvl, rowIndex) => {
+                    const col = columnByIndex.get(lvl.dimensionIndex);
+                    const cellColors = col?.availableCellColors ?? [];
+                    const fontColors = col?.availableFontColors ?? [];
+                    const icons = col?.availableIcons ?? [];
+                    const hasIcons = icons.length > 0;
+                    return (React.createElement("div", { key: rowIndex, className: "flex items-center gap-2 flex-wrap" },
+                        React.createElement("span", { className: "text-xs text-rnc-muted-foreground min-w-[48px]" }, rowIndex === 0 ? "Sort by" : "Then by"),
+                        React.createElement(Select, { value: String(lvl.dimensionIndex), onValueChange: (v) => updateLevel(rowIndex, {
+                                dimensionIndex: Number(v),
+                                // Reset color/icon choices when column changes.
+                                sortColor: undefined,
+                                sortIcon: undefined,
+                            }) },
+                            React.createElement(SelectTrigger, { className: "w-[160px]" },
+                                React.createElement(SelectValue, { placeholder: "Column" })),
+                            React.createElement(SelectPortal, null,
+                                React.createElement(SelectContent, null, columns.map((c) => (React.createElement(SelectItem, { key: c.dimensionIndex, value: String(c.dimensionIndex) }, c.label)))))),
+                        React.createElement(Select, { value: lvl.customListIndex != null && lvl.sortBy === "value"
+                                ? `${CUSTOM_LIST_PREFIX}${lvl.customListIndex}`
+                                : lvl.sortBy, onValueChange: (v) => {
+                                if (v.startsWith(CUSTOM_LIST_PREFIX)) {
+                                    updateLevel(rowIndex, {
+                                        sortBy: "value",
+                                        customListIndex: Number(v.slice(CUSTOM_LIST_PREFIX.length)),
+                                    });
+                                }
+                                else {
+                                    updateLevel(rowIndex, {
+                                        sortBy: v,
+                                        customListIndex: undefined,
+                                    });
+                                }
+                            } },
+                            React.createElement(SelectTrigger, { className: "w-[150px]" },
+                                React.createElement(SelectValue, { placeholder: "Sort on" })),
+                            React.createElement(SelectPortal, null,
+                                React.createElement(SelectContent, null,
+                                    React.createElement(SelectItem, { value: "value" }, "Values"),
+                                    cellColors.length ? (React.createElement(SelectItem, { value: "cellColor" }, "Cell color")) : null,
+                                    fontColors.length ? (React.createElement(SelectItem, { value: "fontColor" }, "Font color")) : null,
+                                    hasIcons ? (React.createElement(SelectItem, { value: "icon" }, "Icon")) : null,
+                                    lists.map((list, i) => (React.createElement(SelectItem, { key: `custom-${i}`, value: `${CUSTOM_LIST_PREFIX}${i}` }, `Custom: ${list.slice(0, 3).join(", ")}${list.length > 3 ? "…" : ""}`)))))),
+                        lvl.sortBy === "cellColor" ||
+                            lvl.sortBy === "fontColor" ? (React.createElement(Select, { value: lvl.sortColor ?? "", onValueChange: (v) => updateLevel(rowIndex, { sortColor: v }) },
+                            React.createElement(SelectTrigger, { className: "w-[120px]" },
+                                React.createElement(SelectValue, { placeholder: "Color" })),
+                            React.createElement(SelectPortal, null,
+                                React.createElement(SelectContent, null, (lvl.sortBy === "cellColor"
+                                    ? cellColors
+                                    : fontColors).map((color) => (React.createElement(SelectItem, { key: color, value: color },
+                                    React.createElement("span", { className: "flex items-center gap-2" },
+                                        React.createElement(ColorSwatch, { color: color }),
+                                        color)))))))) : lvl.sortBy === "icon" ? (React.createElement(Select, { value: lvl.sortIcon
+                                ? `${lvl.sortIcon.iconSet}:${lvl.sortIcon.iconId}`
+                                : "", onValueChange: (v) => {
+                                const [iconSet, iconId] = v.split(":");
+                                updateLevel(rowIndex, {
+                                    sortIcon: { iconSet, iconId: Number(iconId) },
+                                });
+                            } },
+                            React.createElement(SelectTrigger, { className: "w-[120px]" },
+                                React.createElement(SelectValue, { placeholder: "Icon" })),
+                            React.createElement(SelectPortal, null,
+                                React.createElement(SelectContent, null, icons.map((icon) => (React.createElement(SelectItem, { key: `${icon.iconSet}:${icon.iconId}`, value: `${icon.iconSet}:${icon.iconId}` },
+                                    React.createElement("span", { className: "flex items-center gap-2" },
+                                        React.createElement(IconSwatch, { glyph: icon.glyph, color: icon.color }),
+                                        `${icon.iconSet} ${icon.iconId}`)))))))) : (React.createElement("div", { className: "flex gap-1" },
+                            React.createElement(IconButton, { tooltip: "Sort A \u2192 Z", isActive: lvl.sortOrder === "ASCENDING", onClick: () => updateLevel(rowIndex, { sortOrder: "ASCENDING" }) },
+                                React.createElement(SortDownIcon, null)),
+                            React.createElement(IconButton, { tooltip: "Sort Z \u2192 A", isActive: lvl.sortOrder === "DESCENDING", onClick: () => updateLevel(rowIndex, { sortOrder: "DESCENDING" }) },
+                                React.createElement(SortUpIcon, null)))),
+                        React.createElement("div", { className: "flex gap-1 ml-auto" },
+                            React.createElement(IconButton, { tooltip: "Move up", disabled: rowIndex === 0, onClick: () => moveLevel(rowIndex, -1) },
+                                React.createElement(ArrowUpIcon, null)),
+                            React.createElement(IconButton, { tooltip: "Move down", disabled: rowIndex === levels.length - 1, onClick: () => moveLevel(rowIndex, 1) },
+                                React.createElement(ArrowDownIcon, null)),
+                            React.createElement(IconButton, { tooltip: "Delete level", disabled: levels.length <= 1, onClick: () => deleteLevel(rowIndex) },
+                                React.createElement(TrashIcon, null)))));
+                })),
+                React.createElement("div", null,
+                    React.createElement(Button, { variant: "outline", size: "sm", onClick: addLevel, className: "gap-1" },
+                        React.createElement(PlusIcon, null),
+                        "Add level")),
+                React.createElement(Separator, null),
+                React.createElement("div", { className: "flex justify-end gap-2" },
+                    React.createElement(Button, { variant: "outline", size: "sm", onClick: () => onOpenChange(false) }, "Cancel"),
+                    React.createElement(Button, { size: "sm", onClick: commit, disabled: levels.length === 0 }, "OK"))))));
+});
+SortRangeDialog.displayName = "SortRangeDialog";
+/**
+ * Host-mounted, atom-driven wrapper around {@link SortRangeDialog}. Mount this
+ * once in the host (alongside the other editor dialogs); the filter box opens
+ * it via `useOpenSortDialog`. This indirection is required because the filter
+ * box lives inside a popover that unmounts when it closes — a dialog rendered
+ * there would be torn down before it could appear.
+ */
+export const SortRangeDialogHost = () => {
+    const [request, setRequest] = useSortDialogState();
+    const close = useCallback(() => setRequest(null), [setRequest]);
+    return (React.createElement(SortRangeDialog, { open: request != null, onOpenChange: (open) => {
+            if (!open)
+                close();
+        }, columns: request?.columns ?? [], customLists: request?.customLists, initialSpecs: request?.initialSpecs, onApply: (specs) => request?.onApply(specs) }));
+};
+SortRangeDialogHost.displayName = "SortRangeDialogHost";

package/dist/esm/components/toolbar/background-color-selector.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps, ComponentType } from "react";
+import React from "react";
+import type { Color } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+import type { ColorSelectorProps } from "./color-selector";
+import { ColorSelector } from "./color-selector";
+type BackgroundColorSelectorProps = {
+    disabled?: boolean;
+    color?: Color | null;
+    theme?: SpreadsheetTheme;
+    onChange?(color: Color | undefined): void;
+    /**
+     * Custom color selector component
+     */
+    ColorSelector?: ComponentType<ColorSelectorProps>;
+} & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
+export declare const BackgroundColorSelector: ({ color, theme, onChange, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent, }: BackgroundColorSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=background-color-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"background-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/background-color-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,KAAK,4BAA4B,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,wHAQrC,4BAA4B,sBAqC9B,CAAC"}

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

@@ -0,0 +1,28 @@
+import { IoMdColorFill } from "@rowsncolumns/icons";
+import { Popover, PopoverContent, PopoverTrigger } from "@rowsncolumns/ui";
+import { IconButton } from "@rowsncolumns/ui";
+import React from "react";
+import { useState } from "react";
+import { useFocusSheet } from "../../atoms";
+import { defaultSpreadsheetTheme } from "../../config";
+import { getStringifiedColor } from "../../themes";
+import { ColorSelector } from "./color-selector";
+export const BackgroundColorSelector = ({ color = "transparent", theme = defaultSpreadsheetTheme, onChange, onAddUserDefinedColor, userDefinedColors, disabled, ColorSelector: ColorSelectorComponent = ColorSelector, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const close = () => setIsOpen(false);
+    const open = () => setIsOpen(true);
+    const colorString = getStringifiedColor(color, theme);
+    const focusSheet = useFocusSheet();
+    return (React.createElement(Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { className: "text-base flex-row", style: {
+                    borderBottom: `4px ${colorString} solid`,
+                }, tooltip: "Fill color", onClick: open, disabled: disabled },
+                React.createElement(IoMdColorFill, null))),
+        React.createElement(PopoverContent, { align: "start" },
+            React.createElement(ColorSelectorComponent, { color: color, onChange: (color) => {
+                    onChange?.(color);
+                    focusSheet?.();
+                    close();
+                }, theme: theme, resetButtonTitle: "No fill", userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }))));
+};

package/dist/esm/components/toolbar/border-color-selector.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps, ComponentType } from "react";
+import React from "react";
+import type { Color } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+import type { ColorSelectorProps } from "./color-selector";
+import { ColorSelector } from "./color-selector";
+type BorderColorSelectorProps = {
+    color?: Color | null;
+    theme: SpreadsheetTheme;
+    onChange?(color: Color | undefined): void;
+    /**
+     * Custom color selector component
+     */
+    ColorSelector?: ComponentType<ColorSelectorProps>;
+} & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
+export declare const BorderColorSelector: ({ color, theme, onChange, onAddUserDefinedColor, userDefinedColors, ColorSelector: ColorSelectorComponent, }: BorderColorSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=border-color-selector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"border-color-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/border-color-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,KAAK,wBAAwB,GAAG;IAC9B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AACF,eAAO,MAAM,mBAAmB,GAAI,8GAOjC,wBAAwB,sBA+B1B,CAAC"}

package/dist/esm/components/toolbar/border-color-selector.js

@@ -0,0 +1,25 @@
+import { MdEdit, MdOutlineArrowDropDown } from "@rowsncolumns/icons";
+import { Popover, PopoverContent, PopoverTrigger } from "@rowsncolumns/ui";
+import { IconButton } from "@rowsncolumns/ui";
+import React from "react";
+import { useState } from "react";
+import { getStringifiedColor } from "../../themes";
+import { ColorSelector } from "./color-selector";
+export const BorderColorSelector = ({ color, theme, onChange, onAddUserDefinedColor, userDefinedColors, ColorSelector: ColorSelectorComponent = ColorSelector, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const close = () => setIsOpen(false);
+    const open = () => setIsOpen(true);
+    const colorString = getStringifiedColor(color, theme);
+    return (React.createElement(Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { onClick: open, tooltip: "Border color" },
+                React.createElement(MdEdit, { style: {
+                        borderBottom: `4px ${colorString} solid`,
+                    } }),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(PopoverContent, { align: "start" },
+            React.createElement(ColorSelectorComponent, { color: color, onChange: (color) => {
+                    onChange?.(color);
+                    close();
+                }, theme: theme, userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor }))));
+};

package/dist/esm/components/toolbar/border-line-style-options.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { BorderStyle } from "../../types";
+type BorderLineStyleOptionsProps = {
+    borderStyle?: BorderStyle;
+    onChange?(style: BorderStyle): void;
+};
+export declare const BorderLineStyleOptions: ({ borderStyle, onChange, }: BorderLineStyleOptionsProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=border-line-style-options.d.ts.map

package/dist/esm/components/toolbar/border-line-style-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-line-style-options.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/border-line-style-options.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,KAAK,2BAA2B,GAAG;IACjC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,4BAGpC,2BAA2B,sBAuL7B,CAAC"}

package/dist/esm/components/toolbar/border-line-style-options.js

@@ -0,0 +1,42 @@
+import { IconButton } from "@rowsncolumns/ui";
+import React from "react";
+export const BorderLineStyleOptions = ({ borderStyle, onChange, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IconButton, { size: "xl", className: "py-2 px-2", onClick: () => {
+                onChange?.("solid");
+                close();
+            }, tooltip: "Solid", isActive: borderStyle === "solid" },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "1", style: { userSelect: "none" } },
+                React.createElement("line", { x1: "0", y1: "0.5", x2: "50", y2: "0.5", strokeWidth: "1", stroke: "currentColor", style: { userSelect: "none" } }))),
+        React.createElement(IconButton, { size: "xl", className: "py-2 px-2", onClick: () => {
+                onChange?.("solid_medium");
+                close();
+            }, tooltip: "Solid medium", isActive: borderStyle === "solid_medium" },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "2", style: { userSelect: "none" } },
+                React.createElement("line", { x1: "0", y1: "1.0", x2: "50", y2: "1.0", strokeWidth: "2", stroke: "currentColor", style: { userSelect: "none" } }))),
+        React.createElement(IconButton, { size: "xl", className: "py-2 px-2", onClick: () => {
+                onChange?.("solid_thick");
+                close();
+            }, tooltip: "Solid thick", isActive: borderStyle === "solid_thick" },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "3", style: { userSelect: "none" } },
+                React.createElement("line", { x1: "0", y1: "1.5", x2: "50", y2: "1.5", strokeWidth: "3", stroke: "currentColor", style: { userSelect: "none" } }))),
+        React.createElement(IconButton, { size: "xl", className: "py-2 px-2", onClick: () => {
+                onChange?.("dashed");
+                close();
+            }, tooltip: "Dashed", isActive: borderStyle === "dashed" },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "1", style: { userSelect: "none" } },
+                React.createElement("line", { x1: "0", y1: "0.5", x2: "50", y2: "0.5", strokeWidth: "1", stroke: "currentColor", strokeDasharray: "2", style: { userSelect: "none" } }))),
+        React.createElement(IconButton, { size: "xl", className: "py-2 px-2", onClick: () => {
+                onChange?.("dotted");
+                close();
+            }, tooltip: "Dotted", isActive: borderStyle === "dotted" },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "1", style: { userSelect: "none" } },
+                React.createElement("line", { x1: "0", y1: "0.5", x2: "50", y2: "0.5", strokeWidth: "1", stroke: "currentColor", strokeDasharray: "1", style: { userSelect: "none" } }))),
+        React.createElement(IconButton, { size: "xl", className: "py-2 px-2", onClick: () => {
+                onChange?.("double");
+                close();
+            }, tooltip: "Double", isActive: borderStyle === "double" },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "50", height: "4", style: { userSelect: "none" } },
+                React.createElement("line", { x1: "0", y1: "0.5", x2: "50", y2: "0.5", strokeWidth: "1", stroke: "currentColor", style: { userSelect: "none" } }),
+                React.createElement("line", { x1: "0", y1: "3", x2: "50", y2: "3", strokeWidth: "1", stroke: "currentColor", style: { userSelect: "none" } })))));
+};

package/dist/esm/components/toolbar/border-line-style-selector.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { BorderStyle } from "../../types";
+type BorderLineStyleSelectorProps = {
+    borderStyle?: BorderStyle;
+    onChange?(style: BorderStyle): void;
+};
+export declare const BorderLineStyleSelector: ({ borderStyle, onChange, }: BorderLineStyleSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=border-line-style-selector.d.ts.map

package/dist/esm/components/toolbar/border-line-style-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-line-style-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/border-line-style-selector.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,KAAK,4BAA4B,GAAG;IAClC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CACrC,CAAC;AACF,eAAO,MAAM,uBAAuB,GAAI,4BAGrC,4BAA4B,sBAqB9B,CAAC"}

package/dist/esm/components/toolbar/border-line-style-selector.js

@@ -0,0 +1,19 @@
+import { MdLineStyle, MdOutlineArrowDropDown } from "@rowsncolumns/icons";
+import { Popover, PopoverContent, PopoverTrigger } from "@rowsncolumns/ui";
+import { IconButton } from "@rowsncolumns/ui";
+import { Stack } from "@rowsncolumns/ui";
+import React from "react";
+import { useState } from "react";
+import { BorderLineStyleOptions } from "./border-line-style-options";
+export const BorderLineStyleSelector = ({ borderStyle = "solid", onChange, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const open = () => setIsOpen(true);
+    return (React.createElement(Popover, { modal: false, open: isOpen, onOpenChange: setIsOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { onClick: open, tooltip: "Border style" },
+                React.createElement(MdLineStyle, null),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(PopoverContent, { align: "start" },
+            React.createElement(Stack, { className: "gap-1", direction: "vertical" },
+                React.createElement(BorderLineStyleOptions, { borderStyle: borderStyle, onChange: onChange })))));
+};

package/dist/esm/components/toolbar/border-location-options.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { BorderLocation } from "./types";
+type BorderLocationOptionsProps = {
+    disabledBorderLocations?: BorderLocation[];
+    borderLocation?: BorderLocation;
+    onChange?(borderLocation: BorderLocation): void;
+    onClear?(): void;
+};
+export declare const BorderLocationOptions: ({ borderLocation, disabledBorderLocations, onChange, onClear, }: BorderLocationOptionsProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=border-location-options.d.ts.map

package/dist/esm/components/toolbar/border-location-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-location-options.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/border-location-options.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,0BAA0B,GAAG;IAChC,uBAAuB,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,CAAC,cAAc,EAAE,cAAc,GAAG,IAAI,CAAC;IAChD,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB,CAAC;AAsDF,eAAO,MAAM,qBAAqB,GAAI,iEAKnC,0BAA0B,sBA+B5B,CAAC"}

package/dist/esm/components/toolbar/border-location-options.js

@@ -0,0 +1,64 @@
+import { MdBorderAll, MdBorderBottom, MdBorderClear, MdBorderHorizontal, MdBorderInner, MdBorderLeft, MdBorderOuter, MdBorderRight, MdBorderTop, MdBorderVertical, } from "@rowsncolumns/icons";
+import { IconButton } from "@rowsncolumns/ui";
+import React, { useCallback } from "react";
+const BORDER_LOCATIONS = [
+    {
+        title: "All borders",
+        location: "all",
+        icon: MdBorderAll,
+    },
+    {
+        title: "Inner borders",
+        location: "inner",
+        icon: MdBorderInner,
+    },
+    {
+        title: "Horizontal borders",
+        location: "horizontal",
+        icon: MdBorderHorizontal,
+    },
+    {
+        title: "Vertical borders",
+        location: "vertical",
+        icon: MdBorderVertical,
+    },
+    {
+        title: "Outer borders",
+        location: "outer",
+        icon: MdBorderOuter,
+    },
+    {
+        title: "Left border",
+        location: "left",
+        icon: MdBorderLeft,
+    },
+    {
+        title: "Top border",
+        location: "top",
+        icon: MdBorderTop,
+    },
+    {
+        title: "Right border",
+        location: "right",
+        icon: MdBorderRight,
+    },
+    {
+        title: "Bottom border",
+        location: "bottom",
+        icon: MdBorderBottom,
+    },
+];
+export const BorderLocationOptions = ({ borderLocation, disabledBorderLocations, onChange, onClear, }) => {
+    const isDisabled = useCallback((location) => {
+        return disabledBorderLocations
+            ? disabledBorderLocations.includes(location)
+            : false;
+    }, [disabledBorderLocations]);
+    return (React.createElement(React.Fragment, null,
+        BORDER_LOCATIONS.map(({ title, location, icon: Icon }) => {
+            return (React.createElement(IconButton, { size: "xl", isActive: borderLocation === location, onClick: () => onChange?.(location), tooltip: title, key: location, disabled: isDisabled(location) },
+                React.createElement(Icon, null)));
+        }),
+        React.createElement(IconButton, { size: "xl", onClick: () => onClear?.(), tooltip: "No borders" },
+            React.createElement(MdBorderClear, null))));
+};

package/dist/esm/components/toolbar/border-selector.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, ComponentType } from "react";
+import React from "react";
+import type { Borders, BorderStyle, Color } from "../../types";
+import type { SpreadsheetTheme } from "../canvas-grid/typings";
+import type { ColorSelector, ColorSelectorProps } from "./color-selector";
+import type { BorderLocation } from "./types";
+type BorderSelectorProps = {
+    isDarkMode?: boolean;
+    disabledBorderLocations?: BorderLocation[];
+    onChange?(location: BorderLocation, color: Color | undefined, style: BorderStyle | undefined): void;
+    borders?: Borders | null;
+    theme: SpreadsheetTheme;
+    /**
+     * Custom color selector component
+     */
+    ColorSelector?: ComponentType<ColorSelectorProps>;
+} & Pick<ComponentProps<typeof ColorSelector>, "userDefinedColors" | "onAddUserDefinedColor">;
+export declare const BorderSelector: ({ isDarkMode, theme, onChange, userDefinedColors, onAddUserDefinedColor, disabledBorderLocations, ColorSelector: ColorSelectorComponent, }: BorderSelectorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=border-selector.d.ts.map

package/dist/esm/components/toolbar/border-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-selector.d.ts","sourceRoot":"","sources":["../../../../components/toolbar/border-selector.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,mBAAmB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uBAAuB,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3C,QAAQ,CAAC,CACP,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,KAAK,GAAG,SAAS,EACxB,KAAK,EAAE,WAAW,GAAG,SAAS,GAC7B,IAAI,CAAC;IACR,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnD,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,aAAa,CAAC,EACpC,mBAAmB,GAAG,uBAAuB,CAC9C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,4IAQ5B,mBAAmB,sBA4FrB,CAAC"}

package/dist/esm/components/toolbar/border-selector.js

@@ -0,0 +1,59 @@
+import { MdBorderAll, MdOutlineArrowDropDown } from "@rowsncolumns/icons";
+import { Popover, PopoverContent, PopoverTrigger } from "@rowsncolumns/ui";
+import { IconButton } from "@rowsncolumns/ui";
+import { Stack } from "@rowsncolumns/ui";
+import { Separator } from "@rowsncolumns/ui";
+import React, { useCallback } from "react";
+import { useState } from "react";
+import { BorderColorSelector } from "./border-color-selector";
+import { BorderLineStyleSelector } from "./border-line-style-selector";
+import { BorderLocationOptions } from "./border-location-options";
+export const BorderSelector = ({ isDarkMode, theme, onChange, userDefinedColors, onAddUserDefinedColor, disabledBorderLocations, ColorSelector: ColorSelectorComponent, }) => {
+    const [color, setColorState] = useState(undefined);
+    const [style, setStyleState] = useState("solid");
+    const [borderLocation, setBorderLocationState] = useState();
+    const getDefaultBorderColor = useCallback(() => {
+        return { theme: 1, tint: isDarkMode ? 1 : 0 };
+    }, [isDarkMode]);
+    const setColor = useCallback((col) => {
+        setColorState(col);
+        // Upstream change
+        if (borderLocation) {
+            onChange?.(borderLocation, col ?? getDefaultBorderColor(), style);
+        }
+    }, [getDefaultBorderColor, borderLocation, style, onChange]);
+    const setStyle = useCallback((styl) => {
+        setStyleState(styl);
+        // Upstream change
+        if (borderLocation) {
+            onChange?.(borderLocation, color ?? getDefaultBorderColor(), styl);
+        }
+    }, [getDefaultBorderColor, color, borderLocation, onChange]);
+    const setBorderLocation = useCallback((location) => {
+        setBorderLocationState(location);
+        // Upstream change
+        if (location) {
+            onChange?.(location, color ?? getDefaultBorderColor(), style);
+        }
+    }, [getDefaultBorderColor, color, style, onChange]);
+    // Remove all borders
+    const clearBorder = () => {
+        // Remove border location
+        setBorderLocationState(undefined);
+        // Upstream
+        onChange?.("all", undefined, undefined);
+    };
+    return (React.createElement(Popover, null,
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { size: "xl", tooltip: "Borders" },
+                React.createElement(MdBorderAll, null),
+                React.createElement(MdOutlineArrowDropDown, null))),
+        React.createElement(PopoverContent, { align: "start" },
+            React.createElement(Stack, { className: "gap-2", direction: "horizontal" },
+                React.createElement(Stack, { direction: "horizontal", className: "gap-0 max-w-[140px] flex-wrap" },
+                    React.createElement(BorderLocationOptions, { borderLocation: borderLocation, onChange: setBorderLocation, onClear: clearBorder, disabledBorderLocations: disabledBorderLocations })),
+                React.createElement(Separator, { orientation: "vertical", color: "$gray6" }),
+                React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+                    React.createElement(BorderColorSelector, { color: color ?? getDefaultBorderColor(), onChange: setColor, theme: theme, userDefinedColors: userDefinedColors, onAddUserDefinedColor: onAddUserDefinedColor, ColorSelector: ColorSelectorComponent }),
+                    React.createElement(BorderLineStyleSelector, { borderStyle: style, onChange: setStyle }))))));
+};