tempest-react-sdk 0.25.0 → 0.26.1

package/dist/components/DataTable/DataTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { usePagination } from \"@/hooks\";\nimport { Table, type TableAlign, type TableColumn, type TablePriority } from \"../Table\";\nimport { Pagination } from \"../Pagination\";\nimport { SearchBar } from \"../SearchBar\";\nimport styles from \"./DataTable.module.css\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableSort<T> {\n    key: keyof T;\n    direction: SortDirection;\n}\n\n/**\n * Column definition for {@link DataTable}. Extends the headless {@link Table}\n * column shape with a typed `key`, opt-in sorting, and the visual options that\n * are forwarded to the underlying Table cell.\n */\nexport interface DataTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `String(row[key])`. */\n    render?: (row: T) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment forwarded to the Table cell. */\n    align?: TableAlign;\n    /** Responsive visibility priority forwarded to the Table cell. */\n    priority?: TablePriority;\n    /** Fixed column width forwarded to the Table cell. */\n    width?: string | number;\n}\n\nexport interface DataTableProps<T> extends HTMLAttributes<HTMLDivElement> {\n    /** Full, unfiltered dataset. Sorting/filtering/pagination happen client-side. */\n    data: T[];\n    /** Column definitions. */\n    columns: DataTableColumn<T>[];\n    /** Rows per page. Default 10. */\n    pageSize?: number;\n    /** Render a search input above the table. Default false. */\n    searchable?: boolean;\n    /**\n     * Keys to match the search term against. When omitted, every column whose\n     * value is a string or number is searched.\n     */\n    searchKeys?: (keyof T)[];\n    /** Initial sort applied before any header interaction. */\n    initialSort?: DataTableSort<T>;\n    /** Stable key extractor for rows. Defaults to the row index. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Content shown when no rows match. */\n    emptyMessage?: ReactNode;\n}\n\n/**\n * Compare two arbitrary cell values with stable, type-aware ordering:\n * numbers numerically, dates by timestamp, everything else by `localeCompare`.\n *\n * @param a - First value.\n * @param b - Second value.\n * @returns Negative when `a < b`, positive when `a > b`, zero when equal.\n */\nfunction compareValues(a: unknown, b: unknown): number {\n    if (a == null && b == null) return 0;\n    if (a == null) return -1;\n    if (b == null) return 1;\n    if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n    if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();\n    if (typeof a === \"boolean\" && typeof b === \"boolean\") {\n        return Number(a) - Number(b);\n    }\n    return String(a).localeCompare(String(b), undefined, { numeric: true });\n}\n\n/**\n * Stateful, headless data table built on top of {@link Table}. Adds\n * client-side searching, click-to-sort columns, and pagination while\n * delegating all table markup to the underlying Table component.\n *\n * - Clicking a sortable header cycles asc → desc → unsorted.\n * - Search matches a case-insensitive substring across `searchKeys`\n *   (or every string/number column when not provided).\n * - Pagination is hidden when the result fits on a single page.\n *\n * The header memo depends on `columns` and `sort` only: `toggleSort` is\n * recreated each render but always closes over the same setter, so including it\n * would rebuild every header on every render without changing behaviour. That\n * is why `exhaustive-deps` is silenced on that dependency array.\n */\nexport function DataTable<T>({\n    data,\n    columns,\n    pageSize = 10,\n    searchable = false,\n    searchKeys,\n    initialSort,\n    rowKey = (_row, index) => index,\n    emptyMessage,\n    className,\n    ...rest\n}: DataTableProps<T>) {\n    const [search, setSearch] = useState<string>(\"\");\n    const [sort, setSort] = useState<DataTableSort<T> | null>(initialSort ?? null);\n    const { page, setPage } = usePagination(1, pageSize);\n\n    const effectiveSearchKeys = useMemo<(keyof T)[]>(() => {\n        if (searchKeys && searchKeys.length > 0) return searchKeys;\n        return columns\n            .filter((column) => {\n                const sample = data.find((row) => row[column.key] != null);\n                const value = sample ? sample[column.key] : undefined;\n                return typeof value === \"string\" || typeof value === \"number\";\n            })\n            .map((column) => column.key);\n    }, [searchKeys, columns, data]);\n\n    const filtered = useMemo<T[]>(() => {\n        const term = search.trim().toLowerCase();\n        if (!term || !searchable) return data;\n        return data.filter((row) =>\n            effectiveSearchKeys.some((key) => {\n                const value = row[key];\n                return value != null && String(value).toLowerCase().includes(term);\n            }),\n        );\n    }, [data, search, searchable, effectiveSearchKeys]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return filtered;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...filtered].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [filtered, sort]);\n\n    const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));\n\n    // Clamp the current page when the dataset shrinks (e.g. after filtering).\n    useEffect(() => {\n        if (page > totalPages) setPage(totalPages);\n    }, [page, totalPages, setPage]);\n\n    const safePage = Math.min(page, totalPages);\n    const pageRows = useMemo<T[]>(() => {\n        const start = (safePage - 1) * pageSize;\n        return sorted.slice(start, start + pageSize);\n    }, [sorted, safePage, pageSize]);\n\n    function toggleSort(key: keyof T): void {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n    }\n\n    const tableColumns = useMemo<TableColumn<T>[]>(\n        () =>\n            columns.map((column) => {\n                const isSorted = sort?.key === column.key;\n                const indicator = isSorted ? (sort?.direction === \"asc\" ? \" ▲\" : \" ▼\") : \"\";\n                const header = column.sortable ? (\n                    <button\n                        type=\"button\"\n                        className={styles.sortButton}\n                        onClick={() => toggleSort(column.key)}\n                        aria-label={`Ordenar por ${\n                            typeof column.header === \"string\" ? column.header : String(column.key)\n                        }`}\n                    >\n                        {column.header}\n                        <span className={styles.sortIndicator} aria-hidden>\n                            {indicator}\n                        </span>\n                    </button>\n                ) : (\n                    column.header\n                );\n\n                return {\n                    key: String(column.key),\n                    header,\n                    align: column.align,\n                    priority: column.priority,\n                    width: column.width,\n                    render: column.render\n                        ? (row: T) => column.render!(row)\n                        : (row: T) => (row[column.key] as ReactNode) ?? null,\n                };\n            }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [columns, sort],\n    );\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {searchable && (\n                <SearchBar\n                    value={search}\n                    onChange={(value) => {\n                        setSearch(value);\n                        setPage(1);\n                    }}\n                    wrapperClassName={styles.search}\n                />\n            )}\n            <Table\n                columns={tableColumns}\n                data={pageRows}\n                rowKey={(row, index) => rowKey(row, (safePage - 1) * pageSize + index)}\n                emptyMessage={emptyMessage}\n            />\n            {totalPages > 1 && (\n                <Pagination\n                    page={safePage}\n                    totalPages={totalPages}\n                    onPageChange={setPage}\n                    totalItems={sorted.length}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.cjs","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\nimport { usePagination } from \"@/hooks\";\nimport { Table, type TableAlign, type TableColumn, type TablePriority } from \"../Table\";\nimport { Pagination } from \"../Pagination\";\nimport { SearchBar } from \"../SearchBar\";\nimport styles from \"./DataTable.module.css\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableSort<T> {\n    key: keyof T;\n    direction: SortDirection;\n}\n\n/**\n * Column definition for {@link DataTable}. Extends the headless {@link Table}\n * column shape with a typed `key`, opt-in sorting, and the visual options that\n * are forwarded to the underlying Table cell.\n */\nexport interface DataTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `String(row[key])`. */\n    render?: (row: T) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment forwarded to the Table cell. */\n    align?: TableAlign;\n    /** Responsive visibility priority forwarded to the Table cell. */\n    priority?: TablePriority;\n    /** Fixed column width forwarded to the Table cell. */\n    width?: string | number;\n}\n\nexport interface DataTableProps<T> extends HTMLAttributes<HTMLDivElement> {\n    /** Full, unfiltered dataset. Sorting/filtering/pagination happen client-side. */\n    data: T[];\n    /** Column definitions. */\n    columns: DataTableColumn<T>[];\n    /** Rows per page. Default 10. */\n    pageSize?: number;\n    /** Render a search input above the table. Default false. */\n    searchable?: boolean;\n    /**\n     * Keys to match the search term against. When omitted, every column whose\n     * value is a string or number is searched.\n     */\n    searchKeys?: (keyof T)[];\n    /** Initial sort applied before any header interaction. */\n    initialSort?: DataTableSort<T>;\n    /** Stable key extractor for rows. Defaults to the row index. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Content shown when no rows match. */\n    emptyMessage?: ReactNode;\n}\n\n/**\n * Stateful, headless data table built on top of {@link Table}. Adds\n * client-side searching, click-to-sort columns, and pagination while\n * delegating all table markup to the underlying Table component.\n *\n * - Clicking a sortable header cycles asc → desc → unsorted.\n * - Search matches a case-insensitive substring across `searchKeys`\n *   (or every string/number column when not provided).\n * - Pagination is hidden when the result fits on a single page.\n *\n * The header memo depends on `columns` and `sort` only: `toggleSort` is\n * recreated each render but always closes over the same setter, so including it\n * would rebuild every header on every render without changing behaviour. That\n * is why `exhaustive-deps` is silenced on that dependency array.\n */\nexport function DataTable<T>({\n    data,\n    columns,\n    pageSize = 10,\n    searchable = false,\n    searchKeys,\n    initialSort,\n    rowKey = (_row, index) => index,\n    emptyMessage,\n    className,\n    ...rest\n}: DataTableProps<T>) {\n    const [search, setSearch] = useState<string>(\"\");\n    const [sort, setSort] = useState<DataTableSort<T> | null>(initialSort ?? null);\n    const { page, setPage } = usePagination(1, pageSize);\n\n    const effectiveSearchKeys = useMemo<(keyof T)[]>(() => {\n        if (searchKeys && searchKeys.length > 0) return searchKeys;\n        return columns\n            .filter((column) => {\n                const sample = data.find((row) => row[column.key] != null);\n                const value = sample ? sample[column.key] : undefined;\n                return typeof value === \"string\" || typeof value === \"number\";\n            })\n            .map((column) => column.key);\n    }, [searchKeys, columns, data]);\n\n    const filtered = useMemo<T[]>(() => {\n        const term = search.trim().toLowerCase();\n        if (!term || !searchable) return data;\n        return data.filter((row) =>\n            effectiveSearchKeys.some((key) => {\n                const value = row[key];\n                return value != null && String(value).toLowerCase().includes(term);\n            }),\n        );\n    }, [data, search, searchable, effectiveSearchKeys]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return filtered;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...filtered].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [filtered, sort]);\n\n    const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));\n\n    // Clamp the current page when the dataset shrinks (e.g. after filtering).\n    useEffect(() => {\n        if (page > totalPages) setPage(totalPages);\n    }, [page, totalPages, setPage]);\n\n    const safePage = Math.min(page, totalPages);\n    const pageRows = useMemo<T[]>(() => {\n        const start = (safePage - 1) * pageSize;\n        return sorted.slice(start, start + pageSize);\n    }, [sorted, safePage, pageSize]);\n\n    function toggleSort(key: keyof T): void {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n    }\n\n    const tableColumns = useMemo<TableColumn<T>[]>(\n        () =>\n            columns.map((column) => {\n                const isSorted = sort?.key === column.key;\n                const indicator = isSorted ? (sort?.direction === \"asc\" ? \" ▲\" : \" ▼\") : \"\";\n                const header = column.sortable ? (\n                    <button\n                        type=\"button\"\n                        className={styles.sortButton}\n                        onClick={() => toggleSort(column.key)}\n                        aria-label={`Ordenar por ${\n                            typeof column.header === \"string\" ? column.header : String(column.key)\n                        }`}\n                    >\n                        {column.header}\n                        <span className={styles.sortIndicator} aria-hidden>\n                            {indicator}\n                        </span>\n                    </button>\n                ) : (\n                    column.header\n                );\n\n                return {\n                    key: String(column.key),\n                    header,\n                    align: column.align,\n                    priority: column.priority,\n                    width: column.width,\n                    render: column.render\n                        ? (row: T) => column.render!(row)\n                        : (row: T) => (row[column.key] as ReactNode) ?? null,\n                };\n            }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [columns, sort],\n    );\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {searchable && (\n                <SearchBar\n                    value={search}\n                    onChange={(value) => {\n                        setSearch(value);\n                        setPage(1);\n                    }}\n                    wrapperClassName={styles.search}\n                />\n            )}\n            <Table\n                columns={tableColumns}\n                data={pageRows}\n                rowKey={(row, index) => rowKey(row, (safePage - 1) * pageSize + index)}\n                emptyMessage={emptyMessage}\n            />\n            {totalPages > 1 && (\n                <Pagination\n                    page={safePage}\n                    totalPages={totalPages}\n                    onPageChange={setPage}\n                    totalItems={sorted.length}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/DataTable/DataTable.js

@@ -3,22 +3,20 @@ import { usePagination as t } from "../../hooks/use-pagination.js";
 import { Pagination as n } from "../Pagination/Pagination.js";
 import { SearchBar as r } from "../SearchBar/SearchBar.js";
 import { Table as i } from "../Table/Table.js";
-import a from "./DataTable.module.js";
-import { useEffect as o, useMemo as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { compareValues as a } from "../../utils/compare-values.js";
+import o from "./DataTable.module.js";
+import { useEffect as s, useMemo as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/DataTable/DataTable.tsx
-function d(e, t) {
-	return e == null && t == null ? 0 : e == null ? -1 : t == null ? 1 : typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : typeof e == "boolean" && typeof t == "boolean" ? Number(e) - Number(t) : String(e).localeCompare(String(t), void 0, { numeric: !0 });
-}
 function f({ data: f, columns: p, pageSize: m = 10, searchable: h = !1, searchKeys: g, initialSort: _, rowKey: v = (e, t) => t, emptyMessage: y, className: b, ...x }) {
-	let [S, C] = c(""), [w, T] = c(_ ?? null), { page: E, setPage: D } = t(1, m), O = s(() => g && g.length > 0 ? g : p.filter((e) => {
+	let [S, C] = l(""), [w, T] = l(_ ?? null), { page: E, setPage: D } = t(1, m), O = c(() => g && g.length > 0 ? g : p.filter((e) => {
 		let t = f.find((t) => t[e.key] != null), n = t ? t[e.key] : void 0;
 		return typeof n == "string" || typeof n == "number";
 	}).map((e) => e.key), [
 		g,
 		p,
 		f
-	]), k = s(() => {
+	]), k = c(() => {
 		let e = S.trim().toLowerCase();
 		return !e || !h ? f : f.filter((t) => O.some((n) => {
 			let r = t[n];
@@ -29,19 +27,19 @@ function f({ data: f, columns: p, pageSize: m = 10, searchable: h = !1, searchKe
 		S,
 		h,
 		O
-	]), A = s(() => {
+	]), A = c(() => {
 		if (!w) return k;
 		let e = w.direction === "asc" ? 1 : -1;
-		return [...k].sort((t, n) => d(t[w.key], n[w.key]) * e);
+		return [...k].sort((t, n) => a(t[w.key], n[w.key]) * e);
 	}, [k, w]), j = Math.max(1, Math.ceil(A.length / m));
-	o(() => {
+	s(() => {
 		E > j && D(j);
 	}, [
 		E,
 		j,
 		D
 	]);
-	let M = Math.min(E, j), N = s(() => {
+	let M = Math.min(E, j), N = c(() => {
 		let e = (M - 1) * m;
 		return A.slice(e, e + m);
 	}, [
@@ -58,14 +56,14 @@ function f({ data: f, columns: p, pageSize: m = 10, searchable: h = !1, searchKe
 			direction: "desc"
 		} : null);
 	}
-	let F = s(() => p.map((e) => {
-		let t = w?.key === e.key ? w?.direction === "asc" ? " ▲" : " ▼" : "", n = e.sortable ? /* @__PURE__ */ u("button", {
+	let F = c(() => p.map((e) => {
+		let t = w?.key === e.key ? w?.direction === "asc" ? " ▲" : " ▼" : "", n = e.sortable ? /* @__PURE__ */ d("button", {
 			type: "button",
-			className: a.sortButton,
+			className: o.sortButton,
 			onClick: () => P(e.key),
 			"aria-label": `Ordenar por ${typeof e.header == "string" ? e.header : String(e.key)}`,
-			children: [e.header, /* @__PURE__ */ l("span", {
-				className: a.sortIndicator,
+			children: [e.header, /* @__PURE__ */ u("span", {
+				className: o.sortIndicator,
 				"aria-hidden": !0,
 				children: t
 			})]
@@ -79,24 +77,24 @@ function f({ data: f, columns: p, pageSize: m = 10, searchable: h = !1, searchKe
 			render: e.render ? (t) => e.render(t) : (t) => t[e.key] ?? null
 		};
 	}), [p, w]);
-	return /* @__PURE__ */ u("div", {
-		className: e(a.wrapper, b),
+	return /* @__PURE__ */ d("div", {
+		className: e(o.wrapper, b),
 		...x,
 		children: [
-			h && /* @__PURE__ */ l(r, {
+			h && /* @__PURE__ */ u(r, {
 				value: S,
 				onChange: (e) => {
 					C(e), D(1);
 				},
-				wrapperClassName: a.search
+				wrapperClassName: o.search
 			}),
-			/* @__PURE__ */ l(i, {
+			/* @__PURE__ */ u(i, {
 				columns: F,
 				data: N,
 				rowKey: (e, t) => v(e, (M - 1) * m + t),
 				emptyMessage: y
 			}),
-			j > 1 && /* @__PURE__ */ l(n, {
+			j > 1 && /* @__PURE__ */ u(n, {
 				page: M,
 				totalPages: j,
 				onPageChange: D,

package/dist/components/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { usePagination } from \"@/hooks\";\nimport { Table, type TableAlign, type TableColumn, type TablePriority } from \"../Table\";\nimport { Pagination } from \"../Pagination\";\nimport { SearchBar } from \"../SearchBar\";\nimport styles from \"./DataTable.module.css\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableSort<T> {\n    key: keyof T;\n    direction: SortDirection;\n}\n\n/**\n * Column definition for {@link DataTable}. Extends the headless {@link Table}\n * column shape with a typed `key`, opt-in sorting, and the visual options that\n * are forwarded to the underlying Table cell.\n */\nexport interface DataTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `String(row[key])`. */\n    render?: (row: T) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment forwarded to the Table cell. */\n    align?: TableAlign;\n    /** Responsive visibility priority forwarded to the Table cell. */\n    priority?: TablePriority;\n    /** Fixed column width forwarded to the Table cell. */\n    width?: string | number;\n}\n\nexport interface DataTableProps<T> extends HTMLAttributes<HTMLDivElement> {\n    /** Full, unfiltered dataset. Sorting/filtering/pagination happen client-side. */\n    data: T[];\n    /** Column definitions. */\n    columns: DataTableColumn<T>[];\n    /** Rows per page. Default 10. */\n    pageSize?: number;\n    /** Render a search input above the table. Default false. */\n    searchable?: boolean;\n    /**\n     * Keys to match the search term against. When omitted, every column whose\n     * value is a string or number is searched.\n     */\n    searchKeys?: (keyof T)[];\n    /** Initial sort applied before any header interaction. */\n    initialSort?: DataTableSort<T>;\n    /** Stable key extractor for rows. Defaults to the row index. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Content shown when no rows match. */\n    emptyMessage?: ReactNode;\n}\n\n/**\n * Compare two arbitrary cell values with stable, type-aware ordering:\n * numbers numerically, dates by timestamp, everything else by `localeCompare`.\n *\n * @param a - First value.\n * @param b - Second value.\n * @returns Negative when `a < b`, positive when `a > b`, zero when equal.\n */\nfunction compareValues(a: unknown, b: unknown): number {\n    if (a == null && b == null) return 0;\n    if (a == null) return -1;\n    if (b == null) return 1;\n    if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n    if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();\n    if (typeof a === \"boolean\" && typeof b === \"boolean\") {\n        return Number(a) - Number(b);\n    }\n    return String(a).localeCompare(String(b), undefined, { numeric: true });\n}\n\n/**\n * Stateful, headless data table built on top of {@link Table}. Adds\n * client-side searching, click-to-sort columns, and pagination while\n * delegating all table markup to the underlying Table component.\n *\n * - Clicking a sortable header cycles asc → desc → unsorted.\n * - Search matches a case-insensitive substring across `searchKeys`\n *   (or every string/number column when not provided).\n * - Pagination is hidden when the result fits on a single page.\n *\n * The header memo depends on `columns` and `sort` only: `toggleSort` is\n * recreated each render but always closes over the same setter, so including it\n * would rebuild every header on every render without changing behaviour. That\n * is why `exhaustive-deps` is silenced on that dependency array.\n */\nexport function DataTable<T>({\n    data,\n    columns,\n    pageSize = 10,\n    searchable = false,\n    searchKeys,\n    initialSort,\n    rowKey = (_row, index) => index,\n    emptyMessage,\n    className,\n    ...rest\n}: DataTableProps<T>) {\n    const [search, setSearch] = useState<string>(\"\");\n    const [sort, setSort] = useState<DataTableSort<T> | null>(initialSort ?? null);\n    const { page, setPage } = usePagination(1, pageSize);\n\n    const effectiveSearchKeys = useMemo<(keyof T)[]>(() => {\n        if (searchKeys && searchKeys.length > 0) return searchKeys;\n        return columns\n            .filter((column) => {\n                const sample = data.find((row) => row[column.key] != null);\n                const value = sample ? sample[column.key] : undefined;\n                return typeof value === \"string\" || typeof value === \"number\";\n            })\n            .map((column) => column.key);\n    }, [searchKeys, columns, data]);\n\n    const filtered = useMemo<T[]>(() => {\n        const term = search.trim().toLowerCase();\n        if (!term || !searchable) return data;\n        return data.filter((row) =>\n            effectiveSearchKeys.some((key) => {\n                const value = row[key];\n                return value != null && String(value).toLowerCase().includes(term);\n            }),\n        );\n    }, [data, search, searchable, effectiveSearchKeys]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return filtered;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...filtered].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [filtered, sort]);\n\n    const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));\n\n    // Clamp the current page when the dataset shrinks (e.g. after filtering).\n    useEffect(() => {\n        if (page > totalPages) setPage(totalPages);\n    }, [page, totalPages, setPage]);\n\n    const safePage = Math.min(page, totalPages);\n    const pageRows = useMemo<T[]>(() => {\n        const start = (safePage - 1) * pageSize;\n        return sorted.slice(start, start + pageSize);\n    }, [sorted, safePage, pageSize]);\n\n    function toggleSort(key: keyof T): void {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n    }\n\n    const tableColumns = useMemo<TableColumn<T>[]>(\n        () =>\n            columns.map((column) => {\n                const isSorted = sort?.key === column.key;\n                const indicator = isSorted ? (sort?.direction === \"asc\" ? \" ▲\" : \" ▼\") : \"\";\n                const header = column.sortable ? (\n                    <button\n                        type=\"button\"\n                        className={styles.sortButton}\n                        onClick={() => toggleSort(column.key)}\n                        aria-label={`Ordenar por ${\n                            typeof column.header === \"string\" ? column.header : String(column.key)\n                        }`}\n                    >\n                        {column.header}\n                        <span className={styles.sortIndicator} aria-hidden>\n                            {indicator}\n                        </span>\n                    </button>\n                ) : (\n                    column.header\n                );\n\n                return {\n                    key: String(column.key),\n                    header,\n                    align: column.align,\n                    priority: column.priority,\n                    width: column.width,\n                    render: column.render\n                        ? (row: T) => column.render!(row)\n                        : (row: T) => (row[column.key] as ReactNode) ?? null,\n                };\n            }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [columns, sort],\n    );\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {searchable && (\n                <SearchBar\n                    value={search}\n                    onChange={(value) => {\n                        setSearch(value);\n                        setPage(1);\n                    }}\n                    wrapperClassName={styles.search}\n                />\n            )}\n            <Table\n                columns={tableColumns}\n                data={pageRows}\n                rowKey={(row, index) => rowKey(row, (safePage - 1) * pageSize + index)}\n                emptyMessage={emptyMessage}\n            />\n            {totalPages > 1 && (\n                <Pagination\n                    page={safePage}\n                    totalPages={totalPages}\n                    onPageChange={setPage}\n                    totalItems={sorted.length}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\nimport { usePagination } from \"@/hooks\";\nimport { Table, type TableAlign, type TableColumn, type TablePriority } from \"../Table\";\nimport { Pagination } from \"../Pagination\";\nimport { SearchBar } from \"../SearchBar\";\nimport styles from \"./DataTable.module.css\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableSort<T> {\n    key: keyof T;\n    direction: SortDirection;\n}\n\n/**\n * Column definition for {@link DataTable}. Extends the headless {@link Table}\n * column shape with a typed `key`, opt-in sorting, and the visual options that\n * are forwarded to the underlying Table cell.\n */\nexport interface DataTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `String(row[key])`. */\n    render?: (row: T) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment forwarded to the Table cell. */\n    align?: TableAlign;\n    /** Responsive visibility priority forwarded to the Table cell. */\n    priority?: TablePriority;\n    /** Fixed column width forwarded to the Table cell. */\n    width?: string | number;\n}\n\nexport interface DataTableProps<T> extends HTMLAttributes<HTMLDivElement> {\n    /** Full, unfiltered dataset. Sorting/filtering/pagination happen client-side. */\n    data: T[];\n    /** Column definitions. */\n    columns: DataTableColumn<T>[];\n    /** Rows per page. Default 10. */\n    pageSize?: number;\n    /** Render a search input above the table. Default false. */\n    searchable?: boolean;\n    /**\n     * Keys to match the search term against. When omitted, every column whose\n     * value is a string or number is searched.\n     */\n    searchKeys?: (keyof T)[];\n    /** Initial sort applied before any header interaction. */\n    initialSort?: DataTableSort<T>;\n    /** Stable key extractor for rows. Defaults to the row index. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Content shown when no rows match. */\n    emptyMessage?: ReactNode;\n}\n\n/**\n * Stateful, headless data table built on top of {@link Table}. Adds\n * client-side searching, click-to-sort columns, and pagination while\n * delegating all table markup to the underlying Table component.\n *\n * - Clicking a sortable header cycles asc → desc → unsorted.\n * - Search matches a case-insensitive substring across `searchKeys`\n *   (or every string/number column when not provided).\n * - Pagination is hidden when the result fits on a single page.\n *\n * The header memo depends on `columns` and `sort` only: `toggleSort` is\n * recreated each render but always closes over the same setter, so including it\n * would rebuild every header on every render without changing behaviour. That\n * is why `exhaustive-deps` is silenced on that dependency array.\n */\nexport function DataTable<T>({\n    data,\n    columns,\n    pageSize = 10,\n    searchable = false,\n    searchKeys,\n    initialSort,\n    rowKey = (_row, index) => index,\n    emptyMessage,\n    className,\n    ...rest\n}: DataTableProps<T>) {\n    const [search, setSearch] = useState<string>(\"\");\n    const [sort, setSort] = useState<DataTableSort<T> | null>(initialSort ?? null);\n    const { page, setPage } = usePagination(1, pageSize);\n\n    const effectiveSearchKeys = useMemo<(keyof T)[]>(() => {\n        if (searchKeys && searchKeys.length > 0) return searchKeys;\n        return columns\n            .filter((column) => {\n                const sample = data.find((row) => row[column.key] != null);\n                const value = sample ? sample[column.key] : undefined;\n                return typeof value === \"string\" || typeof value === \"number\";\n            })\n            .map((column) => column.key);\n    }, [searchKeys, columns, data]);\n\n    const filtered = useMemo<T[]>(() => {\n        const term = search.trim().toLowerCase();\n        if (!term || !searchable) return data;\n        return data.filter((row) =>\n            effectiveSearchKeys.some((key) => {\n                const value = row[key];\n                return value != null && String(value).toLowerCase().includes(term);\n            }),\n        );\n    }, [data, search, searchable, effectiveSearchKeys]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return filtered;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...filtered].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [filtered, sort]);\n\n    const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));\n\n    // Clamp the current page when the dataset shrinks (e.g. after filtering).\n    useEffect(() => {\n        if (page > totalPages) setPage(totalPages);\n    }, [page, totalPages, setPage]);\n\n    const safePage = Math.min(page, totalPages);\n    const pageRows = useMemo<T[]>(() => {\n        const start = (safePage - 1) * pageSize;\n        return sorted.slice(start, start + pageSize);\n    }, [sorted, safePage, pageSize]);\n\n    function toggleSort(key: keyof T): void {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n    }\n\n    const tableColumns = useMemo<TableColumn<T>[]>(\n        () =>\n            columns.map((column) => {\n                const isSorted = sort?.key === column.key;\n                const indicator = isSorted ? (sort?.direction === \"asc\" ? \" ▲\" : \" ▼\") : \"\";\n                const header = column.sortable ? (\n                    <button\n                        type=\"button\"\n                        className={styles.sortButton}\n                        onClick={() => toggleSort(column.key)}\n                        aria-label={`Ordenar por ${\n                            typeof column.header === \"string\" ? column.header : String(column.key)\n                        }`}\n                    >\n                        {column.header}\n                        <span className={styles.sortIndicator} aria-hidden>\n                            {indicator}\n                        </span>\n                    </button>\n                ) : (\n                    column.header\n                );\n\n                return {\n                    key: String(column.key),\n                    header,\n                    align: column.align,\n                    priority: column.priority,\n                    width: column.width,\n                    render: column.render\n                        ? (row: T) => column.render!(row)\n                        : (row: T) => (row[column.key] as ReactNode) ?? null,\n                };\n            }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [columns, sort],\n    );\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {searchable && (\n                <SearchBar\n                    value={search}\n                    onChange={(value) => {\n                        setSearch(value);\n                        setPage(1);\n                    }}\n                    wrapperClassName={styles.search}\n                />\n            )}\n            <Table\n                columns={tableColumns}\n                data={pageRows}\n                rowKey={(row, index) => rowKey(row, (safePage - 1) * pageSize + index)}\n                emptyMessage={emptyMessage}\n            />\n            {totalPages > 1 && (\n                <Pagination\n                    page={safePage}\n                    totalPages={totalPages}\n                    onPageChange={setPage}\n                    totalItems={sorted.length}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Kanban/Kanban.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-sortable.cjs"),n=require("./Kanban.module.cjs");let r=require("react"),i=require("react/jsx-runtime");function a({columns:a,onMove:o,renderCard:s,emptyLabel:c=`Nenhum card`,cardRoleDescription:l=`Card do quadro — Espaço pega, setas movem, Espaço solta`,label:u=`Quadro`,disabled:d=!1,className:f}){let p=(0,r.useMemo)(()=>a.flatMap((e,t)=>e.cards.map((n,r)=>({card:n,column:e,columnIndex:t,cardIndex:r}))),[a]),m=t.useSortable({itemCount:p.length,disabled:d,roleDescription:l,onReorder:({from:e,to:t,fromGroup:n,toGroup:r})=>{let i=p[e];if(!i)return;let s=r??n??i.column.id,c=a.find(e=>e.id===s);if(!c||c.locked)return;let l=p[t],u=l&&l.column.id===s?l.cardIndex:c.cards.length;o({cardId:i.card.id,fromColumn:i.column.id,toColumn:s,toIndex:u})}}),h=(0,r.useMemo)(()=>{let e=[],t=0;for(let n of a)e.push(t),t+=n.cards.length;return e},[a]);return(0,i.jsx)(`div`,{className:e.cn(n.default.board,f),"aria-label":u,ref:m.setContainer,children:a.map((t,r)=>{let a=m.overGroup===t.id&&!t.locked;return(0,i.jsxs)(`div`,{className:e.cn(n.default.column,a&&n.default.columnActive,t.locked&&n.default.columnLocked),children:[(0,i.jsxs)(`div`,{className:n.default.columnHeader,children:[(0,i.jsx)(`span`,{className:n.default.columnTitle,children:t.title}),(0,i.jsx)(`span`,{className:n.default.count,children:t.cards.length})]}),(0,i.jsxs)(`div`,{className:n.default.cards,...t.cards.length>0?m.getListProps():{},"aria-label":typeof t.title==`string`?t.title:t.id,children:[t.cards.map((a,o)=>{let c=h[r]+o,l=m.activeIndex===c,u=m.overIndex===c&&!l;return(0,i.jsx)(`div`,{...m.getItemProps(c,t.id),className:e.cn(n.default.card,l&&n.default.cardActive,u&&n.default.cardOver),children:s?s(a,t):a.content},a.id)}),t.cards.length===0?(0,i.jsx)(`div`,{...m.getEmptyGroupProps(t.id),className:n.default.empty,children:c}):null]})]},t.id)})})}function o(e,t){let n=e.find(e=>e.id===t.fromColumn),r=n?.cards.find(e=>e.id===t.cardId);if(!n||!r)return e;let i=t.toIndex;return e.map(e=>{if(e.id===t.fromColumn&&e.id===t.toColumn){let n=e.cards.filter(e=>e.id!==t.cardId);return n.splice(i,0,r),{...e,cards:n}}if(e.id===t.fromColumn)return{...e,cards:e.cards.filter(e=>e.id!==t.cardId)};if(e.id===t.toColumn){let t=e.cards.slice();return t.splice(i,0,r),{...e,cards:t}}return e})}exports.Kanban=a,exports.applyKanbanMove=o;
+//# sourceMappingURL=Kanban.cjs.map

package/dist/components/Kanban/Kanban.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.cjs","names":[],"sources":["../../../src/components/Kanban/Kanban.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- `getItemProps` is called during render and its\n   handlers close over `useSortable`'s mirror refs, so the rule reports the call site\n   here. The refs are only written from event handlers and read from a window\n   listener; the two reads that were genuinely render-time (the drag group in the\n   rendered class/aria, and the group lookup inside `commit`) were fixed instead of\n   silenced — see the hook's docstring. */\nimport { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { useSortable } from \"@/hooks/use-sortable\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Kanban.module.css\";\n\n/** One card on the board. */\nexport interface KanbanCard {\n    /** Stable identifier, unique across the whole board. */\n    id: string;\n    /** Card body. A string renders as the card's title. */\n    content: ReactNode;\n}\n\n/** One column of the board. */\nexport interface KanbanColumn {\n    /** Stable identifier, used as the drop group. */\n    id: string;\n    /** Column heading. */\n    title: ReactNode;\n    /** Cards in display order. */\n    cards: KanbanCard[];\n    /**\n     * Refuses drops into this column. The cards inside can still be picked up and\n     * moved elsewhere — a \"done\" column that no longer accepts work, for instance.\n     */\n    locked?: boolean;\n}\n\n/** Where a card ended up. */\nexport interface KanbanMove {\n    cardId: string;\n    fromColumn: string;\n    toColumn: string;\n    /** Index within the destination column. */\n    toIndex: number;\n}\n\nexport interface KanbanProps {\n    columns: KanbanColumn[];\n    /**\n     * Called once per committed move — on pointer release or on a keyboard drop.\n     * You own the data: apply the move and pass the new `columns` back.\n     */\n    onMove: (move: KanbanMove) => void;\n    /** Renders a card. Defaults to its `content`. */\n    renderCard?: (card: KanbanCard, column: KanbanColumn) => ReactNode;\n    /** Text shown in a column with no cards. */\n    emptyLabel?: ReactNode;\n    /** Announced per card, so a screen reader user learns the keyboard contract. */\n    cardRoleDescription?: string;\n    /**\n     * Accessible name of the board. A `listbox` without a name is unusable with a\n     * screen reader, so this has a default rather than being optional in practice.\n     */\n    label?: string;\n    /** Blocks all dragging. */\n    disabled?: boolean;\n    className?: string;\n}\n\n/**\n * Kanban board: columns of cards, reorderable within a column and movable across\n * columns, by pointer **or** keyboard.\n *\n * The drag machine is `useSortable` — the board does not reimplement it. Cards are\n * indexed globally across columns so a single sortable can span the whole board;\n * the component translates that flat index back into `{ column, index }` for\n * `onMove`, which is the shape an app actually needs.\n *\n * Nothing is mutated here: `onMove` reports the intent once and the parent applies\n * it. That keeps the board a controlled value and avoids a re-render per pointer\n * frame.\n *\n * ARIA shape: **one `listbox` per column**, named by the column title, containing\n * only `option` cards. A single board-wide listbox does not survive the markup a\n * board needs — `listbox` requires `option`/`group` children, and the column header\n * and card wrapper in between break that ownership. Per-column listboxes also read\n * better: a screen reader announces which column it is in and how many cards it\n * holds. The column header is a plain `div`, not a `<header>`, because outside a\n * sectioning element every `<header>` becomes a page-level banner landmark — with\n * three columns that is three duplicate banners. An **empty** column is not marked\n * as a listbox at all: a listbox with zero options fails `aria-required-children`,\n * and \"no cards\" is exactly zero options.\n *\n * Known limitation: a **keyboard** move can only target positions that hold a card,\n * because the move walks the flat index space of existing cards. Dropping into an\n * empty column works by pointer; by keyboard it does not. Moving a card to a column\n * that already has one card, then reordering, is the workaround until column-switch\n * keys land.\n *\n * @example\n * ```tsx\n * const [columns, setColumns] = useState<KanbanColumn[]>([\n *   { id: \"todo\", title: \"A fazer\", cards: [{ id: \"1\", content: \"Corrigir login\" }] },\n *   { id: \"doing\", title: \"Fazendo\", cards: [] },\n *   { id: \"done\", title: \"Feito\", cards: [], locked: true },\n * ]);\n *\n * <Kanban\n *   columns={columns}\n *   onMove={({ cardId, fromColumn, toColumn, toIndex }) =>\n *     setColumns((current) => applyKanbanMove(current, { cardId, fromColumn, toColumn, toIndex }))\n *   }\n * />\n * ```\n */\nexport function Kanban({\n    columns,\n    onMove,\n    renderCard,\n    emptyLabel = \"Nenhum card\",\n    cardRoleDescription = \"Card do quadro — Espaço pega, setas movem, Espaço solta\",\n    label = \"Quadro\",\n    disabled = false,\n    className,\n}: KanbanProps) {\n    /**\n     * Flat view of every card, in column order.\n     *\n     * `useSortable` works on a single index space, so the board flattens itself and\n     * keeps the mapping back to `{ column, index }` here — the only place that has\n     * to know both shapes.\n     */\n    const flat = useMemo(\n        () =>\n            columns.flatMap((column, columnIndex) =>\n                column.cards.map((card, cardIndex) => ({ card, column, columnIndex, cardIndex })),\n            ),\n        [columns],\n    );\n\n    const sortable = useSortable({\n        itemCount: flat.length,\n        disabled,\n        roleDescription: cardRoleDescription,\n        onReorder: ({ from, to, fromGroup, toGroup }) => {\n            const source = flat[from];\n            if (!source) return;\n\n            const destinationId = toGroup ?? fromGroup ?? source.column.id;\n            const destination = columns.find((column) => column.id === destinationId);\n            if (!destination || destination.locked) return;\n\n            const target = flat[to];\n            const toIndex =\n                target && target.column.id === destinationId\n                    ? target.cardIndex\n                    : destination.cards.length;\n\n            onMove({\n                cardId: source.card.id,\n                fromColumn: source.column.id,\n                toColumn: destinationId,\n                toIndex,\n            });\n        },\n    });\n\n    /**\n     * First flat index of each column.\n     *\n     * Derived instead of counted with a mutable `flatIndex++` during render: a\n     * render-scoped counter mutated inside the map is exactly the pattern the React\n     * Compiler rules reject, and for good reason — a partial or replayed render\n     * would resume from a half-advanced counter.\n     */\n    const columnOffsets = useMemo(() => {\n        const offsets: number[] = [];\n        let start = 0;\n        for (const column of columns) {\n            offsets.push(start);\n            start += column.cards.length;\n        }\n        return offsets;\n    }, [columns]);\n\n    return (\n        <div className={cn(styles.board, className)} aria-label={label} ref={sortable.setContainer}>\n            {columns.map((column, columnIndex) => {\n                const isDropTarget = sortable.overGroup === column.id && !column.locked;\n                return (\n                    <div\n                        key={column.id}\n                        className={cn(\n                            styles.column,\n                            isDropTarget && styles.columnActive,\n                            column.locked && styles.columnLocked,\n                        )}\n                    >\n                        <div className={styles.columnHeader}>\n                            <span className={styles.columnTitle}>{column.title}</span>\n                            <span className={styles.count}>{column.cards.length}</span>\n                        </div>\n\n                        <div\n                            className={styles.cards}\n                            {...(column.cards.length > 0 ? sortable.getListProps() : {})}\n                            aria-label={typeof column.title === \"string\" ? column.title : column.id}\n                        >\n                            {column.cards.map((card, cardIndex) => {\n                                const index = columnOffsets[columnIndex] + cardIndex;\n                                const isActive = sortable.activeIndex === index;\n                                const isOver = sortable.overIndex === index && !isActive;\n                                return (\n                                    <div\n                                        key={card.id}\n                                        {...sortable.getItemProps(index, column.id)}\n                                        className={cn(\n                                            styles.card,\n                                            isActive && styles.cardActive,\n                                            isOver && styles.cardOver,\n                                        )}\n                                    >\n                                        {renderCard ? renderCard(card, column) : card.content}\n                                    </div>\n                                );\n                            })}\n\n                            {column.cards.length === 0 ? (\n                                <div\n                                    {...sortable.getEmptyGroupProps(column.id)}\n                                    className={styles.empty}\n                                >\n                                    {emptyLabel}\n                                </div>\n                            ) : null}\n                        </div>\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n\n/**\n * Apply a {@link KanbanMove} to a column list, returning new arrays.\n *\n * Exported because every consumer needs the same reducer.\n *\n * `toIndex` is the position of the card that was dropped **onto**, read from the\n * board as it looked before the move. Inserting at that same index *after* removing\n * the dragged card lands where the user aimed in both directions — moving down, the\n * removal shifts the target up by one and the insertion lands after it; moving up,\n * nothing shifted. Compensating for the shift (the \"obvious\" `toIndex - 1`) is what\n * turns a one-step move down into a no-op.\n *\n * @param columns - Current board.\n * @param move - The move reported by `onMove`.\n * @returns A new column list, or the same reference when the move cannot apply.\n */\nexport function applyKanbanMove(columns: KanbanColumn[], move: KanbanMove): KanbanColumn[] {\n    const fromColumn = columns.find((column) => column.id === move.fromColumn);\n    const card = fromColumn?.cards.find((candidate) => candidate.id === move.cardId);\n    if (!fromColumn || !card) return columns;\n\n    const insertAt = move.toIndex;\n\n    return columns.map((column) => {\n        if (column.id === move.fromColumn && column.id === move.toColumn) {\n            const without = column.cards.filter((candidate) => candidate.id !== move.cardId);\n            without.splice(insertAt, 0, card);\n            return { ...column, cards: without };\n        }\n        if (column.id === move.fromColumn) {\n            return { ...column, cards: column.cards.filter((c) => c.id !== move.cardId) };\n        }\n        if (column.id === move.toColumn) {\n            const next = column.cards.slice();\n            next.splice(insertAt, 0, card);\n            return { ...column, cards: next };\n        }\n        return column;\n    });\n}\n"],"mappings":"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"}

package/dist/components/Kanban/Kanban.js

@@ -0,0 +1,102 @@
+import { cn as e } from "../../utils/cn.js";
+import { useSortable as t } from "../../hooks/use-sortable.js";
+import n from "./Kanban.module.js";
+import { useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/Kanban/Kanban.tsx
+function o({ columns: o, onMove: s, renderCard: c, emptyLabel: l = "Nenhum card", cardRoleDescription: u = "Card do quadro — Espaço pega, setas movem, Espaço solta", label: d = "Quadro", disabled: f = !1, className: p }) {
+	let m = r(() => o.flatMap((e, t) => e.cards.map((n, r) => ({
+		card: n,
+		column: e,
+		columnIndex: t,
+		cardIndex: r
+	}))), [o]), h = t({
+		itemCount: m.length,
+		disabled: f,
+		roleDescription: u,
+		onReorder: ({ from: e, to: t, fromGroup: n, toGroup: r }) => {
+			let i = m[e];
+			if (!i) return;
+			let a = r ?? n ?? i.column.id, c = o.find((e) => e.id === a);
+			if (!c || c.locked) return;
+			let l = m[t], u = l && l.column.id === a ? l.cardIndex : c.cards.length;
+			s({
+				cardId: i.card.id,
+				fromColumn: i.column.id,
+				toColumn: a,
+				toIndex: u
+			});
+		}
+	}), g = r(() => {
+		let e = [], t = 0;
+		for (let n of o) e.push(t), t += n.cards.length;
+		return e;
+	}, [o]);
+	return /* @__PURE__ */ i("div", {
+		className: e(n.board, p),
+		"aria-label": d,
+		ref: h.setContainer,
+		children: o.map((t, r) => {
+			let o = h.overGroup === t.id && !t.locked;
+			return /* @__PURE__ */ a("div", {
+				className: e(n.column, o && n.columnActive, t.locked && n.columnLocked),
+				children: [/* @__PURE__ */ a("div", {
+					className: n.columnHeader,
+					children: [/* @__PURE__ */ i("span", {
+						className: n.columnTitle,
+						children: t.title
+					}), /* @__PURE__ */ i("span", {
+						className: n.count,
+						children: t.cards.length
+					})]
+				}), /* @__PURE__ */ a("div", {
+					className: n.cards,
+					...t.cards.length > 0 ? h.getListProps() : {},
+					"aria-label": typeof t.title == "string" ? t.title : t.id,
+					children: [t.cards.map((a, o) => {
+						let s = g[r] + o, l = h.activeIndex === s, u = h.overIndex === s && !l;
+						return /* @__PURE__ */ i("div", {
+							...h.getItemProps(s, t.id),
+							className: e(n.card, l && n.cardActive, u && n.cardOver),
+							children: c ? c(a, t) : a.content
+						}, a.id);
+					}), t.cards.length === 0 ? /* @__PURE__ */ i("div", {
+						...h.getEmptyGroupProps(t.id),
+						className: n.empty,
+						children: l
+					}) : null]
+				})]
+			}, t.id);
+		})
+	});
+}
+function s(e, t) {
+	let n = e.find((e) => e.id === t.fromColumn), r = n?.cards.find((e) => e.id === t.cardId);
+	if (!n || !r) return e;
+	let i = t.toIndex;
+	return e.map((e) => {
+		if (e.id === t.fromColumn && e.id === t.toColumn) {
+			let n = e.cards.filter((e) => e.id !== t.cardId);
+			return n.splice(i, 0, r), {
+				...e,
+				cards: n
+			};
+		}
+		if (e.id === t.fromColumn) return {
+			...e,
+			cards: e.cards.filter((e) => e.id !== t.cardId)
+		};
+		if (e.id === t.toColumn) {
+			let t = e.cards.slice();
+			return t.splice(i, 0, r), {
+				...e,
+				cards: t
+			};
+		}
+		return e;
+	});
+}
+//#endregion
+export { o as Kanban, s as applyKanbanMove };
+
+//# sourceMappingURL=Kanban.js.map

package/dist/components/Kanban/Kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.js","names":[],"sources":["../../../src/components/Kanban/Kanban.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- `getItemProps` is called during render and its\n   handlers close over `useSortable`'s mirror refs, so the rule reports the call site\n   here. The refs are only written from event handlers and read from a window\n   listener; the two reads that were genuinely render-time (the drag group in the\n   rendered class/aria, and the group lookup inside `commit`) were fixed instead of\n   silenced — see the hook's docstring. */\nimport { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { useSortable } from \"@/hooks/use-sortable\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Kanban.module.css\";\n\n/** One card on the board. */\nexport interface KanbanCard {\n    /** Stable identifier, unique across the whole board. */\n    id: string;\n    /** Card body. A string renders as the card's title. */\n    content: ReactNode;\n}\n\n/** One column of the board. */\nexport interface KanbanColumn {\n    /** Stable identifier, used as the drop group. */\n    id: string;\n    /** Column heading. */\n    title: ReactNode;\n    /** Cards in display order. */\n    cards: KanbanCard[];\n    /**\n     * Refuses drops into this column. The cards inside can still be picked up and\n     * moved elsewhere — a \"done\" column that no longer accepts work, for instance.\n     */\n    locked?: boolean;\n}\n\n/** Where a card ended up. */\nexport interface KanbanMove {\n    cardId: string;\n    fromColumn: string;\n    toColumn: string;\n    /** Index within the destination column. */\n    toIndex: number;\n}\n\nexport interface KanbanProps {\n    columns: KanbanColumn[];\n    /**\n     * Called once per committed move — on pointer release or on a keyboard drop.\n     * You own the data: apply the move and pass the new `columns` back.\n     */\n    onMove: (move: KanbanMove) => void;\n    /** Renders a card. Defaults to its `content`. */\n    renderCard?: (card: KanbanCard, column: KanbanColumn) => ReactNode;\n    /** Text shown in a column with no cards. */\n    emptyLabel?: ReactNode;\n    /** Announced per card, so a screen reader user learns the keyboard contract. */\n    cardRoleDescription?: string;\n    /**\n     * Accessible name of the board. A `listbox` without a name is unusable with a\n     * screen reader, so this has a default rather than being optional in practice.\n     */\n    label?: string;\n    /** Blocks all dragging. */\n    disabled?: boolean;\n    className?: string;\n}\n\n/**\n * Kanban board: columns of cards, reorderable within a column and movable across\n * columns, by pointer **or** keyboard.\n *\n * The drag machine is `useSortable` — the board does not reimplement it. Cards are\n * indexed globally across columns so a single sortable can span the whole board;\n * the component translates that flat index back into `{ column, index }` for\n * `onMove`, which is the shape an app actually needs.\n *\n * Nothing is mutated here: `onMove` reports the intent once and the parent applies\n * it. That keeps the board a controlled value and avoids a re-render per pointer\n * frame.\n *\n * ARIA shape: **one `listbox` per column**, named by the column title, containing\n * only `option` cards. A single board-wide listbox does not survive the markup a\n * board needs — `listbox` requires `option`/`group` children, and the column header\n * and card wrapper in between break that ownership. Per-column listboxes also read\n * better: a screen reader announces which column it is in and how many cards it\n * holds. The column header is a plain `div`, not a `<header>`, because outside a\n * sectioning element every `<header>` becomes a page-level banner landmark — with\n * three columns that is three duplicate banners. An **empty** column is not marked\n * as a listbox at all: a listbox with zero options fails `aria-required-children`,\n * and \"no cards\" is exactly zero options.\n *\n * Known limitation: a **keyboard** move can only target positions that hold a card,\n * because the move walks the flat index space of existing cards. Dropping into an\n * empty column works by pointer; by keyboard it does not. Moving a card to a column\n * that already has one card, then reordering, is the workaround until column-switch\n * keys land.\n *\n * @example\n * ```tsx\n * const [columns, setColumns] = useState<KanbanColumn[]>([\n *   { id: \"todo\", title: \"A fazer\", cards: [{ id: \"1\", content: \"Corrigir login\" }] },\n *   { id: \"doing\", title: \"Fazendo\", cards: [] },\n *   { id: \"done\", title: \"Feito\", cards: [], locked: true },\n * ]);\n *\n * <Kanban\n *   columns={columns}\n *   onMove={({ cardId, fromColumn, toColumn, toIndex }) =>\n *     setColumns((current) => applyKanbanMove(current, { cardId, fromColumn, toColumn, toIndex }))\n *   }\n * />\n * ```\n */\nexport function Kanban({\n    columns,\n    onMove,\n    renderCard,\n    emptyLabel = \"Nenhum card\",\n    cardRoleDescription = \"Card do quadro — Espaço pega, setas movem, Espaço solta\",\n    label = \"Quadro\",\n    disabled = false,\n    className,\n}: KanbanProps) {\n    /**\n     * Flat view of every card, in column order.\n     *\n     * `useSortable` works on a single index space, so the board flattens itself and\n     * keeps the mapping back to `{ column, index }` here — the only place that has\n     * to know both shapes.\n     */\n    const flat = useMemo(\n        () =>\n            columns.flatMap((column, columnIndex) =>\n                column.cards.map((card, cardIndex) => ({ card, column, columnIndex, cardIndex })),\n            ),\n        [columns],\n    );\n\n    const sortable = useSortable({\n        itemCount: flat.length,\n        disabled,\n        roleDescription: cardRoleDescription,\n        onReorder: ({ from, to, fromGroup, toGroup }) => {\n            const source = flat[from];\n            if (!source) return;\n\n            const destinationId = toGroup ?? fromGroup ?? source.column.id;\n            const destination = columns.find((column) => column.id === destinationId);\n            if (!destination || destination.locked) return;\n\n            const target = flat[to];\n            const toIndex =\n                target && target.column.id === destinationId\n                    ? target.cardIndex\n                    : destination.cards.length;\n\n            onMove({\n                cardId: source.card.id,\n                fromColumn: source.column.id,\n                toColumn: destinationId,\n                toIndex,\n            });\n        },\n    });\n\n    /**\n     * First flat index of each column.\n     *\n     * Derived instead of counted with a mutable `flatIndex++` during render: a\n     * render-scoped counter mutated inside the map is exactly the pattern the React\n     * Compiler rules reject, and for good reason — a partial or replayed render\n     * would resume from a half-advanced counter.\n     */\n    const columnOffsets = useMemo(() => {\n        const offsets: number[] = [];\n        let start = 0;\n        for (const column of columns) {\n            offsets.push(start);\n            start += column.cards.length;\n        }\n        return offsets;\n    }, [columns]);\n\n    return (\n        <div className={cn(styles.board, className)} aria-label={label} ref={sortable.setContainer}>\n            {columns.map((column, columnIndex) => {\n                const isDropTarget = sortable.overGroup === column.id && !column.locked;\n                return (\n                    <div\n                        key={column.id}\n                        className={cn(\n                            styles.column,\n                            isDropTarget && styles.columnActive,\n                            column.locked && styles.columnLocked,\n                        )}\n                    >\n                        <div className={styles.columnHeader}>\n                            <span className={styles.columnTitle}>{column.title}</span>\n                            <span className={styles.count}>{column.cards.length}</span>\n                        </div>\n\n                        <div\n                            className={styles.cards}\n                            {...(column.cards.length > 0 ? sortable.getListProps() : {})}\n                            aria-label={typeof column.title === \"string\" ? column.title : column.id}\n                        >\n                            {column.cards.map((card, cardIndex) => {\n                                const index = columnOffsets[columnIndex] + cardIndex;\n                                const isActive = sortable.activeIndex === index;\n                                const isOver = sortable.overIndex === index && !isActive;\n                                return (\n                                    <div\n                                        key={card.id}\n                                        {...sortable.getItemProps(index, column.id)}\n                                        className={cn(\n                                            styles.card,\n                                            isActive && styles.cardActive,\n                                            isOver && styles.cardOver,\n                                        )}\n                                    >\n                                        {renderCard ? renderCard(card, column) : card.content}\n                                    </div>\n                                );\n                            })}\n\n                            {column.cards.length === 0 ? (\n                                <div\n                                    {...sortable.getEmptyGroupProps(column.id)}\n                                    className={styles.empty}\n                                >\n                                    {emptyLabel}\n                                </div>\n                            ) : null}\n                        </div>\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n\n/**\n * Apply a {@link KanbanMove} to a column list, returning new arrays.\n *\n * Exported because every consumer needs the same reducer.\n *\n * `toIndex` is the position of the card that was dropped **onto**, read from the\n * board as it looked before the move. Inserting at that same index *after* removing\n * the dragged card lands where the user aimed in both directions — moving down, the\n * removal shifts the target up by one and the insertion lands after it; moving up,\n * nothing shifted. Compensating for the shift (the \"obvious\" `toIndex - 1`) is what\n * turns a one-step move down into a no-op.\n *\n * @param columns - Current board.\n * @param move - The move reported by `onMove`.\n * @returns A new column list, or the same reference when the move cannot apply.\n */\nexport function applyKanbanMove(columns: KanbanColumn[], move: KanbanMove): KanbanColumn[] {\n    const fromColumn = columns.find((column) => column.id === move.fromColumn);\n    const card = fromColumn?.cards.find((candidate) => candidate.id === move.cardId);\n    if (!fromColumn || !card) return columns;\n\n    const insertAt = move.toIndex;\n\n    return columns.map((column) => {\n        if (column.id === move.fromColumn && column.id === move.toColumn) {\n            const without = column.cards.filter((candidate) => candidate.id !== move.cardId);\n            without.splice(insertAt, 0, card);\n            return { ...column, cards: without };\n        }\n        if (column.id === move.fromColumn) {\n            return { ...column, cards: column.cards.filter((c) => c.id !== move.cardId) };\n        }\n        if (column.id === move.toColumn) {\n            const next = column.cards.slice();\n            next.splice(insertAt, 0, card);\n            return { ...column, cards: next };\n        }\n        return column;\n    });\n}\n"],"mappings":"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"}

package/dist/components/Kanban/Kanban.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_board_4Ucop`,t=`tempest_column_-FohZ`,n=`tempest_columnActive_TJPM9`,r=`tempest_columnLocked_Ckkxx`,i=`tempest_columnHeader_2dsPR`,a=`tempest_columnTitle_MT8k1`,o=`tempest_count_5oF3H`,s=`tempest_cards_Gb36w`,c=`tempest_card_XJTzV`,l=`tempest_cardActive_rNhzK`,u=`tempest_cardOver_zi6kh`,d=`tempest_empty_kyA7k`,f={board:e,column:t,columnActive:n,columnLocked:r,columnHeader:i,columnTitle:a,count:o,cards:s,card:c,cardActive:l,cardOver:u,empty:d};exports.board=e,exports.card=c,exports.cardActive=l,exports.cardOver=u,exports.cards=s,exports.column=t,exports.columnActive=n,exports.columnHeader=i,exports.columnLocked=r,exports.columnTitle=a,exports.count=o,exports.default=f,exports.empty=d;
+//# sourceMappingURL=Kanban.module.cjs.map

package/dist/components/Kanban/Kanban.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.module.cjs","names":[],"sources":["../../../src/components/Kanban/Kanban.module.css"],"sourcesContent":[".board {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-4);\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n    padding-bottom: var(--tempest-space-2);\n}\n\n.column {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    flex: 0 0 var(--tempest-kanban-column-width, 260px);\n    min-width: 0;\n    padding: var(--tempest-space-3);\n    background-color: var(--tempest-surface);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    transition:\n        background-color var(--tempest-duration-fast) var(--tempest-ease-out),\n        border-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.columnActive {\n    border-color: var(--tempest-primary);\n    background-color: var(--tempest-primary-soft);\n}\n\n.columnLocked {\n    opacity: 0.75;\n}\n\n.columnHeader {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n}\n\n.columnTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n}\n\n.count {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 22px;\n    height: 22px;\n    padding-inline: var(--tempest-space-2);\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.cards {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    min-height: 48px;\n}\n\n.card {\n    padding: var(--tempest-space-3);\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    box-shadow: var(--tempest-shadow-xs);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n    cursor: grab;\n    touch-action: none;\n    user-select: none;\n}\n\n.card:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.cardActive {\n    cursor: grabbing;\n    opacity: 0.55;\n    box-shadow: var(--tempest-shadow-md);\n}\n\n.cardOver {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 -2px 0 0 var(--tempest-primary);\n}\n\n.empty {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 48px;\n    border: 1px dashed var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-md);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .column {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/Kanban/Kanban.module.js

@@ -0,0 +1,19 @@
+//#region src/components/Kanban/Kanban.module.css
+var e = "tempest_board_4Ucop", t = "tempest_column_-FohZ", n = "tempest_columnActive_TJPM9", r = "tempest_columnLocked_Ckkxx", i = "tempest_columnHeader_2dsPR", a = "tempest_columnTitle_MT8k1", o = "tempest_count_5oF3H", s = "tempest_cards_Gb36w", c = "tempest_card_XJTzV", l = "tempest_cardActive_rNhzK", u = "tempest_cardOver_zi6kh", d = "tempest_empty_kyA7k", f = {
+	board: e,
+	column: t,
+	columnActive: n,
+	columnLocked: r,
+	columnHeader: i,
+	columnTitle: a,
+	count: o,
+	cards: s,
+	card: c,
+	cardActive: l,
+	cardOver: u,
+	empty: d
+};
+//#endregion
+export { e as board, c as card, l as cardActive, u as cardOver, s as cards, t as column, n as columnActive, i as columnHeader, r as columnLocked, a as columnTitle, o as count, f as default, d as empty };
+
+//# sourceMappingURL=Kanban.module.js.map

package/dist/components/Kanban/Kanban.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.module.js","names":[],"sources":["../../../src/components/Kanban/Kanban.module.css"],"sourcesContent":[".board {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-4);\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n    padding-bottom: var(--tempest-space-2);\n}\n\n.column {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    flex: 0 0 var(--tempest-kanban-column-width, 260px);\n    min-width: 0;\n    padding: var(--tempest-space-3);\n    background-color: var(--tempest-surface);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    transition:\n        background-color var(--tempest-duration-fast) var(--tempest-ease-out),\n        border-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.columnActive {\n    border-color: var(--tempest-primary);\n    background-color: var(--tempest-primary-soft);\n}\n\n.columnLocked {\n    opacity: 0.75;\n}\n\n.columnHeader {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n}\n\n.columnTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    color: var(--tempest-text);\n}\n\n.count {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 22px;\n    height: 22px;\n    padding-inline: var(--tempest-space-2);\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.cards {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    min-height: 48px;\n}\n\n.card {\n    padding: var(--tempest-space-3);\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    box-shadow: var(--tempest-shadow-xs);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n    cursor: grab;\n    touch-action: none;\n    user-select: none;\n}\n\n.card:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.cardActive {\n    cursor: grabbing;\n    opacity: 0.55;\n    box-shadow: var(--tempest-shadow-md);\n}\n\n.cardOver {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 -2px 0 0 var(--tempest-primary);\n}\n\n.empty {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 48px;\n    border: 1px dashed var(--tempest-border-strong);\n    border-radius: var(--tempest-radius-md);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .column {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/NotificationCenter/NotificationCenter.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("../Badge/Badge.cjs"),n=require("../EmptyState/EmptyState.cjs"),r=require("../../utils/relative-time.cjs"),i=require("./NotificationCenter.module.cjs");let a=require("react/jsx-runtime");function o({items:o,title:s=`Notificações`,onSelect:c,onMarkRead:l,onMarkAllRead:u,onDismiss:d,renderIcon:f,locale:p=`pt-BR`,emptyState:m,now:h,className:g,..._}){let v=o.filter(e=>!e.read).length,y=h??new Date().getTime(),b=e=>{e.read||l?.(e.id),c?.(e)},x=!!(c||l);return(0,a.jsxs)(`div`,{className:e.cn(i.default.panel,g),..._,children:[(s||u&&v>0)&&(0,a.jsxs)(`header`,{className:i.default.header,children:[s?(0,a.jsxs)(`h2`,{className:i.default.title,children:[s,v>0&&(0,a.jsx)(t.Badge,{variant:`primary`,"aria-label":`${v} não lidas`,children:v})]}):(0,a.jsx)(`span`,{}),u&&v>0&&(0,a.jsx)(`button`,{type:`button`,className:i.default.headerAction,onClick:u,children:`Marcar todas como lidas`})]}),o.length===0?m??(0,a.jsx)(n.EmptyState,{title:`Nenhuma notificação`}):(0,a.jsx)(`ul`,{className:i.default.list,children:o.map(t=>(0,a.jsxs)(`li`,{className:e.cn(i.default.item,!t.read&&i.default.unread),"aria-current":t.read?void 0:`true`,children:[f&&(0,a.jsx)(`span`,{className:i.default.icon,children:f(t)}),(0,a.jsxs)(`div`,{className:i.default.body,children:[x?(0,a.jsxs)(`button`,{type:`button`,className:i.default.trigger,onClick:()=>b(t),children:[(0,a.jsx)(`span`,{className:i.default.itemTitle,children:t.title}),t.body&&(0,a.jsx)(`span`,{className:i.default.itemBody,children:t.body})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`span`,{className:i.default.itemTitle,children:t.title}),t.body&&(0,a.jsx)(`span`,{className:i.default.itemBody,children:t.body})]}),(0,a.jsx)(`time`,{className:i.default.time,dateTime:new Date(t.receivedAt).toISOString(),children:r.relativeTime(t.receivedAt,{locale:p,now:y})})]}),d&&(0,a.jsx)(`button`,{type:`button`,className:i.default.dismiss,onClick:()=>d(t.id),"aria-label":`Descartar: ${t.title}`,children:`×`})]},t.id))})]})}exports.NotificationCenter=o;
+//# sourceMappingURL=NotificationCenter.cjs.map

package/dist/components/NotificationCenter/NotificationCenter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.cjs","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { relativeTime, type RelativeTimeLocale } from \"@/utils/relative-time\";\n\nimport { Badge } from \"../Badge\";\nimport { EmptyState } from \"../EmptyState\";\nimport type { NotificationItem } from \"./use-notification-inbox\";\nimport styles from \"./NotificationCenter.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `title` becomes a rendered heading node instead of a tooltip string, and\n * `onSelect` becomes \"an entry was activated\" instead of the DOM text-selection\n * event. Both would be type errors if merged, and silently confusing if allowed\n * through.\n */\ntype OverriddenDomProps = \"children\" | \"title\" | \"onSelect\";\n\nexport interface NotificationCenterProps extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    OverriddenDomProps\n> {\n    /** Entries to show. Rendered in the order given — `useNotificationInbox` sorts newest first. */\n    items: readonly NotificationItem[];\n    /**\n     * Panel heading. Pass `null` to render the list with no header.\n     *\n     * Widened from the DOM `title` attribute (a `string`) on purpose: this is a\n     * rendered heading, not a tooltip, so it takes a node.\n     */\n    title?: ReactNode;\n    /** Activate an entry: click, `Enter` or `Space`. Also marks it read when `onMarkRead` is set. */\n    onSelect?: (item: NotificationItem) => void;\n    /** Mark one entry as read. Enables the per-item read control. */\n    onMarkRead?: (id: string) => void;\n    /** Mark every entry as read. Enables the header action. */\n    onMarkAllRead?: () => void;\n    /** Remove one entry. Enables the per-item dismiss control. */\n    onDismiss?: (id: string) => void;\n    /** Icon rendered at the leading edge of each row — an `<Icon name={…} />`, say. */\n    renderIcon?: (item: NotificationItem) => ReactNode;\n    /** Locale for the relative timestamps. Default `\"pt-BR\"`. */\n    locale?: RelativeTimeLocale;\n    /** Shown when `items` is empty. */\n    emptyState?: ReactNode;\n    /** Reference point for the relative timestamps. Default: now, at render time. */\n    now?: number;\n}\n\n/**\n * Inbox panel for notifications the app has received.\n *\n * Deliberately presentational and controlled: it takes a list and emits intent.\n * Where the list comes from — an API, a service-worker push, `localStorage` — and\n * where read state is written are app decisions, and a component that assumed any\n * of them would be wrong for most apps. `useNotificationInbox` is the companion\n * that holds the state, including the service-worker bridge.\n *\n * It is also just the panel, not a popover: apps mount it inside their own\n * `Popover`, `Drawer` or route. That keeps one component from owning both the\n * inbox and a positioning strategy.\n *\n * @example\n * const inbox = useNotificationInbox();\n *\n * <Popover trigger={<Button>Notificações ({inbox.unreadCount})</Button>}>\n *     <NotificationCenter\n *         items={inbox.items}\n *         onMarkRead={inbox.markRead}\n *         onMarkAllRead={inbox.markAllRead}\n *         onDismiss={inbox.remove}\n *         onSelect={(item) => item.url && navigate(item.url)}\n *     />\n * </Popover>\n */\nexport function NotificationCenter({\n    items,\n    title = \"Notificações\",\n    onSelect,\n    onMarkRead,\n    onMarkAllRead,\n    onDismiss,\n    renderIcon,\n    locale = \"pt-BR\",\n    emptyState,\n    now,\n    className,\n    ...rest\n}: NotificationCenterProps) {\n    const unreadCount = items.filter((item) => !item.read).length;\n    const reference = now ?? new Date().getTime();\n\n    /**\n     * Activate an entry.\n     *\n     * Reading a notification is implied by opening it, so activation marks it read\n     * as well — otherwise every app would have to remember to call both, and the\n     * unread badge would keep counting something the user already saw.\n     */\n    const activate = (item: NotificationItem): void => {\n        if (!item.read) onMarkRead?.(item.id);\n        onSelect?.(item);\n    };\n\n    const interactive = Boolean(onSelect || onMarkRead);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {(title || (onMarkAllRead && unreadCount > 0)) && (\n                <header className={styles.header}>\n                    {title ? (\n                        <h2 className={styles.title}>\n                            {title}\n                            {unreadCount > 0 && (\n                                <Badge variant=\"primary\" aria-label={`${unreadCount} não lidas`}>\n                                    {unreadCount}\n                                </Badge>\n                            )}\n                        </h2>\n                    ) : (\n                        <span />\n                    )}\n                    {onMarkAllRead && unreadCount > 0 && (\n                        <button\n                            type=\"button\"\n                            className={styles.headerAction}\n                            onClick={onMarkAllRead}\n                        >\n                            Marcar todas como lidas\n                        </button>\n                    )}\n                </header>\n            )}\n\n            {items.length === 0 ? (\n                (emptyState ?? <EmptyState title=\"Nenhuma notificação\" />)\n            ) : (\n                <ul className={styles.list}>\n                    {items.map((item) => (\n                        <li\n                            key={item.id}\n                            className={cn(styles.item, !item.read && styles.unread)}\n                            aria-current={!item.read ? \"true\" : undefined}\n                        >\n                            {renderIcon && <span className={styles.icon}>{renderIcon(item)}</span>}\n\n                            <div className={styles.body}>\n                                {interactive ? (\n                                    <button\n                                        type=\"button\"\n                                        className={styles.trigger}\n                                        onClick={() => activate(item)}\n                                    >\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </button>\n                                ) : (\n                                    <>\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </>\n                                )}\n                                <time\n                                    className={styles.time}\n                                    dateTime={new Date(item.receivedAt).toISOString()}\n                                >\n                                    {relativeTime(item.receivedAt, { locale, now: reference })}\n                                </time>\n                            </div>\n\n                            {onDismiss && (\n                                <button\n                                    type=\"button\"\n                                    className={styles.dismiss}\n                                    onClick={() => onDismiss(item.id)}\n                                    aria-label={`Descartar: ${item.title}`}\n                                >\n                                    ×\n                                </button>\n                            )}\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":"2OA6EA,SAAgB,EAAmB,CAC/B,QACA,QAAQ,eACR,WACA,aACA,gBACA,YACA,aACA,SAAS,QACT,aACA,MACA,YACA,GAAG,GACqB,CACxB,IAAM,EAAc,EAAM,OAAQ,GAAS,CAAC,EAAK,IAAI,CAAC,CAAC,OACjD,EAAY,GAAO,IAAI,KAAK,CAAA,CAAE,QAAQ,EAStC,EAAY,GAAiC,CAC1C,EAAK,MAAM,IAAa,EAAK,EAAE,EACpC,IAAW,CAAI,CACnB,EAEM,EAAc,GAAQ,GAAY,GAExC,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EAAG,GAAI,WAAjD,EACM,GAAU,GAAiB,EAAc,KACvC,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,gBAA1B,CACK,GACG,EAAA,EAAA,KAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,eAAtB,CACK,EACA,EAAc,IACX,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,QAAQ,UAAU,aAAY,GAAG,EAAY,qBAC/C,CACE,CAAA,CAEX,KAEJ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAO,CAAA,EAEV,GAAiB,EAAc,IAC5B,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,aAClB,QAAS,WACZ,yBAEO,CAAA,CAER,IAGX,EAAM,SAAW,EACb,IAAc,EAAA,EAAA,IAAA,CAAC,EAAA,WAAD,CAAY,MAAM,qBAAuB,CAAA,GAExD,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,cACjB,EAAM,IAAK,IACR,EAAA,EAAA,KAAA,CAAC,KAAD,CAEI,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,CAAC,EAAK,MAAQ,EAAA,QAAO,MAAM,EACtD,eAAe,EAAK,KAAgB,IAAA,GAAT,gBAH/B,CAKK,IAAc,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,cAAO,EAAW,CAAI,CAAQ,CAAA,GAErE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,cAAvB,CACK,GACG,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,YAAe,EAAS,CAAI,WAHhC,EAKI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAK,KAAY,CAAA,EACpD,EAAK,OACF,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAK,IAAW,CAAA,CAEnD,KAER,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAK,KAAY,CAAA,EACpD,EAAK,OACF,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAK,IAAW,CAAA,CAEzD,CAAA,CAAA,GAEN,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,UAAW,EAAA,QAAO,KAClB,SAAU,IAAI,KAAK,EAAK,UAAU,CAAC,CAAC,YAAY,WAE/C,EAAA,aAAa,EAAK,WAAY,CAAE,SAAQ,IAAK,CAAU,CAAC,CACvD,CAAA,CACL,IAEJ,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,YAAe,EAAU,EAAK,EAAE,EAChC,aAAY,cAAc,EAAK,iBAClC,GAEO,CAAA,CAEZ,GA5CK,EAAK,EA4CV,CACP,CACD,CAAA,CAEP,GAEb"}

package/dist/components/NotificationCenter/NotificationCenter.js

@@ -0,0 +1,83 @@
+import { cn as e } from "../../utils/cn.js";
+import { Badge as t } from "../Badge/Badge.js";
+import { EmptyState as n } from "../EmptyState/EmptyState.js";
+import { relativeTime as r } from "../../utils/relative-time.js";
+import i from "./NotificationCenter.module.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/NotificationCenter/NotificationCenter.tsx
+function c({ items: c, title: l = "Notificações", onSelect: u, onMarkRead: d, onMarkAllRead: f, onDismiss: p, renderIcon: m, locale: h = "pt-BR", emptyState: g, now: _, className: v, ...y }) {
+	let b = c.filter((e) => !e.read).length, x = _ ?? (/* @__PURE__ */ new Date()).getTime(), S = (e) => {
+		e.read || d?.(e.id), u?.(e);
+	}, C = !!(u || d);
+	return /* @__PURE__ */ s("div", {
+		className: e(i.panel, v),
+		...y,
+		children: [(l || f && b > 0) && /* @__PURE__ */ s("header", {
+			className: i.header,
+			children: [l ? /* @__PURE__ */ s("h2", {
+				className: i.title,
+				children: [l, b > 0 && /* @__PURE__ */ o(t, {
+					variant: "primary",
+					"aria-label": `${b} não lidas`,
+					children: b
+				})]
+			}) : /* @__PURE__ */ o("span", {}), f && b > 0 && /* @__PURE__ */ o("button", {
+				type: "button",
+				className: i.headerAction,
+				onClick: f,
+				children: "Marcar todas como lidas"
+			})]
+		}), c.length === 0 ? g ?? /* @__PURE__ */ o(n, { title: "Nenhuma notificação" }) : /* @__PURE__ */ o("ul", {
+			className: i.list,
+			children: c.map((t) => /* @__PURE__ */ s("li", {
+				className: e(i.item, !t.read && i.unread),
+				"aria-current": t.read ? void 0 : "true",
+				children: [
+					m && /* @__PURE__ */ o("span", {
+						className: i.icon,
+						children: m(t)
+					}),
+					/* @__PURE__ */ s("div", {
+						className: i.body,
+						children: [C ? /* @__PURE__ */ s("button", {
+							type: "button",
+							className: i.trigger,
+							onClick: () => S(t),
+							children: [/* @__PURE__ */ o("span", {
+								className: i.itemTitle,
+								children: t.title
+							}), t.body && /* @__PURE__ */ o("span", {
+								className: i.itemBody,
+								children: t.body
+							})]
+						}) : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("span", {
+							className: i.itemTitle,
+							children: t.title
+						}), t.body && /* @__PURE__ */ o("span", {
+							className: i.itemBody,
+							children: t.body
+						})] }), /* @__PURE__ */ o("time", {
+							className: i.time,
+							dateTime: new Date(t.receivedAt).toISOString(),
+							children: r(t.receivedAt, {
+								locale: h,
+								now: x
+							})
+						})]
+					}),
+					p && /* @__PURE__ */ o("button", {
+						type: "button",
+						className: i.dismiss,
+						onClick: () => p(t.id),
+						"aria-label": `Descartar: ${t.title}`,
+						children: "×"
+					})
+				]
+			}, t.id))
+		})]
+	});
+}
+//#endregion
+export { c as NotificationCenter };
+
+//# sourceMappingURL=NotificationCenter.js.map

package/dist/components/NotificationCenter/NotificationCenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.js","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { relativeTime, type RelativeTimeLocale } from \"@/utils/relative-time\";\n\nimport { Badge } from \"../Badge\";\nimport { EmptyState } from \"../EmptyState\";\nimport type { NotificationItem } from \"./use-notification-inbox\";\nimport styles from \"./NotificationCenter.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `title` becomes a rendered heading node instead of a tooltip string, and\n * `onSelect` becomes \"an entry was activated\" instead of the DOM text-selection\n * event. Both would be type errors if merged, and silently confusing if allowed\n * through.\n */\ntype OverriddenDomProps = \"children\" | \"title\" | \"onSelect\";\n\nexport interface NotificationCenterProps extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    OverriddenDomProps\n> {\n    /** Entries to show. Rendered in the order given — `useNotificationInbox` sorts newest first. */\n    items: readonly NotificationItem[];\n    /**\n     * Panel heading. Pass `null` to render the list with no header.\n     *\n     * Widened from the DOM `title` attribute (a `string`) on purpose: this is a\n     * rendered heading, not a tooltip, so it takes a node.\n     */\n    title?: ReactNode;\n    /** Activate an entry: click, `Enter` or `Space`. Also marks it read when `onMarkRead` is set. */\n    onSelect?: (item: NotificationItem) => void;\n    /** Mark one entry as read. Enables the per-item read control. */\n    onMarkRead?: (id: string) => void;\n    /** Mark every entry as read. Enables the header action. */\n    onMarkAllRead?: () => void;\n    /** Remove one entry. Enables the per-item dismiss control. */\n    onDismiss?: (id: string) => void;\n    /** Icon rendered at the leading edge of each row — an `<Icon name={…} />`, say. */\n    renderIcon?: (item: NotificationItem) => ReactNode;\n    /** Locale for the relative timestamps. Default `\"pt-BR\"`. */\n    locale?: RelativeTimeLocale;\n    /** Shown when `items` is empty. */\n    emptyState?: ReactNode;\n    /** Reference point for the relative timestamps. Default: now, at render time. */\n    now?: number;\n}\n\n/**\n * Inbox panel for notifications the app has received.\n *\n * Deliberately presentational and controlled: it takes a list and emits intent.\n * Where the list comes from — an API, a service-worker push, `localStorage` — and\n * where read state is written are app decisions, and a component that assumed any\n * of them would be wrong for most apps. `useNotificationInbox` is the companion\n * that holds the state, including the service-worker bridge.\n *\n * It is also just the panel, not a popover: apps mount it inside their own\n * `Popover`, `Drawer` or route. That keeps one component from owning both the\n * inbox and a positioning strategy.\n *\n * @example\n * const inbox = useNotificationInbox();\n *\n * <Popover trigger={<Button>Notificações ({inbox.unreadCount})</Button>}>\n *     <NotificationCenter\n *         items={inbox.items}\n *         onMarkRead={inbox.markRead}\n *         onMarkAllRead={inbox.markAllRead}\n *         onDismiss={inbox.remove}\n *         onSelect={(item) => item.url && navigate(item.url)}\n *     />\n * </Popover>\n */\nexport function NotificationCenter({\n    items,\n    title = \"Notificações\",\n    onSelect,\n    onMarkRead,\n    onMarkAllRead,\n    onDismiss,\n    renderIcon,\n    locale = \"pt-BR\",\n    emptyState,\n    now,\n    className,\n    ...rest\n}: NotificationCenterProps) {\n    const unreadCount = items.filter((item) => !item.read).length;\n    const reference = now ?? new Date().getTime();\n\n    /**\n     * Activate an entry.\n     *\n     * Reading a notification is implied by opening it, so activation marks it read\n     * as well — otherwise every app would have to remember to call both, and the\n     * unread badge would keep counting something the user already saw.\n     */\n    const activate = (item: NotificationItem): void => {\n        if (!item.read) onMarkRead?.(item.id);\n        onSelect?.(item);\n    };\n\n    const interactive = Boolean(onSelect || onMarkRead);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {(title || (onMarkAllRead && unreadCount > 0)) && (\n                <header className={styles.header}>\n                    {title ? (\n                        <h2 className={styles.title}>\n                            {title}\n                            {unreadCount > 0 && (\n                                <Badge variant=\"primary\" aria-label={`${unreadCount} não lidas`}>\n                                    {unreadCount}\n                                </Badge>\n                            )}\n                        </h2>\n                    ) : (\n                        <span />\n                    )}\n                    {onMarkAllRead && unreadCount > 0 && (\n                        <button\n                            type=\"button\"\n                            className={styles.headerAction}\n                            onClick={onMarkAllRead}\n                        >\n                            Marcar todas como lidas\n                        </button>\n                    )}\n                </header>\n            )}\n\n            {items.length === 0 ? (\n                (emptyState ?? <EmptyState title=\"Nenhuma notificação\" />)\n            ) : (\n                <ul className={styles.list}>\n                    {items.map((item) => (\n                        <li\n                            key={item.id}\n                            className={cn(styles.item, !item.read && styles.unread)}\n                            aria-current={!item.read ? \"true\" : undefined}\n                        >\n                            {renderIcon && <span className={styles.icon}>{renderIcon(item)}</span>}\n\n                            <div className={styles.body}>\n                                {interactive ? (\n                                    <button\n                                        type=\"button\"\n                                        className={styles.trigger}\n                                        onClick={() => activate(item)}\n                                    >\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </button>\n                                ) : (\n                                    <>\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </>\n                                )}\n                                <time\n                                    className={styles.time}\n                                    dateTime={new Date(item.receivedAt).toISOString()}\n                                >\n                                    {relativeTime(item.receivedAt, { locale, now: reference })}\n                                </time>\n                            </div>\n\n                            {onDismiss && (\n                                <button\n                                    type=\"button\"\n                                    className={styles.dismiss}\n                                    onClick={() => onDismiss(item.id)}\n                                    aria-label={`Descartar: ${item.title}`}\n                                >\n                                    ×\n                                </button>\n                            )}\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AA6EA,SAAgB,EAAmB,EAC/B,UACA,WAAQ,gBACR,aACA,eACA,kBACA,cACA,eACA,YAAS,SACT,eACA,QACA,cACA,GAAG,KACqB;CACxB,IAAM,IAAc,EAAM,QAAQ,MAAS,CAAC,EAAK,IAAI,CAAC,CAAC,QACjD,IAAY,sBAAO,IAAI,KAAK,EAAA,CAAE,QAAQ,GAStC,KAAY,MAAiC;EAE/C,AADK,EAAK,QAAM,IAAa,EAAK,EAAE,GACpC,IAAW,CAAI;CACnB,GAEM,IAAc,GAAQ,KAAY;CAExC,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,OAAO,CAAS;EAAG,GAAI;YAAjD,EACM,KAAU,KAAiB,IAAc,MACvC,kBAAC,UAAD;GAAQ,WAAW,EAAO;aAA1B,CACK,IACG,kBAAC,MAAD;IAAI,WAAW,EAAO;cAAtB,CACK,GACA,IAAc,KACX,kBAAC,GAAD;KAAO,SAAQ;KAAU,cAAY,GAAG,EAAY;eAC/C;IACE,CAAA,CAEX;QAEJ,kBAAC,QAAD,CAAO,CAAA,GAEV,KAAiB,IAAc,KAC5B,kBAAC,UAAD;IACI,MAAK;IACL,WAAW,EAAO;IAClB,SAAS;cACZ;GAEO,CAAA,CAER;MAGX,EAAM,WAAW,IACb,KAAc,kBAAC,GAAD,EAAY,OAAM,sBAAuB,CAAA,IAExD,kBAAC,MAAD;GAAI,WAAW,EAAO;aACjB,EAAM,KAAK,MACR,kBAAC,MAAD;IAEI,WAAW,EAAG,EAAO,MAAM,CAAC,EAAK,QAAQ,EAAO,MAAM;IACtD,gBAAe,EAAK,OAAgB,KAAA,IAAT;cAH/B;KAKK,KAAc,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAO,EAAW,CAAI;KAAQ,CAAA;KAErE,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACK,IACG,kBAAC,UAAD;OACI,MAAK;OACL,WAAW,EAAO;OAClB,eAAe,EAAS,CAAI;iBAHhC,CAKI,kBAAC,QAAD;QAAM,WAAW,EAAO;kBAAY,EAAK;OAAY,CAAA,GACpD,EAAK,QACF,kBAAC,QAAD;QAAM,WAAW,EAAO;kBAAW,EAAK;OAAW,CAAA,CAEnD;WAER,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAY,EAAK;MAAY,CAAA,GACpD,EAAK,QACF,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAW,EAAK;MAAW,CAAA,CAEzD,EAAA,CAAA,GAEN,kBAAC,QAAD;OACI,WAAW,EAAO;OAClB,UAAU,IAAI,KAAK,EAAK,UAAU,CAAC,CAAC,YAAY;iBAE/C,EAAa,EAAK,YAAY;QAAE;QAAQ,KAAK;OAAU,CAAC;MACvD,CAAA,CACL;;KAEJ,KACG,kBAAC,UAAD;MACI,MAAK;MACL,WAAW,EAAO;MAClB,eAAe,EAAU,EAAK,EAAE;MAChC,cAAY,cAAc,EAAK;gBAClC;KAEO,CAAA;IAEZ;MA5CK,EAAK,EA4CV,CACP;EACD,CAAA,CAEP;;AAEb"}

package/dist/components/NotificationCenter/NotificationCenter.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_panel_FdsVm`,t=`tempest_header_hEQNb`,n=`tempest_title_UJyzl`,r=`tempest_headerAction_A0T8e`,i=`tempest_list_Q23Lz`,a=`tempest_item_e-qev`,o=`tempest_unread_5bHa-`,s=`tempest_icon_W0eML`,c=`tempest_body_m3hfl`,l=`tempest_trigger_y7SuR`,u=`tempest_itemTitle_o7OXC`,d=`tempest_itemBody_KL7uZ`,f=`tempest_time_NLUQU`,p=`tempest_dismiss_74KRm`,m={panel:e,header:t,title:n,headerAction:r,list:i,item:a,unread:o,icon:s,body:c,trigger:l,itemTitle:u,itemBody:d,time:f,dismiss:p};exports.body=c,exports.default=m,exports.dismiss=p,exports.header=t,exports.headerAction=r,exports.icon=s,exports.item=a,exports.itemBody=d,exports.itemTitle=u,exports.list=i,exports.panel=e,exports.time=f,exports.title=n,exports.trigger=l,exports.unread=o;
+//# sourceMappingURL=NotificationCenter.module.cjs.map

package/dist/components/NotificationCenter/NotificationCenter.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.module.cjs","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.headerAction {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-primary);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.headerAction:hover {\n    text-decoration: underline;\n}\n\n.headerAction:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n}\n\n.item {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.item:last-child {\n    border-bottom: none;\n}\n\n/*\n * Unread is marked by a left bar plus a tinted background, never by colour alone\n * — the distinction has to survive a monochrome display and colour blindness.\n * `aria-current` on the row carries the same information non-visually.\n */\n.item.unread {\n    background-color: var(--tempest-surface);\n    box-shadow: inset 3px 0 0 0 var(--tempest-primary);\n}\n\n.icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2, var(--tempest-surface));\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The whole title/body block is one button so the hit target matches what the\n * user perceives as \"the notification\", instead of just its title text.\n */\n.trigger {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\n}\n\n.trigger:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.itemTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n}\n\n.itemBody {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.time {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.dismiss {\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .dismiss:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.dismiss:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n"],"mappings":""}