@rowsncolumns/ui 15.0.38

package/dist/esm/hex-color-picker/index.js

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { IconButton } from "../icon-button";
+import { PlusCircledIcon } from "@rowsncolumns/icons";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Button } from "../button";
+import isNil from "lodash/isNil";
+import { HexColorPicker as ReactColorPicker } from "react-colorful";
+import { Input } from "../input";
+export const HexColorPicker = ({ value, onChange }) => {
+    const [isOpen, onOpenChange] = useState(false);
+    const close = () => onOpenChange(false);
+    return (React.createElement(Popover, { open: isOpen, onOpenChange: onOpenChange, modal: true },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(IconButton, { tooltip: "Add a custom color" },
+                React.createElement(PlusCircledIcon, null))),
+        React.createElement(PopoverContent, null,
+            React.createElement(ColorPickerContent, { initialValue: value, onCancel: () => {
+                    close();
+                }, onSubmit: (value) => {
+                    onChange?.(value);
+                    close();
+                } }))));
+};
+const ColorPickerContent = ({ initialValue, onCancel, onSubmit, }) => {
+    const defaultColor = isNil(initialValue) || initialValue === "transparent"
+        ? "#000000"
+        : initialValue;
+    const [value, onChange] = useState(defaultColor);
+    return (React.createElement("div", { className: "flex flex-col gap-2" },
+        React.createElement(ReactColorPicker, { className: "rnc-colorpicker", color: value, onChange: (color) => onChange(color) }),
+        React.createElement(Input, { value: value, onChange: (e) => {
+                onChange?.(e.target.value);
+            }, onFocus: (e) => {
+                // Select on focus
+                e.target.select();
+            }, className: "text-xs" }),
+        React.createElement("div", { className: "flex gap-2 justify-end" },
+            React.createElement(Button, { size: "xs", onClick: () => {
+                    onCancel?.();
+                } }, "Cancel"),
+            React.createElement(Button, { size: "xs", variant: "primary", onClick: () => {
+                    onSubmit?.(value);
+                } }, "OK"))));
+};

package/dist/esm/hooks/use-cycle-reference.d.ts

@@ -0,0 +1,16 @@
+import type { ParsedToken } from "@rowsncolumns/calculator";
+type UseCycleFormulaReferenceProps = {
+    onUpdate: (address: string, selectionMode?: string) => void;
+};
+/**
+ * Detect the current reference type from a cell address
+ * e.g. $A$1 -> absolute, A$1 -> absolute-row, $A1 -> absolute-column, A1 -> relative
+ */
+export declare const detectReferenceType: (address: string) => string;
+/**
+ * Get the next reference type in the cycle based on the current address
+ */
+export declare const getNextReference: (currentAddress: string) => string;
+export declare const useCycleFormulaReference: ({ onUpdate, }: UseCycleFormulaReferenceProps) => (token: ParsedToken | undefined) => void;
+export {};
+//# sourceMappingURL=use-cycle-reference.d.ts.map

package/dist/esm/hooks/use-cycle-reference.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cycle-reference.d.ts","sourceRoot":"","sources":["../../../hooks/use-cycle-reference.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAS5D,KAAK,6BAA6B,GAAG;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D,CAAC;AASF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,MAAM,KAAG,MAUrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,gBAAgB,MAAM,KAAG,MAKzD,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,eAEtC,6BAA6B,aAEpB,WAAW,GAAG,SAAS,SA8ClC,CAAC"}

package/dist/esm/hooks/use-cycle-reference.js

@@ -0,0 +1,70 @@
+import { tokenVocabulary } from "@rowsncolumns/fast-formula-parser";
+import { addressToCell, cellToAddress, sanitizeSheetName, } from "@rowsncolumns/utils";
+import { useCallback } from "react";
+const referenceCycleOrder = [
+    "absolute",
+    "absolute-row",
+    "absolute-column",
+    "relative",
+];
+/**
+ * Detect the current reference type from a cell address
+ * e.g. $A$1 -> absolute, A$1 -> absolute-row, $A1 -> absolute-column, A1 -> relative
+ */
+export const detectReferenceType = (address) => {
+    // Check if column is absolute ($ before the letter)
+    const hasAbsoluteColumn = address.startsWith("$");
+    // Check if row is absolute ($ before the number)
+    const hasAbsoluteRow = /\$\d/.test(address);
+    if (hasAbsoluteColumn && hasAbsoluteRow)
+        return "absolute";
+    if (hasAbsoluteRow)
+        return "absolute-row";
+    if (hasAbsoluteColumn)
+        return "absolute-column";
+    return "relative";
+};
+/**
+ * Get the next reference type in the cycle based on the current address
+ */
+export const getNextReference = (currentAddress) => {
+    const currentType = detectReferenceType(currentAddress);
+    const currentIndex = referenceCycleOrder.indexOf(currentType);
+    const nextIndex = (currentIndex + 1) % referenceCycleOrder.length;
+    return referenceCycleOrder[nextIndex];
+};
+export const useCycleFormulaReference = ({ onUpdate, }) => {
+    return useCallback((token) => {
+        // Cell token
+        if (token?.tokenType.name === tokenVocabulary.Cell.name && token.image) {
+            const sheetName = token.sheetName;
+            const sheetNameStr = sheetName
+                ? sanitizeSheetName(sheetName) + "!"
+                : "";
+            const [from, to] = token.image.split(":");
+            // Detect current reference type and get the next one in cycle
+            const reference = getNextReference(from);
+            const fromCell = addressToCell(from);
+            const toCell = to ? addressToCell(to) : undefined;
+            let fromCellAddress = null;
+            let toCellAddress = "";
+            fromCellAddress = cellToAddress(fromCell, reference === "relative"
+                ? false
+                : reference === "absolute" || reference === "absolute-column", reference === "relative"
+                ? false
+                : reference === "absolute" || reference === "absolute-row");
+            if (toCell) {
+                toCellAddress = cellToAddress(toCell, reference === "relative"
+                    ? false
+                    : reference === "absolute" || reference === "absolute-column", reference === "relative"
+                    ? false
+                    : reference === "absolute" || reference === "absolute-row");
+            }
+            const address = `${sheetNameStr}${fromCellAddress}${toCellAddress ? ":" + toCellAddress : ""}`;
+            onUpdate(address, "modify");
+        }
+        else {
+            console.log("Token not processed - not a Cell token or missing image");
+        }
+    }, [onUpdate]);
+};

package/dist/esm/hooks/use-dropdown-categories.d.ts

@@ -0,0 +1,9 @@
+import type { CalculatorFunction } from "@rowsncolumns/common-types";
+import { OptionItem } from "../editor-pm/types";
+type InputProps = {
+    items: (OptionItem | CalculatorFunction)[];
+    formulaMode?: boolean;
+};
+export declare const useDropdownCategories: ({ items, formulaMode }: InputProps) => [OptionItem[], OptionItem[], CalculatorFunction[], OptionItem[], OptionItem[], OptionItem[]];
+export {};
+//# sourceMappingURL=use-dropdown-categories.d.ts.map

package/dist/esm/hooks/use-dropdown-categories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dropdown-categories.d.ts","sourceRoot":"","sources":["../../../hooks/use-dropdown-categories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,CAAC,UAAU,GAAG,kBAAkB,CAAC,EAAE,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,wBAAwB,UAAU,iGAgEvE,CAAC"}

package/dist/esm/hooks/use-dropdown-categories.js

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+export const useDropdownCategories = ({ items, formulaMode }) => {
+    return useMemo(() => {
+        // Structured references: table, column, specialitem
+        const structuredReferences = items.filter((item) => item.category === "table" ||
+            item.category === "column" ||
+            item.category === "specialitem" ||
+            item.category === "thisrow");
+        // Named ranges
+        const namedRanges = items.filter((item) => item.category === "namedrange");
+        // Property references
+        const propertyReferences = items.filter((item) => item.category === "property");
+        // Parameter references
+        const parameterSuggestions = items.filter((item) => item.category === "parameter");
+        // Function suggestions (only CalculatorFunctions)
+        const functionSuggestions = formulaMode
+            ? items.filter((item) => item.title !== undefined &&
+                !("category" in item))
+            : [];
+        // Dropdown options: everything else that is not structured, named, property, or function
+        const dropdownOptions = formulaMode
+            ? []
+            : items.filter((item) => !structuredReferences.includes(item) &&
+                !namedRanges.includes(item) &&
+                !propertyReferences.includes(item) &&
+                !parameterSuggestions.includes(item) &&
+                item.title !== undefined &&
+                !("category" in item));
+        return [
+            structuredReferences,
+            dropdownOptions,
+            functionSuggestions,
+            namedRanges,
+            propertyReferences,
+            parameterSuggestions,
+        ];
+    }, [items, formulaMode]);
+};

package/dist/esm/hooks/use-dropdown.d.ts

@@ -0,0 +1,38 @@
+import type React from "react";
+import { Maybe } from "@rowsncolumns/common-types";
+import { OptionItem } from "../editor-pm/types.js";
+type UseDropdownProps<T> = {
+    items: T[] | undefined;
+    initialQuery?: string;
+    initialOpen: boolean;
+    initialHighlightedIndex: number;
+    limit?: number;
+    showAllIfEmpty?: boolean;
+    isNewValue?: boolean;
+    itemsWhenEmpty?: T[];
+    itemToString(item: T): string;
+    onChange(value: T): void;
+    /**
+     * Marks the item that matches the current (pre-edit) value so the dropdown
+     * opens with it highlighted — e.g. a data-validation list highlighting the
+     * cell's current entry (Excel behavior). Only applied while the user hasn't
+     * typed yet; typing hands the highlight to the filter.
+     */
+    isItemSelected?(item: T): boolean;
+};
+export declare const sortByUnderscore: <T extends OptionItem>(a: Maybe<T>, b: Maybe<T>) => 0 | 1 | -1;
+export declare const sanitizeDropdownQuery: (value: string) => string;
+export declare const useDropdown: <T extends OptionItem>({ initialOpen, initialHighlightedIndex, initialQuery, onChange, items, isNewValue, itemToString, limit, showAllIfEmpty, itemsWhenEmpty, isItemSelected, }: UseDropdownProps<T>) => {
+    isOpen: boolean;
+    highlightedIndex: number;
+    onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    onSelect: (value: T) => void;
+    onChangeHighlightedIndex: React.Dispatch<React.SetStateAction<number>>;
+    items: T[];
+    setQuery: (value: string) => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    query: string;
+};
+export {};
+//# sourceMappingURL=use-dropdown.d.ts.map

package/dist/esm/hooks/use-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dropdown.d.ts","sourceRoot":"","sources":["../../../hooks/use-dropdown.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB,KAAK,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,uBAAuB,EAAE,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB;;;;;OAKG;IACH,cAAc,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,UAAU,EACnD,GAAG,KAAK,CAAC,CAAC,CAAC,EACX,GAAG,KAAK,CAAC,CAAC,CAAC,eAQZ,CAAC;AAuDF,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,WACtB,CAAC;AAE9B,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,UAAU,EAAE,2JAY/C,gBAAgB,CAAC,CAAC,CAAC;;;mBAgGd,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC;sBAd/B,CAAC;;;sBAoGgC,MAAM;;;;CAoBlD,CAAC"}

package/dist/esm/hooks/use-dropdown.js

@@ -0,0 +1,236 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.ts";
+import { matchSorter } from "match-sorter";
+export const sortByUnderscore = (a, b) => {
+    const aUnderscore = String(a?.title)?.startsWith("_");
+    const bUnderscore = String(b?.title)?.startsWith("_");
+    if (aUnderscore === bUnderscore) {
+        return 0;
+    }
+    return aUnderscore ? 1 : -1;
+};
+// Keep dropdown ordering consistent with our UI grouping so keyboard selection
+// lines up with what the user sees.
+const reorderByPriority = (list) => {
+    const buckets = {
+        0: [], // structured references
+        1: [], // properties
+        2: [], // parameters
+        3: [], // named ranges
+        4: [], // functions
+        5: [], // everything else
+    };
+    list.forEach((item) => {
+        const category = item?.category;
+        if (category === "table" ||
+            category === "column" ||
+            category === "specialitem" ||
+            category === "thisrow") {
+            buckets[0].push(item);
+            return;
+        }
+        if (category === "property") {
+            buckets[1].push(item);
+            return;
+        }
+        if (category === "parameter") {
+            buckets[2].push(item);
+            return;
+        }
+        if (category === "namedrange") {
+            buckets[3].push(item);
+            return;
+        }
+        // Functions are CalculatorFunction (no category) or explicit category
+        if (category === "function" || "syntax" in item) {
+            buckets[4].push(item);
+            return;
+        }
+        buckets[5].push(item);
+    });
+    return [
+        ...buckets[0],
+        ...buckets[1],
+        ...buckets[2],
+        ...buckets[3],
+        ...buckets[4],
+        ...buckets[5],
+    ];
+};
+export const sanitizeDropdownQuery = (value) => value.replace(/["'`]/g, "");
+export const useDropdown = ({ initialOpen, initialHighlightedIndex, initialQuery, onChange, items = [], isNewValue, itemToString, limit = 10, showAllIfEmpty, itemsWhenEmpty, isItemSelected, }) => {
+    const [isOpen, setIsOpen] = useState(initialOpen);
+    const [query, setQuery] = useState(initialQuery ?? "");
+    const [highlightedIndex, setHighlightedIndex] = useState(initialHighlightedIndex);
+    const openMenu = useCallback(() => setIsOpen(true), []);
+    const closeMenu = useCallback(() => setIsOpen(false), []);
+    // Refs
+    const isDirty = useRef(isNewValue);
+    const initialQueryRef = useRef(undefined);
+    const highlightedIndexRef = useRef(undefined);
+    const queryRef = useRef(undefined);
+    const filteredItemsRef = useRef(undefined);
+    useIsomorphicLayoutEffect(() => {
+        queryRef.current = query;
+    }, [query]);
+    useIsomorphicLayoutEffect(() => {
+        highlightedIndexRef.current = highlightedIndex;
+    }, [highlightedIndex]);
+    useIsomorphicLayoutEffect(() => {
+        initialQueryRef.current = initialQuery ?? "";
+        isDirty.current = Boolean(isNewValue);
+        // The hosting editor stays mounted (hidden) between editing sessions, so
+        // the query must be re-seeded when a new session starts — otherwise the
+        // previous session's filter narrows the next dropdown open.
+        setQuery(initialQuery ?? "");
+    }, [initialQuery, isNewValue]);
+    // Filtered items
+    const filteredItems = useMemo(() => {
+        if (!query) {
+            if (itemsWhenEmpty?.length) {
+                return reorderByPriority([...itemsWhenEmpty]);
+            }
+            if (!showAllIfEmpty) {
+                return [];
+            }
+            return reorderByPriority([...items].sort(sortByUnderscore));
+        }
+        if (!isDirty.current) {
+            return reorderByPriority([...items].sort(sortByUnderscore));
+        }
+        const cleanedQuery = sanitizeDropdownQuery(query);
+        // Break ties (e.g. "SU" matching both SUM and SUBSTITUTE) by preferring
+        // an exact-prefix match, then the shorter name, before the default
+        // alphabetical order — so the closest function is highlighted first.
+        const queryLower = cleanedQuery.toLowerCase();
+        const dropdownBaseSort = (a, b) => {
+            const aValue = String(a.rankedValue ?? "");
+            const bValue = String(b.rankedValue ?? "");
+            const aPrefix = aValue.toLowerCase().startsWith(queryLower);
+            const bPrefix = bValue.toLowerCase().startsWith(queryLower);
+            if (aPrefix !== bPrefix) {
+                return aPrefix ? -1 : 1;
+            }
+            if (aValue.length !== bValue.length) {
+                return aValue.length - bValue.length;
+            }
+            return aValue.localeCompare(bValue);
+        };
+        const sorted = matchSorter(items, cleanedQuery, {
+            keys: ["title"],
+            baseSort: dropdownBaseSort,
+        });
+        return reorderByPriority(sorted).slice(0, limit);
+    }, [items, query, limit, itemToString, showAllIfEmpty, itemsWhenEmpty]);
+    useIsomorphicLayoutEffect(() => {
+        filteredItemsRef.current = filteredItems;
+    }, [filteredItems]);
+    // User selects a value from the dropdown
+    const onSelect = useCallback((value) => {
+        onChange?.(value);
+        // Selecting an item consumes the filter; without this the selected
+        // text keeps filtering the list on the next dropdown open (e.g. a
+        // data-validation dropdown showing only the previously picked option).
+        isDirty.current = false;
+        setQuery("");
+        setHighlightedIndex(-1);
+    }, [onChange]);
+    const handleKeyDown = useCallback((e) => {
+        const query = queryRef.current;
+        const index = highlightedIndexRef.current;
+        const activeItems = filteredItemsRef.current ?? [];
+        const hasValue = activeItems.length || query;
+        const len = activeItems.length - 1;
+        // If there are no items, lets skip hiding showing menu
+        if (!activeItems.length) {
+            return;
+        }
+        switch (e.key) {
+            case "ArrowDown": {
+                if (!isOpen && hasValue) {
+                    openMenu();
+                    return;
+                }
+                setHighlightedIndex((prev) => {
+                    if (prev === len) {
+                        return 0;
+                    }
+                    return Math.min(prev + 1, len);
+                });
+                e.preventDefault();
+                break;
+            }
+            case "ArrowUp":
+                if (!isOpen && hasValue) {
+                    openMenu();
+                }
+                setHighlightedIndex((prev) => {
+                    if (prev === 0) {
+                        return len;
+                    }
+                    return Math.max(0, prev - 1);
+                });
+                e.preventDefault();
+                break;
+            case "Escape":
+                if (isOpen) {
+                    closeMenu();
+                    e.preventDefault();
+                }
+                break;
+            case "Tab":
+            case "Enter": {
+                if (index === -1 || index === undefined) {
+                    return;
+                }
+                const selectedItem = activeItems[index];
+                onSelect(selectedItem);
+                e.preventDefault();
+                break;
+            }
+        }
+    }, [isOpen, openMenu, onSelect, closeMenu]);
+    useEffect(() => {
+        if (filteredItems.length) {
+            openMenu();
+        }
+        else {
+            closeMenu();
+        }
+        // If user clears the
+        if (!query) {
+            setHighlightedIndex(-1);
+        }
+    }, [query, filteredItems, closeMenu, openMenu]);
+    // Pre-select the item matching the current value (e.g. a data-validation
+    // dropdown highlighting the cell's current entry — Excel behavior). Runs
+    // only while the session is pristine (`isDirty` flips on the first typed
+    // change, handing the highlight to the filter). Declared AFTER the reset
+    // effect above so the seed wins the mount-time ordering when the query is
+    // empty (a blank cell selecting the list's empty/text-prefix entry).
+    useEffect(() => {
+        if (!isItemSelected || isDirty.current) {
+            return;
+        }
+        setHighlightedIndex(filteredItems.findIndex(isItemSelected));
+    }, [filteredItems, isItemSelected]);
+    const handleSetQuery = useCallback((value) => {
+        setQuery(value);
+        setHighlightedIndex(0);
+        if (value !== initialQueryRef.current) {
+            isDirty.current = true;
+        }
+    }, []);
+    return {
+        isOpen,
+        highlightedIndex,
+        onKeyDown: handleKeyDown,
+        onSelect,
+        onChangeHighlightedIndex: setHighlightedIndex,
+        items: filteredItems,
+        setQuery: handleSetQuery,
+        openMenu,
+        closeMenu,
+        query,
+    };
+};

package/dist/esm/hooks/use-isomorphic-layout-effect.ts.d.ts

@@ -0,0 +1,6 @@
+import { useEffect } from "react";
+/**
+ * Prevent warning on SSR by falling back to useEffect when DOM isn't available
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+//# sourceMappingURL=use-isomorphic-layout-effect.ts.d.ts.map

package/dist/esm/hooks/use-isomorphic-layout-effect.ts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-isomorphic-layout-effect.ts.d.ts","sourceRoot":"","sources":["../../../hooks/use-isomorphic-layout-effect.ts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAEnD;;GAEG;AAEH,eAAO,MAAM,yBAAyB,kBAEzB,CAAC"}

package/dist/esm/hooks/use-isomorphic-layout-effect.ts.js

@@ -0,0 +1,8 @@
+import { canUseDOM } from "@rowsncolumns/utils";
+import { useEffect, useLayoutEffect } from "react";
+/**
+ * Prevent warning on SSR by falling back to useEffect when DOM isn't available
+ */
+export const useIsomorphicLayoutEffect = canUseDOM
+    ? useLayoutEffect
+    : useEffect;

package/dist/esm/hooks/use-modal.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+type ConfirmOptions = {
+    title?: string;
+    description?: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    container?: HTMLElement | HTMLDivElement | null;
+};
+type PromptOptions = {
+    title?: string;
+    description?: React.ReactNode;
+    confirmText?: string;
+    cancelText?: string;
+    placeholder?: string;
+    inputType?: "text" | "password";
+    defaultValue?: string;
+    container?: HTMLElement | HTMLDivElement | null;
+};
+type ModalContextValue = {
+    confirm: (message: string, options?: ConfirmOptions) => Promise<boolean>;
+    prompt: (message: string, options?: PromptOptions) => Promise<string | null>;
+};
+export declare const ModalProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const useModal: () => ModalContextValue;
+export {};
+//# sourceMappingURL=use-modal.d.ts.map

package/dist/esm/hooks/use-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal.d.ts","sourceRoot":"","sources":["../../../hooks/use-modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAON,MAAM,OAAO,CAAC;AAgBf,KAAK,cAAc,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,IAAI,CAAC;CACjD,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,IAAI,CAAC;CACjD,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,cAAc,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACzE,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC9E,CAAC;AAIF,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBAoKxE,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,iBAM3B,CAAC"}

package/dist/esm/hooks/use-modal.js

@@ -0,0 +1,93 @@
+import { Cross2Icon, EyeNoneIcon, EyeOpenIcon } from "@rowsncolumns/icons";
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
+import { Button } from "../button";
+import { Dialog, DialogBody, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogTitle, } from "../dialog";
+import { IconButton } from "../icon-button";
+import { Input } from "../input";
+import { Stack } from "../stack";
+const ModalContext = createContext(undefined);
+export const ModalProvider = ({ children }) => {
+    const resolverRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [message, setMessage] = useState("");
+    const [mode, setMode] = useState("confirm");
+    const [options, setOptions] = useState();
+    const [inputValue, setInputValue] = useState("");
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const close = useCallback((result) => {
+        resolverRef.current?.(result);
+        resolverRef.current = null;
+        setOpen(false);
+        setInputValue("");
+        setIsPasswordVisible(false);
+    }, []);
+    const confirm = useCallback((msg, opts) => new Promise((resolve) => {
+        resolverRef.current = resolve;
+        setMessage(msg);
+        setOptions(opts);
+        setMode("confirm");
+        setOpen(true);
+    }), []);
+    const prompt = useCallback((msg, opts) => new Promise((resolve) => {
+        resolverRef.current = resolve;
+        setMessage(msg);
+        setOptions(opts);
+        setMode("prompt");
+        setInputValue(opts?.defaultValue || "");
+        setIsPasswordVisible(false);
+        setOpen(true);
+    }), []);
+    const handleOpenChange = useCallback((next) => {
+        if (!next && open) {
+            close(mode === "prompt" ? null : false);
+        }
+        else {
+            setOpen(next);
+        }
+    }, [close, open, mode]);
+    const contextValue = useMemo(() => ({ confirm, prompt }), [confirm, prompt]);
+    return (React.createElement(ModalContext.Provider, { value: contextValue },
+        children,
+        React.createElement(Dialog, { open: open, onOpenChange: handleOpenChange },
+            React.createElement(DialogContent, { container: options?.container ?? undefined },
+                React.createElement(DialogTitle, null, options?.title ?? (mode === "prompt" ? "Input" : "Confirm")),
+                React.createElement(DialogCloseButton, { onClick: () => close(mode === "prompt" ? null : false) }),
+                React.createElement(DialogBody, null,
+                    React.createElement(DialogDescription, { asChild: true, className: "pl-0" },
+                        React.createElement("div", { className: "pb-3" },
+                            React.createElement("div", null, message),
+                            options?.description ? (React.createElement("div", { className: "text-sm text-rnc-muted-foreground" }, options.description)) : null)),
+                    mode === "prompt" && (React.createElement("div", { className: "pb-3" },
+                        React.createElement("div", { className: "relative" },
+                            React.createElement(Input, { type: options?.inputType === "password" &&
+                                    isPasswordVisible
+                                    ? "text"
+                                    : options?.inputType || "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: options?.placeholder, className: "w-full px-3 py-2 border border-rnc-border rounded-md focus:outline-none focus:ring-2 focus:ring-rnc-primary pr-10", autoFocus: true, onKeyDown: (e) => {
+                                    if (e.key === "Enter" && inputValue.trim()) {
+                                        close(inputValue);
+                                    }
+                                    else if (e.key === "Escape") {
+                                        close(null);
+                                    }
+                                } }),
+                            options?.inputType === "password" ? (React.createElement(IconButton, { onClick: () => setIsPasswordVisible((prev) => !prev), className: "absolute right-2 top-1/2 -translate-y-1/2", "aria-label": isPasswordVisible ? "Hide password" : "Show password" }, isPasswordVisible ? React.createElement(EyeNoneIcon, null) : React.createElement(EyeOpenIcon, null))) : null))),
+                    React.createElement(Stack, { className: "gap-2" }, mode === "confirm" ? (React.createElement(React.Fragment, null,
+                        React.createElement(DialogClose, { asChild: true },
+                            React.createElement(Button, { variant: "primary", onClick: () => close(true) }, options?.confirmText ?? "Confirm")),
+                        React.createElement(DialogClose, { asChild: true },
+                            React.createElement(Button, { onClick: () => close(false) }, options?.cancelText ?? "Cancel")))) : (React.createElement(React.Fragment, null,
+                        React.createElement(DialogClose, { asChild: true },
+                            React.createElement(Button, { variant: "primary", onClick: () => close(inputValue), disabled: !inputValue.trim() }, options?.confirmText ?? "OK")),
+                        React.createElement(DialogClose, { asChild: true },
+                            React.createElement(Button, { onClick: () => close(null) }, options?.cancelText ?? "Cancel")))))),
+                React.createElement(DialogClose, { asChild: true },
+                    React.createElement(DialogCloseButton, null,
+                        React.createElement(Cross2Icon, null)))))));
+};
+export const useModal = () => {
+    const ctx = useContext(ModalContext);
+    if (!ctx) {
+        throw new Error("useModal must be used within a ModalProvider");
+    }
+    return ctx;
+};

package/dist/esm/hooks/use-visibility.d.ts

@@ -0,0 +1,2 @@
+export declare const useOnVisibilityChange: (callback: (state: DocumentVisibilityState) => void) => void;
+//# sourceMappingURL=use-visibility.d.ts.map

package/dist/esm/hooks/use-visibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-visibility.d.ts","sourceRoot":"","sources":["../../../hooks/use-visibility.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,GAChC,UAAU,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,SAYnD,CAAC"}

package/dist/esm/hooks/use-visibility.js

@@ -0,0 +1,12 @@
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.ts";
+export const useOnVisibilityChange = (callback) => {
+    useIsomorphicLayoutEffect(() => {
+        const visibilityHandler = () => {
+            callback(document.visibilityState);
+        };
+        window.addEventListener("visibilitychange", visibilityHandler);
+        return () => {
+            window.removeEventListener("visibilitychange", visibilityHandler);
+        };
+    }, []);
+};

package/dist/esm/icon-button/index.d.ts

@@ -0,0 +1,15 @@
+import type { VariantProps } from "class-variance-authority";
+import React from "react";
+import type { ButtonProps } from "./../button";
+declare const iconButtonVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    isActive?: boolean | null | undefined;
+    shrink?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface IconButtonProps extends ButtonProps, VariantProps<typeof iconButtonVariants> {
+    asChild?: boolean;
+    tooltip?: React.ReactNode;
+}
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=index.d.ts.map