@seedgrid/fe-components 0.2.4

package/dist/layout/SgTreeView.js

@@ -0,0 +1,338 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, ChevronUp, Search } from "lucide-react";
+import { SgInputText } from "../inputs/SgInputText";
+import { SgButton } from "../buttons/SgButton";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+export function sgTreeFromJson(json, iconRegistry) {
+    const walk = (list) => list.map((n) => ({
+        id: n.id,
+        label: n.label,
+        disabled: n.disabled,
+        icon: n.icon ? iconRegistry?.[n.icon] : undefined,
+        children: n.children?.length ? walk(n.children) : undefined,
+        meta: n.meta
+    }));
+    return walk(json);
+}
+export function sgTreeFromJsonWithChecked(json, iconRegistry) {
+    const checkedIds = [];
+    const walk = (list) => list.map((n) => {
+        if (n.checked)
+            checkedIds.push(n.id);
+        return {
+            id: n.id,
+            label: n.label,
+            disabled: n.disabled,
+            icon: n.icon ? iconRegistry?.[n.icon] : undefined,
+            children: n.children?.length ? walk(n.children) : undefined,
+            meta: n.meta
+        };
+    });
+    const nodes = walk(json);
+    // If a branch is checked, include all descendants to reflect the visual state.
+    const maps = buildMaps(nodes);
+    const expandedChecked = new Set();
+    for (const id of checkedIds) {
+        expandedChecked.add(id);
+        const descendants = collectDescendants(maps.childrenById, id);
+        for (const d of descendants)
+            expandedChecked.add(d);
+    }
+    return { nodes, checkedIds: Array.from(expandedChecked) };
+}
+function collectAllIds(nodes, out) {
+    for (const n of nodes) {
+        out.add(n.id);
+        if (n.children?.length)
+            collectAllIds(n.children, out);
+    }
+}
+function buildMaps(nodes) {
+    const parentById = new Map();
+    const nodeById = new Map();
+    const childrenById = new Map();
+    function walk(list, parentId) {
+        for (const n of list) {
+            parentById.set(n.id, parentId);
+            nodeById.set(n.id, n);
+            childrenById.set(n.id, (n.children ?? []).map((c) => c.id));
+            if (n.children?.length)
+                walk(n.children, n.id);
+        }
+    }
+    walk(nodes, null);
+    return { parentById, nodeById, childrenById };
+}
+function collectDescendants(childrenById, id) {
+    const out = [];
+    const stack = [...(childrenById.get(id) ?? [])];
+    while (stack.length) {
+        const cur = stack.pop();
+        out.push(cur);
+        const kids = childrenById.get(cur);
+        if (kids?.length)
+            stack.push(...kids);
+    }
+    return out;
+}
+function collectAncestors(parentById, id) {
+    const out = [];
+    let cur = parentById.get(id) ?? null;
+    while (cur) {
+        out.push(cur);
+        cur = parentById.get(cur) ?? null;
+    }
+    return out;
+}
+function filterTreeByQuery(nodes, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return { filtered: nodes, matchIds: new Set() };
+    const matchIds = new Set();
+    function dfs(list) {
+        const res = [];
+        for (const n of list) {
+            const selfMatch = n.label.toLowerCase().includes(q);
+            const kids = n.children?.length ? dfs(n.children) : [];
+            if (selfMatch || kids.length) {
+                if (selfMatch)
+                    matchIds.add(n.id);
+                res.push({ ...n, children: kids.length ? kids : n.children ? [] : undefined });
+            }
+        }
+        return res;
+    }
+    return { filtered: dfs(nodes), matchIds };
+}
+function computeCheckedState(id, childrenById, checked) {
+    const kids = childrenById.get(id) ?? [];
+    if (!kids.length)
+        return checked.has(id) ? "checked" : "unchecked";
+    let hasChecked = false;
+    let hasUnchecked = false;
+    for (const k of kids) {
+        const st = computeCheckedState(k, childrenById, checked);
+        if (st === "indeterminate")
+            return "indeterminate";
+        if (st === "checked")
+            hasChecked = true;
+        if (st === "unchecked")
+            hasUnchecked = true;
+        if (hasChecked && hasUnchecked)
+            return "indeterminate";
+    }
+    if (hasChecked && !hasUnchecked)
+        return "checked";
+    if (!hasChecked && hasUnchecked)
+        return "unchecked";
+    return checked.has(id) ? "checked" : "unchecked";
+}
+function setBranchChecked(id, value, childrenById, checked) {
+    const all = [id, ...collectDescendants(childrenById, id)];
+    for (const x of all) {
+        if (value)
+            checked.add(x);
+        else
+            checked.delete(x);
+    }
+}
+function useControllable(opts, fallback) {
+    const isControlled = "value" in opts && opts.value !== undefined;
+    const [inner, setInner] = React.useState("defaultValue" in opts && opts.defaultValue !== undefined ? opts.defaultValue : fallback);
+    const value = isControlled ? opts.value : inner;
+    const setValue = React.useCallback((next) => {
+        if (!isControlled)
+            setInner(next);
+        opts.onChange?.(next);
+    }, [isControlled, opts]);
+    return [value, setValue];
+}
+function uniq(arr) {
+    return Array.from(new Set(arr));
+}
+function sameStringArray(a, b) {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i += 1) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}
+const sizeMap = {
+    sm: { text: "text-xs", btn: "h-8 px-2.5 text-xs", input: "h-8 px-2.5 text-xs", checkbox: "h-3.5 w-3.5", icon: "h-3.5 w-3.5" },
+    md: { text: "text-sm", btn: "h-9 px-3 text-sm", input: "h-9 px-3 text-sm", checkbox: "h-4 w-4", icon: "h-4 w-4" },
+    lg: { text: "text-base", btn: "h-10 px-3.5 text-base", input: "h-10 px-3.5 text-base", checkbox: "h-5 w-5", icon: "h-5 w-5" }
+};
+const densityMap = {
+    compact: { rowPy: "py-0.5", rowPx: "px-1.5", gap: "gap-1.5", caret: "h-5 w-5", indent: 14 },
+    normal: { rowPy: "py-1", rowPx: "px-2", gap: "gap-2", caret: "h-6 w-6", indent: 16 },
+    comfortable: { rowPy: "py-1.5", rowPx: "px-2.5", gap: "gap-2.5", caret: "h-7 w-7", indent: 18 }
+};
+function toneClasses(tone) {
+    if (tone === "muted") {
+        return {
+            panelBg: "bg-sg-surface2 bg-muted/30",
+            rowHover: "hover:bg-sg-hover hover:bg-foreground/5",
+            subtle: "text-sg-muted text-muted-foreground"
+        };
+    }
+    return {
+        panelBg: "bg-sg-surface bg-background",
+        rowHover: "hover:bg-sg-hover hover:bg-foreground/5",
+        subtle: "text-sg-muted text-muted-foreground"
+    };
+}
+export const SgTreeView = React.forwardRef(function SgTreeView(props, ref) {
+    const { nodes, className, size = "md", density = "normal", tone = "default", iconTone = "default", checkable = false, checkMode = "live", confirmSelection = "leafOnly", searchable = false, searchPlaceholder = "Search...", expandMatchesOnSearch = true, branchLabelBehavior = "toggle", emptyText = "No items.", maxHeightClassName = "max-h-[60vh]" } = props;
+    const SZ = sizeMap[size];
+    const DY = densityMap[density];
+    const T = toneClasses(tone);
+    const maps = React.useMemo(() => buildMaps(nodes), [nodes]);
+    const allIds = React.useMemo(() => {
+        const s = new Set();
+        collectAllIds(nodes, s);
+        return s;
+    }, [nodes]);
+    const [expandedIds, setExpandedIds] = useControllable(props.expandedIds !== undefined
+        ? { value: props.expandedIds, onChange: props.onExpandedChange }
+        : { defaultValue: props.defaultExpandedIds ?? [], onChange: props.onExpandedChange }, []);
+    const [checkedIdsLive, setCheckedIdsLive] = useControllable(props.checkedIds !== undefined
+        ? { value: props.checkedIds, onChange: (ids) => props.onCheckedChange?.(ids) }
+        : { defaultValue: props.defaultCheckedIds ?? [], onChange: props.onCheckedChange }, []);
+    const [pendingCheckedIds, setPendingCheckedIds] = React.useState(props.defaultCheckedIds ?? []);
+    React.useEffect(() => {
+        if (checkMode !== "confirm")
+            return;
+        if (props.checkedIds)
+            setPendingCheckedIds(props.checkedIds);
+    }, [checkMode, props.checkedIds]);
+    const effectiveCheckedIds = checkMode === "confirm" ? pendingCheckedIds : checkedIdsLive;
+    const [search, setSearch] = useControllable(props.searchValue !== undefined
+        ? { value: props.searchValue, onChange: props.onSearchChange }
+        : { defaultValue: props.defaultSearchValue ?? "", onChange: props.onSearchChange }, "");
+    const searchId = React.useId();
+    const expandedSet = React.useMemo(() => new Set(expandedIds), [expandedIds]);
+    const checkedSet = React.useMemo(() => new Set(effectiveCheckedIds), [effectiveCheckedIds]);
+    const { filtered, matchIds } = React.useMemo(() => filterTreeByQuery(nodes, search), [nodes, search]);
+    React.useEffect(() => {
+        if (!expandMatchesOnSearch)
+            return;
+        const q = search.trim();
+        if (!q)
+            return;
+        const add = new Set(expandedSet);
+        for (const id of matchIds) {
+            for (const a of collectAncestors(maps.parentById, id))
+                add.add(a);
+        }
+        const nextIds = Array.from(add);
+        if (!sameStringArray(nextIds, expandedIds))
+            setExpandedIds(nextIds);
+    }, [search, expandMatchesOnSearch, matchIds, maps.parentById, expandedSet, expandedIds, setExpandedIds]);
+    const toggleExpand = React.useCallback((node) => {
+        const isOpen = expandedSet.has(node.id);
+        const next = new Set(expandedSet);
+        if (isOpen) {
+            next.delete(node.id);
+            props.onCollapse?.(node);
+        }
+        else {
+            next.add(node.id);
+            props.onExpand?.(node);
+        }
+        setExpandedIds(Array.from(next));
+    }, [expandedSet, props, setExpandedIds]);
+    const applyCheckedIds = React.useCallback((nextIds) => {
+        const next = uniq(nextIds);
+        if (checkMode === "confirm") {
+            setPendingCheckedIds(next);
+        }
+        else {
+            setCheckedIdsLive(next);
+        }
+    }, [checkMode, setCheckedIdsLive]);
+    const toggleCheck = React.useCallback((node) => {
+        if (!checkable || node.disabled)
+            return;
+        const next = new Set(checkedSet);
+        const st = computeCheckedState(node.id, maps.childrenById, checkedSet);
+        const willCheck = st !== "checked";
+        setBranchChecked(node.id, willCheck, maps.childrenById, next);
+        applyCheckedIds(Array.from(next));
+    }, [applyCheckedIds, checkable, checkedSet, maps.childrenById]);
+    const expandAll = React.useCallback(() => {
+        setExpandedIds(Array.from(allIds));
+    }, [allIds, setExpandedIds]);
+    const collapseAll = React.useCallback(() => {
+        setExpandedIds([]);
+    }, [setExpandedIds]);
+    const clearChecked = React.useCallback(() => {
+        applyCheckedIds([]);
+    }, [applyCheckedIds]);
+    const getCheckedLeafIds = React.useCallback((ids) => ids.filter((id) => {
+        const n = maps.nodeById.get(id);
+        return !!n && !(n.children?.length);
+    }), [maps.nodeById]);
+    React.useImperativeHandle(ref, () => ({
+        getCheckedIds: () => effectiveCheckedIds,
+        getCheckedLeafIds: () => getCheckedLeafIds(effectiveCheckedIds),
+        setCheckedIds: (ids) => applyCheckedIds(ids),
+        getExpandedIds: () => expandedIds,
+        setExpandedIds: (ids) => setExpandedIds(ids),
+        expandAll,
+        collapseAll,
+        clearChecked
+    }));
+    const confirmCfg = props.confirmBar ?? false;
+    const confirmEnabled = !!confirmCfg && checkable && checkMode === "confirm";
+    const confirmSelectedIds = React.useMemo(() => {
+        if (confirmSelection === "all")
+            return effectiveCheckedIds;
+        return getCheckedLeafIds(effectiveCheckedIds);
+    }, [confirmSelection, effectiveCheckedIds, getCheckedLeafIds]);
+    const confirmDisabled = confirmEnabled &&
+        (confirmCfg && confirmCfg.disabledWhenEmpty !== false) &&
+        confirmSelectedIds.length === 0;
+    const onConfirm = () => {
+        if (!confirmEnabled || !confirmCfg)
+            return;
+        confirmCfg.onConfirm(confirmSelectedIds);
+        if (confirmCfg.resetAfterConfirm)
+            applyCheckedIds([]);
+    };
+    const onCancel = () => {
+        if (!confirmEnabled || !confirmCfg)
+            return;
+        confirmCfg.onCancel?.();
+    };
+    const renderNode = (node, depth) => {
+        const hasChildren = !!node.children?.length;
+        const isOpen = expandedSet.has(node.id);
+        const isDisabled = !!node.disabled;
+        const checkedState = checkable ? computeCheckedState(node.id, maps.childrenById, checkedSet) : "unchecked";
+        return (_jsxs("div", { children: [_jsxs("div", { className: cn("flex items-center rounded-md", DY.rowPx, DY.rowPy, DY.gap, T.rowHover, isDisabled && "opacity-60"), style: { paddingLeft: 8 + depth * DY.indent }, children: [_jsx("button", { type: "button", className: cn(DY.caret, "shrink-0 rounded-md flex items-center justify-center", "hover:bg-sg-hover2 hover:bg-foreground/10", "focus:outline-none focus:ring-2 focus:ring-sg-focus/30", !hasChildren && "opacity-0 pointer-events-none"), onClick: () => hasChildren && !isDisabled && toggleExpand(node), "aria-label": isOpen ? "Collapse" : "Expand", disabled: isDisabled, children: _jsx("span", { className: cn("transition-transform", isOpen && "rotate-90"), children: ">" }) }), checkable && (_jsx("input", { type: "checkbox", className: cn(SZ.checkbox, "rounded border border-sg-border bg-sg-surface", "focus:outline-none focus:ring-2 focus:ring-sg-focus/30"), disabled: isDisabled, checked: checkedState === "checked", ref: (el) => {
+                                if (el)
+                                    el.indeterminate = checkedState === "indeterminate";
+                            }, onChange: () => toggleCheck(node) })), node.icon && (_jsx("div", { className: cn("shrink-0", SZ.icon, iconTone === "primary" ? "text-[rgb(var(--sg-primary-600))]" : ""), children: node.icon })), _jsx("button", { type: "button", className: cn("flex-1 text-left rounded-md", SZ.text, isDisabled ? "cursor-not-allowed" : "cursor-pointer", "focus:outline-none focus:ring-2 focus:ring-sg-focus/30"), onClick: () => {
+                                if (isDisabled)
+                                    return;
+                                if (!hasChildren) {
+                                    props.onLeafClick?.(node.id);
+                                    return;
+                                }
+                                if (branchLabelBehavior === "toggle") {
+                                    toggleExpand(node);
+                                }
+                            }, disabled: isDisabled, children: node.label })] }), hasChildren && isOpen && _jsx("div", { children: node.children.map((c) => renderNode(c, depth + 1)) })] }, node.id));
+    };
+    const hasAny = filtered.length > 0;
+    return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [searchable && (_jsx(SgInputText, { id: searchId, labelText: searchPlaceholder, placeholder: searchPlaceholder, prefixIcon: _jsx(Search, { size: 16 }), clearButton: true, filled: true, inputProps: { value: search }, onChange: (value) => setSearch(value) })), _jsx(SgButton, { severity: "secondary", appearance: "ghost", size: "sm", shape: "rounded", onClick: expandAll, leftIcon: _jsx(ChevronDown, { className: "size-4" }), children: "Expand all" }), _jsx(SgButton, { severity: "secondary", appearance: "ghost", size: "sm", shape: "rounded", onClick: collapseAll, leftIcon: _jsx(ChevronUp, { className: "size-4" }), children: "Collapse all" }), checkable && (_jsx(SgButton, { severity: "danger", appearance: "outline", size: "sm", shape: "rounded", onClick: clearChecked, title: "Clear selection", children: "Clear" }))] }), _jsxs("div", { className: cn("rounded-sg border border-sg-border", T.panelBg, "text-sg-text"), children: [_jsx("div", { className: cn("overflow-auto", maxHeightClassName), children: _jsx("div", { className: "p-2", children: !hasAny ? (_jsx("div", { className: cn("p-6 text-center", SZ.text, T.subtle), children: emptyText })) : (filtered.map((n) => renderNode(n, 0))) }) }), confirmEnabled && confirmCfg && (_jsx("div", { className: cn("border-t border-sg-border px-3 py-2", (confirmCfg.sticky ?? true) && "sticky bottom-0 bg-sg-surface/95 bg-background/95 backdrop-blur"), children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: cn("text-xs", T.subtle), children: confirmCfg.hint ?? (_jsxs(_Fragment, { children: ["Selected: ", _jsx("span", { className: "font-medium text-sg-text", children: confirmSelectedIds.length }), confirmSelection === "leafOnly" ? " (leafs)" : ""] })) }), _jsxs("div", { className: "flex items-center gap-2", children: [(confirmCfg.showCancel ?? false) && (_jsx("button", { type: "button", onClick: onCancel, className: cn("rounded-md border border-sg-border", T.panelBg, "text-sg-text hover:bg-sg-hover", "focus:outline-none focus:ring-2 focus:ring-sg-focus/30", SZ.btn), children: confirmCfg.cancelLabel ?? "Cancel" })), _jsx(SgButton, { severity: "secondary", appearance: "outline", size: "md", shape: "rounded", onClick: clearChecked, disabled: !!confirmDisabled, children: "Clear" }), _jsx(SgButton, { severity: "primary", appearance: "solid", elevation: "sm", size: "md", shape: "rounded", disabled: !!confirmDisabled, onClick: onConfirm, children: confirmCfg.label ?? "Confirm" })] })] }) }))] })] }));
+});
+SgTreeView.displayName = "SgTreeView";

package/dist/manifest.d.ts

@@ -0,0 +1,3 @@
+import type { SeedGridModuleManifest } from "./integration/module";
+export declare const componentsManifest: SeedGridModuleManifest;
+//# sourceMappingURL=manifest.d.ts.map

package/dist/manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../src/manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAoB,MAAM,sBAAsB,CAAC;AAGrF,eAAO,MAAM,kBAAkB,EAAE,sBAiBhC,CAAC"}

package/dist/manifest.js

@@ -0,0 +1,19 @@
+import ptBr from "./i18n/pt-BR.json";
+export const componentsManifest = {
+    id: "seedgrid-fe-components",
+    name: "SeedGrid FE Components",
+    version: "0.2.0",
+    i18n: {
+        defaultLocale: "pt-BR",
+        bundles: [
+            {
+                namespace: "components",
+                resources: ptBr,
+                distPath: "dist/i18n/pt-BR.json"
+            }
+        ]
+    },
+    register(_registry) {
+        // No navigation or providers for this package.
+    }
+};

package/dist/masks.d.ts

@@ -0,0 +1,14 @@
+export declare function onlyDigits(value: string): string;
+export declare function maskCpf(value: string): string;
+export declare function maskCnpj(value: string): string;
+export declare function maskCpfCnpj(value: string): string;
+export declare function maskCep(value: string): string;
+export declare function maskPostalCodeBR(value: string): string;
+export declare function maskPostalCodePT(value: string): string;
+export declare function maskPostalCodeUS(value: string): string;
+export declare function maskPostalCodeES(value: string): string;
+export declare function maskPostalCodeUY(value: string): string;
+export declare function maskPostalCodeAR(value: string): string;
+export declare function maskPostalCodePY(value: string): string;
+export declare function maskPhone(value: string): string;
+//# sourceMappingURL=masks.d.ts.map

package/dist/masks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"masks.d.ts","sourceRoot":"","sources":["../src/masks.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAEvC;AAMD,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,UAQpC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,UAWrC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAOxC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,UAEpC;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAK7C;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAK7C;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAK7C;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAE7C;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAE7C;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAG7C;AAGD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAE7C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,UAStC"}

package/dist/masks.js

@@ -0,0 +1,91 @@
+export function onlyDigits(value) {
+    return value.replace(/\D/g, "");
+}
+function onlyAlnumUpper(value) {
+    return value.replace(/[^0-9A-Za-z]/g, "").toUpperCase();
+}
+export function maskCpf(value) {
+    const digits = onlyDigits(value).slice(0, 11);
+    const part1 = digits.slice(0, 3);
+    const part2 = digits.slice(3, 6);
+    const part3 = digits.slice(6, 9);
+    const part4 = digits.slice(9, 11);
+    const out = [part1, part2, part3].filter(Boolean).join(".");
+    return part4 ? `${out}-${part4}` : out;
+}
+export function maskCnpj(value) {
+    const chars = onlyAlnumUpper(value).slice(0, 14);
+    const part1 = chars.slice(0, 2);
+    const part2 = chars.slice(2, 5);
+    const part3 = chars.slice(5, 8);
+    const part4 = chars.slice(8, 12);
+    const part5 = chars.slice(12, 14);
+    let out = [part1, part2, part3].filter(Boolean).join(".");
+    if (part4)
+        out += `/${part4}`;
+    if (part5)
+        out += `-${part5}`;
+    return out;
+}
+export function maskCpfCnpj(value) {
+    const alnum = onlyAlnumUpper(value);
+    if (/[A-Z]/.test(alnum)) {
+        return maskCnpj(alnum);
+    }
+    const digits = onlyDigits(value);
+    return digits.length <= 11 ? maskCpf(digits) : maskCnpj(digits);
+}
+export function maskCep(value) {
+    return maskPostalCodeBR(value);
+}
+// BR: 00000-000 (8 digits)
+export function maskPostalCodeBR(value) {
+    const digits = onlyDigits(value).slice(0, 8);
+    const part1 = digits.slice(0, 5);
+    const part2 = digits.slice(5, 8);
+    return part2 ? `${part1}-${part2}` : part1;
+}
+// PT: 0000-000 (7 digits)
+export function maskPostalCodePT(value) {
+    const digits = onlyDigits(value).slice(0, 7);
+    const part1 = digits.slice(0, 4);
+    const part2 = digits.slice(4, 7);
+    return part2 ? `${part1}-${part2}` : part1;
+}
+// US: 00000 or 00000-0000 (5 or 9 digits)
+export function maskPostalCodeUS(value) {
+    const digits = onlyDigits(value).slice(0, 9);
+    const part1 = digits.slice(0, 5);
+    const part2 = digits.slice(5, 9);
+    return part2 ? `${part1}-${part2}` : part1;
+}
+// ES: 00000 (5 digits)
+export function maskPostalCodeES(value) {
+    return onlyDigits(value).slice(0, 5);
+}
+// UY: 00000 (5 digits)
+export function maskPostalCodeUY(value) {
+    return onlyDigits(value).slice(0, 5);
+}
+// AR: A0000AAA (1 letter + 4 digits + 3 letters) or legacy 0000 (4 digits)
+export function maskPostalCodeAR(value) {
+    const clean = value.replaceAll(/[^0-9A-Za-z]/g, "").toUpperCase().slice(0, 8);
+    return clean;
+}
+// PY: 000000 (6 digits)
+export function maskPostalCodePY(value) {
+    return onlyDigits(value).slice(0, 6);
+}
+export function maskPhone(value) {
+    const digits = onlyDigits(value).slice(0, 11);
+    const ddd = digits.slice(0, 2);
+    const part1 = digits.length > 10 ? digits.slice(2, 7) : digits.slice(2, 6);
+    const part2 = digits.length > 10 ? digits.slice(7, 11) : digits.slice(6, 10);
+    if (!ddd)
+        return digits;
+    if (!part1)
+        return `(${ddd}`;
+    if (!part2)
+        return `(${ddd}) ${part1}`;
+    return `(${ddd}) ${part1}-${part2}`;
+}

package/dist/overlay/SgDialog.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export type SgDialogSize = "sm" | "md" | "lg" | "xl" | "full";
+export type SgDialogSeverity = "primary" | "secondary" | "success" | "info" | "warning" | "help" | "danger" | "plain";
+export type SgDialogAnimation = "fade" | "zoom" | "slideUp";
+export type SgDialogProps = {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: SgDialogSize;
+    severity?: SgDialogSeverity;
+    animation?: SgDialogAnimation;
+    transitionMs?: number;
+    autoCloseMs?: number;
+    className?: string;
+    overlayClassName?: string;
+    contentClassName?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
+    closeable?: boolean;
+    onClose?: () => void;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    lockBodyScroll?: boolean;
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    restoreFocus?: boolean;
+    ariaLabel?: string;
+};
+export declare function SgDialog(props: Readonly<SgDialogProps>): React.ReactPortal | null;
+export declare namespace SgDialog {
+    var displayName: string;
+}
+//# sourceMappingURL=SgDialog.d.ts.map

package/dist/overlay/SgDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgDialog.d.ts","sourceRoot":"","sources":["../../src/overlay/SgDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuDF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,4BAqPtD;yBArPe,QAAQ"}