@zauru-sdk/components 6.10.0 → 6.11.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.11.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.10.0...@zauru-sdk/components@6.11.0) (2026-10-05)
+
+
+### Bug Fixes
+
+* asociar etiquetas del selector con su campo ([1626bbd](https://github.com/intuitiva/zauru-typescript-sdk/commit/1626bbdd58971c353bf03b07533a171a05ec8571))
+* identificar controles de la matriz de permisos ([472c956](https://github.com/intuitiva/zauru-typescript-sdk/commit/472c9565f2dc167e8566706f58c27ca55c6c9d09))
+* limitar altura de selecciones múltiples ([b0e578d](https://github.com/intuitiva/zauru-typescript-sdk/commit/b0e578df1d7ec2198abfd57515b6dc8409227c4d))
+
+
+### Features
+
+* exportar gestión de acceso de empleados ([df97155](https://github.com/intuitiva/zauru-typescript-sdk/commit/df97155d1370cdb624cc3ceb3905111a42edf65f))
+* exportar gestión de roles ([f0ee633](https://github.com/intuitiva/zauru-typescript-sdk/commit/f0ee63301583591b72faba93b8eab2d7ec8e735f))
+
+
+
+
+
 # [6.10.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.9.0...@zauru-sdk/components@6.10.0) (2026-10-05)
 
 

package/dist/AccessControl/WebappEmployeeAccess.d.ts

@@ -0,0 +1,36 @@
+import type { EmployeeGraphQL, WebAppRowGraphQL, WebappEmployeeRole, WebappRole } from "@zauru-sdk/types";
+import { type ReactNode } from "react";
+export type WebappEmployeeAssignmentChange<TAssignment extends WebappEmployeeRole> = {
+    employee: EmployeeGraphQL;
+    assignment?: WebAppRowGraphQL<TAssignment>;
+    roleId: number | null;
+};
+export type WebappEmployeeAssignmentDetails<TAssignment extends WebappEmployeeRole> = {
+    employee: EmployeeGraphQL;
+    assignment?: WebAppRowGraphQL<TAssignment>;
+    disabled: boolean;
+};
+type Props<TAssignment extends WebappEmployeeRole> = {
+    employees: EmployeeGraphQL[];
+    roles: WebAppRowGraphQL<WebappRole>[];
+    assignments: WebAppRowGraphQL<TAssignment>[];
+    canAssign?: boolean;
+    loading?: boolean;
+    description?: string;
+    superAdminLabel?: string;
+    addEmployeeTitle?: string;
+    addEmployeeDescription?: string;
+    noEmployeesToAddText?: string;
+    noRolesText?: string;
+    assignmentDetailsColumn?: {
+        name: string;
+        minWidth?: string;
+        grow?: number;
+    };
+    renderAssignmentDetails?: (details: WebappEmployeeAssignmentDetails<TAssignment>) => ReactNode;
+    superAdminEmailSuffixes?: readonly string[];
+    onAssignRole: (change: WebappEmployeeAssignmentChange<TAssignment>) => void;
+    onAddEmployee: (employeeId: number, roleId: number) => void;
+};
+export declare function WebappEmployeeAccess<TAssignment extends WebappEmployeeRole = WebappEmployeeRole>({ employees, roles, assignments, canAssign, loading, description, superAdminLabel, addEmployeeTitle, addEmployeeDescription, noEmployeesToAddText, noRolesText, assignmentDetailsColumn, renderAssignmentDetails, superAdminEmailSuffixes, onAssignRole, onAddEmployee, }: Props<TAssignment>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AccessControl/WebappRoleManagement.d.ts

@@ -0,0 +1,22 @@
+import type { WebAppRowGraphQL, WebappRole } from "@zauru-sdk/types";
+export type WebappRoleValues = {
+    name: string;
+    description: string;
+};
+type Props = {
+    roles: WebAppRowGraphQL<WebappRole>[];
+    canCreate?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    loading?: boolean;
+    createTitle?: string;
+    createButtonLabel?: string;
+    editTitle?: string;
+    deleteTitle?: string;
+    deleteDescription?: string;
+    onCreate: (values: WebappRoleValues) => void;
+    onUpdate: (roleId: number, values: WebappRoleValues) => void;
+    onDelete: (roleId: number) => void;
+};
+export declare function WebappRoleManagement({ roles, canCreate, canEdit, canDelete, loading, createTitle, createButtonLabel, editTitle, deleteTitle, deleteDescription, onCreate, onUpdate, onDelete, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/AccessControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./WebappEmployeeAccess.js";
+export * from "./WebappRoleManagement.js";

package/dist/esm/AccessControl/WebappEmployeeAccess.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isSuperAdminEmail } from "@zauru-sdk/utils";
+import { useMemo } from "react";
+import { z } from "zod";
+import { Button } from "../Buttons/Button.js";
+import { ButtonSectionContainer } from "../Containers/ButtonSectionContainer.js";
+import { DoubleFieldContainer } from "../Form/FieldContainer/DoubleFieldContainer.js";
+import { ReactZodForm } from "../Form/ReactZodForm/index.js";
+import { SelectField } from "../Form/SelectField/index.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+const addEmployeeSchema = z.object({
+    employee_id: z.coerce.number().min(1, "El empleado es requerido"),
+    role_id: z.coerce.number().min(1, "El rol es requerido"),
+});
+export function WebappEmployeeAccess({ employees, roles, assignments, canAssign = false, loading = false, description = "Solo aparecen quienes ya tienen acceso: rol asignado o super admin. Quitar el rol los saca de la lista.", superAdminLabel = "Super admin (todos los permisos)", addEmployeeTitle = "Agregar empleado", addEmployeeDescription = "Busca entre quienes aún no están en la lista y asígnales un rol.", noEmployeesToAddText = "No quedan empleados activos por agregar.", noRolesText = "Crea al menos un rol antes de agregar empleados.", assignmentDetailsColumn, renderAssignmentDetails, superAdminEmailSuffixes, onAssignRole, onAddEmployee, }) {
+    const roleOptions = useMemo(() => [
+        { value: "", label: "Sin rol" },
+        ...roles.map((role) => ({
+            value: String(role.id),
+            label: role.data.name,
+        })),
+    ], [roles]);
+    const addRoleOptions = useMemo(() => roles.map((role) => ({
+        value: String(role.id),
+        label: role.data.name,
+    })), [roles]);
+    const assignmentByEmployee = useMemo(() => {
+        const map = new Map();
+        for (const row of assignments) {
+            map.set(Number(row.data.employee_id), row);
+        }
+        return map;
+    }, [assignments]);
+    const listedEmployees = useMemo(() => employees
+        .filter((employee) => isSuperAdminEmail(employee.email, superAdminEmailSuffixes) ||
+        assignmentByEmployee.has(employee.id))
+        .sort((a, b) => a.name.localeCompare(b.name)), [assignmentByEmployee, employees, superAdminEmailSuffixes]);
+    const addEmployeeOptions = useMemo(() => {
+        const listedIds = new Set(listedEmployees.map((employee) => employee.id));
+        return employees
+            .filter((employee) => !listedIds.has(employee.id))
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((employee) => ({
+            value: employee.id,
+            label: employee.email
+                ? `${employee.name} (${employee.email})`
+                : employee.name,
+        }));
+    }, [employees, listedEmployees]);
+    const columns = [
+        {
+            name: "Empleado",
+            sortable: true,
+            grow: 1,
+            minWidth: "12rem",
+            selector: (employee) => employee.name,
+        },
+        {
+            name: "Email",
+            sortable: true,
+            grow: 1,
+            minWidth: "14rem",
+            selector: (employee) => employee.email || "—",
+        },
+        {
+            name: "Rol",
+            minWidth: "14rem",
+            cell: (employee) => {
+                const assignment = assignmentByEmployee.get(employee.id);
+                const superAdmin = isSuperAdminEmail(employee.email, superAdminEmailSuffixes);
+                const currentRole = assignment
+                    ? String(assignment.data.role_id)
+                    : "";
+                return (_jsx("div", { className: "w-56 py-2", children: superAdmin ? (_jsx("p", { className: "text-sm text-gray-600", children: superAdminLabel })) : (_jsx(SelectField, { name: `role_${employee.id}`, options: roleOptions, defaultValue: roleOptions.find((option) => option.value === currentRole) ?? roleOptions[0], disabled: !canAssign || loading, onChange: (option) => {
+                            const value = option?.value?.toString() ?? "";
+                            onAssignRole({
+                                employee,
+                                assignment,
+                                roleId: value ? Number(value) : null,
+                            });
+                        } })) }));
+            },
+        },
+        ...(assignmentDetailsColumn && renderAssignmentDetails
+            ? [
+                {
+                    name: assignmentDetailsColumn.name,
+                    minWidth: assignmentDetailsColumn.minWidth ?? "16rem",
+                    grow: assignmentDetailsColumn.grow ?? 1,
+                    cell: (employee) => {
+                        const assignment = assignmentByEmployee.get(employee.id);
+                        return renderAssignmentDetails({
+                            employee,
+                            assignment,
+                            disabled: !canAssign || !assignment || loading,
+                        });
+                    },
+                },
+            ]
+            : []),
+    ];
+    return (_jsxs("div", { className: "mt-4 space-y-6", children: [_jsx("p", { className: "text-sm text-gray-600", children: description }), _jsx(ZauruTable, { columns: columns, data: listedEmployees, loading: loading, offlineSearch: ["name", "email"] }), canAssign ? (roles.length === 0 ? (_jsx("p", { className: "text-sm text-gray-600", role: "status", children: noRolesText })) : addEmployeeOptions.length > 0 ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-white p-4", children: _jsxs(ReactZodForm, { schema: addEmployeeSchema, onSubmit: (values) => onAddEmployee(Number(values.employee_id), Number(values.role_id)), children: [_jsx("h2", { className: "text-base font-semibold text-gray-900", children: addEmployeeTitle }), _jsx("p", { className: "mb-4 mt-1 text-sm text-gray-600", children: addEmployeeDescription }), _jsxs(DoubleFieldContainer, { alignCenter: false, children: [_jsx(SelectField, { name: "employee_id", title: "Empleado", hint: "Escribe para filtrar por nombre o correo", options: addEmployeeOptions, required: true }), _jsx(SelectField, { name: "role_id", title: "Rol", options: addRoleOptions, required: true })] }), _jsx(ButtonSectionContainer, { children: _jsx(Button, { loading: loading, title: "Agregar" }) })] }) })) : (_jsx("p", { className: "text-sm text-gray-600", role: "status", children: noEmployeesToAddText }))) : null] }));
+}

package/dist/esm/AccessControl/WebappRoleManagement.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PencilSvg, TrashSvg } from "@zauru-sdk/icons";
+import { useSyncExternalStore } from "react";
+import { z } from "zod";
+import { Button } from "../Buttons/Button.js";
+import { ButtonSectionContainer } from "../Containers/ButtonSectionContainer.js";
+import { ReactZodForm } from "../Form/ReactZodForm/index.js";
+import { TextField } from "../Form/TextField/index.js";
+import { createModal } from "../Modal/Modal.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+const roleSchema = z.object({
+    name: z.string().min(1, "El nombre es requerido"),
+    description: z.string().optional(),
+});
+const subscribeToBrowser = () => () => undefined;
+const getBrowserSnapshot = () => true;
+const getServerSnapshot = () => false;
+export function WebappRoleManagement({ roles, canCreate = false, canEdit = false, canDelete = false, loading = false, createTitle = "Crear rol", createButtonLabel = "Crear rol", editTitle = "Editar rol", deleteTitle = "¿Eliminar este rol?", deleteDescription = "No se puede eliminar si hay empleados asignados.", onCreate, onUpdate, onDelete, }) {
+    const isClient = useSyncExternalStore(subscribeToBrowser, getBrowserSnapshot, getServerSnapshot);
+    const editRole = async (role) => {
+        let name = role.data.name;
+        let description = role.data.description ?? "";
+        const response = await createModal({
+            title: editTitle,
+            okButtonText: "Guardar",
+            description: (_jsxs(_Fragment, { children: [_jsx(TextField, { title: "Nombre", name: "name", defaultValue: name, onChange: (value) => {
+                            name = value;
+                        } }), _jsx(TextField, { className: "mt-4", title: "Descripci\u00F3n", name: "description", defaultValue: description, onChange: (value) => {
+                            description = value;
+                        } })] })),
+        });
+        if (response === "OK") {
+            onUpdate(role.id, { name, description });
+        }
+    };
+    const confirmDelete = async (roleId) => {
+        const response = await createModal({
+            title: deleteTitle,
+            description: deleteDescription,
+        });
+        if (response === "OK") {
+            onDelete(roleId);
+        }
+    };
+    const columns = [
+        {
+            name: "Nombre",
+            sortable: true,
+            grow: 1,
+            selector: (role) => role.data.name,
+        },
+        {
+            name: "Descripción",
+            grow: 2,
+            selector: (role) => role.data.description || "—",
+        },
+        {
+            name: "Permisos",
+            width: "8%",
+            selector: (role) => role.data.permission_keys?.length ?? 0,
+        },
+        {
+            name: "",
+            grow: 0,
+            minWidth: "90px",
+            maxWidth: "90px",
+            cell: (role) => (_jsxs("div", { className: "flex gap-2", children: [canDelete ? (_jsx("button", { type: "button", title: "Eliminar", "aria-label": `Eliminar rol ${role.data.name}`, disabled: loading, className: "cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", onClick: () => void confirmDelete(role.id), children: _jsx(TrashSvg, {}) })) : null, canEdit ? (_jsx("button", { type: "button", title: "Editar", "aria-label": `Editar rol ${role.data.name}`, disabled: loading, className: "cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", onClick: () => void editRole(role), children: _jsx(PencilSvg, {}) })) : null] })),
+        },
+    ];
+    if (!isClient) {
+        return null;
+    }
+    return (_jsxs("div", { className: "mt-4 space-y-6", children: [_jsx(ZauruTable, { columns: columns, data: [...roles].sort((a, b) => a.data.name.localeCompare(b.data.name)), loading: loading, offlineSearch: ["data.name", "data.description"] }), canCreate ? (_jsx("div", { className: "rounded-md border border-gray-200 bg-white p-4", children: _jsxs(ReactZodForm, { schema: roleSchema, onSubmit: (values) => onCreate({
+                        name: String(values.name ?? ""),
+                        description: String(values.description ?? ""),
+                    }), children: [_jsx("h2", { className: "mb-4 text-base font-semibold text-gray-900", children: createTitle }), _jsx(TextField, { name: "name", title: "Nombre del rol", required: true }), _jsx(TextField, { className: "mt-4", name: "description", title: "Descripci\u00F3n" }), _jsx(ButtonSectionContainer, { children: _jsx(Button, { loading: loading, title: createButtonLabel }) })] }) })) : null] }));
+}

package/dist/esm/AccessControl/index.js

@@ -0,0 +1,2 @@
+export * from "./WebappEmployeeAccess.js";
+export * from "./WebappRoleManagement.js";

package/dist/esm/Form/SelectField/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { IdeaIconSVG } from "@zauru-sdk/icons";
-import { useEffect, useState, useRef, useCallback, } from "react";
+import { useEffect, useState, useRef, useId, useCallback, } from "react";
 import { LoadingInputSkeleton } from "../../Skeletons/index.js";
 import { useFormContext } from "react-hook-form";
 // Simple comparison helper to check if two SelectFieldOption arrays contain the
@@ -30,6 +30,10 @@ export const SelectField = (props) => {
     const lastSyncedDefaultValues = useRef(defaultValueMulti.map((option) => option.value));
     const [isTabPressed, setIsTabPressed] = useState(false);
     const [isSearching, setIsSearching] = useState(false);
+    const generatedInputId = useId();
+    const inputId = id ?? (name ? `${name}-input` : generatedInputId);
+    const errorId = `${inputId}-error`;
+    const hintId = `${inputId}-hint`;
     // Use refs to store stable references to callbacks
     const onChangeRef = useRef(onChange);
     const onChangeMultiRef = useRef(onChangeMulti);
@@ -275,11 +279,13 @@ export const SelectField = (props) => {
         options,
     ]);
     if (loading) {
-        return (_jsxs(_Fragment, { children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _jsx(LoadingInputSkeleton, {}), helpText && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
+        return (_jsxs(_Fragment, { children: [title && (_jsx("span", { className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _jsx(LoadingInputSkeleton, {}), helpText && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
     }
-    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && (_jsxs("label", { htmlFor: inputId, className: `block text-sm font-medium ${color === "red"
                     ? "text-red-700 dark:text-red-500"
-                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("input", { type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm pr-10`, placeholder: isMulti ? "Select options..." : "Select an option...", autoComplete: "off", onChange: handleInputChange, onBlur: handleBlur, required: required }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), _jsx("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
+                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("input", { type: "text", id: inputId, value: inputValue, onFocus: () => setIsOpen(true), onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm pr-10`, placeholder: isMulti ? "Select options..." : "Select an option...", autoComplete: "off", onChange: handleInputChange, onBlur: handleBlur, required: required, "aria-invalid": Boolean(error), "aria-describedby": error ? errorId : hint ? hintId : undefined }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, "aria-label": isMulti
+                                    ? "Limpiar todas las opciones seleccionadas"
+                                    : "Limpiar la opción seleccionada", className: "absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-600 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2", children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), _jsx("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
                             ? valueMulti.map((v) => v.value).join(",")
                             : value?.value || "" }), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => {
                             const isDisabled = Boolean(option.disabled);
@@ -294,5 +300,5 @@ export const SelectField = (props) => {
                                         : index === highlightedIndex
                                             ? "cursor-pointer text-black bg-sky-200"
                                             : "cursor-pointer text-gray-900"}`, onClick: () => !isDisabled && handleOptionClick(option), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), onMouseLeave: () => setHighlightedIndex(-1), children: [option.label, isDisabled && disabledLabel && (_jsxs("span", { className: "ml-2 text-xs text-gray-400", children: ["(", disabledLabel, ")"] }))] }, `${option.value}-${index}`));
-                        }) }))] }), isMulti && valueMulti.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: valueMulti.map((option, index) => (_jsxs("span", { className: "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded", children: [option.label, _jsx("button", { type: "button", onClick: () => handleRemoveMultiValue(option), className: "ml-1 text-blue-600 hover:text-blue-800", children: "\u00D7" })] }, `${option.value}-${index}`))) })), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error?.message?.toString() || "Error desconocido"] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+                        }) }))] }), isMulti && valueMulti.length > 0 && (_jsx("ul", { className: "mt-2 flex max-h-20 flex-wrap gap-1.5 overflow-auto overscroll-contain rounded-md border border-blue-100 bg-blue-50/40 p-1.5", "aria-label": "Opciones seleccionadas", children: valueMulti.map((option, index) => (_jsxs("li", { className: "inline-flex max-w-full shrink-0 items-center rounded bg-blue-100 py-0.5 pl-2.5 pr-0.5 text-xs font-semibold text-blue-800", children: [_jsx("span", { className: "whitespace-nowrap", children: option.label }), _jsx("button", { type: "button", onClick: () => handleRemoveMultiValue(option), "aria-label": `Quitar ${option.label}`, className: "ml-1 inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded text-blue-700 hover:bg-blue-200 hover:text-blue-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1", children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })] }, `${option.value}-${index}`))) })), error && (_jsxs("p", { id: errorId, className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error?.message?.toString() || "Error desconocido"] })), !error && hint && (_jsx("p", { id: hintId, className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
 };

package/dist/esm/Tab/PermissionMatrix.js

@@ -22,7 +22,7 @@ function GroupRows({ group, roles, sectionKeys, disabled, pendingCells, onToggle
                         const granted = role.permissionKeys.includes(action.key);
                         const cellKey = permissionMatrixCellKey(role.id, action.key);
                         const pending = pendingCells?.has(cellKey) ?? false;
-                        return (_jsx("td", { className: "border-b border-l border-gray-100 px-3 py-2 text-center", children: _jsx("input", { type: "checkbox", className: checkboxClass, checked: granted, disabled: disabled || pending, "aria-label": `${role.name}: ${action.label}`, onChange: () => onToggle(role.id, action.key, !granted) }) }, role.id));
+                        return (_jsx("td", { className: "border-b border-l border-gray-100 px-3 py-2 text-center", children: _jsx("input", { type: "checkbox", id: `permission-${role.id}-${action.key}`, name: `permission-${role.id}-${action.key}`, className: checkboxClass, checked: granted, disabled: disabled || pending, "aria-label": `${role.name}: ${action.label}`, onChange: () => onToggle(role.id, action.key, !granted) }) }, role.id));
                     })] }, action.key))), onBulkSection ? (_jsxs("tr", { children: [_jsx("td", { className: "sticky left-0 z-10 border-b border-gray-200 bg-white px-3 py-1 text-xs text-gray-500", children: "Secci\u00F3n" }), roles.map((role) => {
                         const sectionGranted = sectionKeys.every((key) => role.permissionKeys.includes(key));
                         return (_jsx("td", { className: "border-b border-l border-gray-200 px-3 py-1 text-center", children: _jsx("button", { type: "button", className: "cursor-pointer text-xs font-medium text-indigo-700 hover:text-indigo-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded disabled:cursor-not-allowed disabled:opacity-50", disabled: disabled, onClick: () => onBulkSection(role.id, group.id, sectionGranted ? "remove" : "add"), children: sectionGranted ? "Quitar sección" : "Marcar sección" }) }, role.id));

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export * from "./Alerts/index.js";
+export * from "./AccessControl/index.js";
 export * from "./BlockUI/index.js";
 export * from "./Buttons/index.js";
 export * from "./Card/index.js";

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./Alerts/index.js";
+export * from "./AccessControl/index.js";
 export * from "./BlockUI/index.js";
 export * from "./Buttons/index.js";
 export * from "./Card/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.10.0",
+  "version": "6.11.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "a3c1f2af46acb59cf9fcb78ecb18d904e33c61e5"
+  "gitHead": "885c1d44afb4c5717ae823664b37ac48b30283db"
 }

package/src/AccessControl/WebappEmployeeAccess.tsx

@@ -0,0 +1,275 @@
+import type {
+  EmployeeGraphQL,
+  SelectFieldOption,
+  WebAppRowGraphQL,
+  WebappEmployeeRole,
+  WebappRole,
+} from "@zauru-sdk/types";
+import { isSuperAdminEmail } from "@zauru-sdk/utils";
+import { useMemo, type ReactNode } from "react";
+import { z } from "zod";
+import { Button } from "../Buttons/Button.js";
+import { ButtonSectionContainer } from "../Containers/ButtonSectionContainer.js";
+import { DoubleFieldContainer } from "../Form/FieldContainer/DoubleFieldContainer.js";
+import { ReactZodForm } from "../Form/ReactZodForm/index.js";
+import { SelectField } from "../Form/SelectField/index.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+
+const addEmployeeSchema = z.object({
+  employee_id: z.coerce.number().min(1, "El empleado es requerido"),
+  role_id: z.coerce.number().min(1, "El rol es requerido"),
+});
+
+export type WebappEmployeeAssignmentChange<
+  TAssignment extends WebappEmployeeRole,
+> = {
+  employee: EmployeeGraphQL;
+  assignment?: WebAppRowGraphQL<TAssignment>;
+  roleId: number | null;
+};
+
+export type WebappEmployeeAssignmentDetails<
+  TAssignment extends WebappEmployeeRole,
+> = {
+  employee: EmployeeGraphQL;
+  assignment?: WebAppRowGraphQL<TAssignment>;
+  disabled: boolean;
+};
+
+type Props<TAssignment extends WebappEmployeeRole> = {
+  employees: EmployeeGraphQL[];
+  roles: WebAppRowGraphQL<WebappRole>[];
+  assignments: WebAppRowGraphQL<TAssignment>[];
+  canAssign?: boolean;
+  loading?: boolean;
+  description?: string;
+  superAdminLabel?: string;
+  addEmployeeTitle?: string;
+  addEmployeeDescription?: string;
+  noEmployeesToAddText?: string;
+  noRolesText?: string;
+  assignmentDetailsColumn?: {
+    name: string;
+    minWidth?: string;
+    grow?: number;
+  };
+  renderAssignmentDetails?: (
+    details: WebappEmployeeAssignmentDetails<TAssignment>,
+  ) => ReactNode;
+  superAdminEmailSuffixes?: readonly string[];
+  onAssignRole: (
+    change: WebappEmployeeAssignmentChange<TAssignment>,
+  ) => void;
+  onAddEmployee: (employeeId: number, roleId: number) => void;
+};
+
+export function WebappEmployeeAccess<
+  TAssignment extends WebappEmployeeRole = WebappEmployeeRole,
+>({
+  employees,
+  roles,
+  assignments,
+  canAssign = false,
+  loading = false,
+  description =
+    "Solo aparecen quienes ya tienen acceso: rol asignado o super admin. Quitar el rol los saca de la lista.",
+  superAdminLabel = "Super admin (todos los permisos)",
+  addEmployeeTitle = "Agregar empleado",
+  addEmployeeDescription =
+    "Busca entre quienes aún no están en la lista y asígnales un rol.",
+  noEmployeesToAddText = "No quedan empleados activos por agregar.",
+  noRolesText = "Crea al menos un rol antes de agregar empleados.",
+  assignmentDetailsColumn,
+  renderAssignmentDetails,
+  superAdminEmailSuffixes,
+  onAssignRole,
+  onAddEmployee,
+}: Props<TAssignment>) {
+  const roleOptions: SelectFieldOption[] = useMemo(
+    () => [
+      { value: "", label: "Sin rol" },
+      ...roles.map((role) => ({
+        value: String(role.id),
+        label: role.data.name,
+      })),
+    ],
+    [roles],
+  );
+
+  const addRoleOptions: SelectFieldOption[] = useMemo(
+    () =>
+      roles.map((role) => ({
+        value: String(role.id),
+        label: role.data.name,
+      })),
+    [roles],
+  );
+
+  const assignmentByEmployee = useMemo(() => {
+    const map = new Map<number, WebAppRowGraphQL<TAssignment>>();
+    for (const row of assignments) {
+      map.set(Number(row.data.employee_id), row);
+    }
+    return map;
+  }, [assignments]);
+
+  const listedEmployees = useMemo(
+    () =>
+      employees
+        .filter(
+          (employee) =>
+            isSuperAdminEmail(employee.email, superAdminEmailSuffixes) ||
+            assignmentByEmployee.has(employee.id),
+        )
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [assignmentByEmployee, employees, superAdminEmailSuffixes],
+  );
+
+  const addEmployeeOptions: SelectFieldOption[] = useMemo(() => {
+    const listedIds = new Set(listedEmployees.map((employee) => employee.id));
+    return employees
+      .filter((employee) => !listedIds.has(employee.id))
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((employee) => ({
+        value: employee.id,
+        label: employee.email
+          ? `${employee.name} (${employee.email})`
+          : employee.name,
+      }));
+  }, [employees, listedEmployees]);
+
+  const columns = [
+    {
+      name: "Empleado",
+      sortable: true,
+      grow: 1,
+      minWidth: "12rem",
+      selector: (employee: EmployeeGraphQL) => employee.name,
+    },
+    {
+      name: "Email",
+      sortable: true,
+      grow: 1,
+      minWidth: "14rem",
+      selector: (employee: EmployeeGraphQL) => employee.email || "—",
+    },
+    {
+      name: "Rol",
+      minWidth: "14rem",
+      cell: (employee: EmployeeGraphQL) => {
+        const assignment = assignmentByEmployee.get(employee.id);
+        const superAdmin = isSuperAdminEmail(
+          employee.email,
+          superAdminEmailSuffixes,
+        );
+        const currentRole = assignment
+          ? String(assignment.data.role_id)
+          : "";
+
+        return (
+          <div className="w-56 py-2">
+            {superAdmin ? (
+              <p className="text-sm text-gray-600">{superAdminLabel}</p>
+            ) : (
+              <SelectField
+                name={`role_${employee.id}`}
+                options={roleOptions}
+                defaultValue={
+                  roleOptions.find(
+                    (option) => option.value === currentRole,
+                  ) ?? roleOptions[0]
+                }
+                disabled={!canAssign || loading}
+                onChange={(option) => {
+                  const value = option?.value?.toString() ?? "";
+                  onAssignRole({
+                    employee,
+                    assignment,
+                    roleId: value ? Number(value) : null,
+                  });
+                }}
+              />
+            )}
+          </div>
+        );
+      },
+    },
+    ...(assignmentDetailsColumn && renderAssignmentDetails
+      ? [
+          {
+            name: assignmentDetailsColumn.name,
+            minWidth: assignmentDetailsColumn.minWidth ?? "16rem",
+            grow: assignmentDetailsColumn.grow ?? 1,
+            cell: (employee: EmployeeGraphQL) => {
+              const assignment = assignmentByEmployee.get(employee.id);
+              return renderAssignmentDetails({
+                employee,
+                assignment,
+                disabled: !canAssign || !assignment || loading,
+              });
+            },
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <div className="mt-4 space-y-6">
+      <p className="text-sm text-gray-600">{description}</p>
+      <ZauruTable
+        columns={columns}
+        data={listedEmployees}
+        loading={loading}
+        offlineSearch={["name", "email"]}
+      />
+      {canAssign ? (
+        roles.length === 0 ? (
+          <p className="text-sm text-gray-600" role="status">
+            {noRolesText}
+          </p>
+        ) : addEmployeeOptions.length > 0 ? (
+          <div className="rounded-md border border-gray-200 bg-white p-4">
+            <ReactZodForm
+              schema={addEmployeeSchema}
+              onSubmit={(values) =>
+                onAddEmployee(
+                  Number(values.employee_id),
+                  Number(values.role_id),
+                )
+              }
+            >
+              <h2 className="text-base font-semibold text-gray-900">
+                {addEmployeeTitle}
+              </h2>
+              <p className="mb-4 mt-1 text-sm text-gray-600">
+                {addEmployeeDescription}
+              </p>
+              <DoubleFieldContainer alignCenter={false}>
+                <SelectField
+                  name="employee_id"
+                  title="Empleado"
+                  hint="Escribe para filtrar por nombre o correo"
+                  options={addEmployeeOptions}
+                  required
+                />
+                <SelectField
+                  name="role_id"
+                  title="Rol"
+                  options={addRoleOptions}
+                  required
+                />
+              </DoubleFieldContainer>
+              <ButtonSectionContainer>
+                <Button loading={loading} title="Agregar" />
+              </ButtonSectionContainer>
+            </ReactZodForm>
+          </div>
+        ) : (
+          <p className="text-sm text-gray-600" role="status">
+            {noEmployeesToAddText}
+          </p>
+        )
+      ) : null}
+    </div>
+  );
+}

package/src/AccessControl/WebappRoleManagement.tsx

@@ -0,0 +1,207 @@
+import { PencilSvg, TrashSvg } from "@zauru-sdk/icons";
+import type {
+  WebAppRowGraphQL,
+  WebappRole,
+} from "@zauru-sdk/types";
+import { useSyncExternalStore } from "react";
+import { z } from "zod";
+import { Button } from "../Buttons/Button.js";
+import { ButtonSectionContainer } from "../Containers/ButtonSectionContainer.js";
+import { ReactZodForm } from "../Form/ReactZodForm/index.js";
+import { TextField } from "../Form/TextField/index.js";
+import { createModal } from "../Modal/Modal.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+
+const roleSchema = z.object({
+  name: z.string().min(1, "El nombre es requerido"),
+  description: z.string().optional(),
+});
+
+const subscribeToBrowser = () => () => undefined;
+const getBrowserSnapshot = () => true;
+const getServerSnapshot = () => false;
+
+export type WebappRoleValues = {
+  name: string;
+  description: string;
+};
+
+type Props = {
+  roles: WebAppRowGraphQL<WebappRole>[];
+  canCreate?: boolean;
+  canEdit?: boolean;
+  canDelete?: boolean;
+  loading?: boolean;
+  createTitle?: string;
+  createButtonLabel?: string;
+  editTitle?: string;
+  deleteTitle?: string;
+  deleteDescription?: string;
+  onCreate: (values: WebappRoleValues) => void;
+  onUpdate: (roleId: number, values: WebappRoleValues) => void;
+  onDelete: (roleId: number) => void;
+};
+
+export function WebappRoleManagement({
+  roles,
+  canCreate = false,
+  canEdit = false,
+  canDelete = false,
+  loading = false,
+  createTitle = "Crear rol",
+  createButtonLabel = "Crear rol",
+  editTitle = "Editar rol",
+  deleteTitle = "¿Eliminar este rol?",
+  deleteDescription = "No se puede eliminar si hay empleados asignados.",
+  onCreate,
+  onUpdate,
+  onDelete,
+}: Props) {
+  const isClient = useSyncExternalStore(
+    subscribeToBrowser,
+    getBrowserSnapshot,
+    getServerSnapshot,
+  );
+
+  const editRole = async (role: WebAppRowGraphQL<WebappRole>) => {
+    let name = role.data.name;
+    let description = role.data.description ?? "";
+    const response = await createModal({
+      title: editTitle,
+      okButtonText: "Guardar",
+      description: (
+        <>
+          <TextField
+            title="Nombre"
+            name="name"
+            defaultValue={name}
+            onChange={(value) => {
+              name = value;
+            }}
+          />
+          <TextField
+            className="mt-4"
+            title="Descripción"
+            name="description"
+            defaultValue={description}
+            onChange={(value) => {
+              description = value;
+            }}
+          />
+        </>
+      ),
+    });
+
+    if (response === "OK") {
+      onUpdate(role.id, { name, description });
+    }
+  };
+
+  const confirmDelete = async (roleId: number) => {
+    const response = await createModal({
+      title: deleteTitle,
+      description: deleteDescription,
+    });
+    if (response === "OK") {
+      onDelete(roleId);
+    }
+  };
+
+  const columns = [
+    {
+      name: "Nombre",
+      sortable: true,
+      grow: 1,
+      selector: (role: WebAppRowGraphQL<WebappRole>) => role.data.name,
+    },
+    {
+      name: "Descripción",
+      grow: 2,
+      selector: (role: WebAppRowGraphQL<WebappRole>) =>
+        role.data.description || "—",
+    },
+    {
+      name: "Permisos",
+      width: "8%",
+      selector: (role: WebAppRowGraphQL<WebappRole>) =>
+        role.data.permission_keys?.length ?? 0,
+    },
+    {
+      name: "",
+      grow: 0,
+      minWidth: "90px",
+      maxWidth: "90px",
+      cell: (role: WebAppRowGraphQL<WebappRole>) => (
+        <div className="flex gap-2">
+          {canDelete ? (
+            <button
+              type="button"
+              title="Eliminar"
+              aria-label={`Eliminar rol ${role.data.name}`}
+              disabled={loading}
+              className="cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              onClick={() => void confirmDelete(role.id)}
+            >
+              <TrashSvg />
+            </button>
+          ) : null}
+          {canEdit ? (
+            <button
+              type="button"
+              title="Editar"
+              aria-label={`Editar rol ${role.data.name}`}
+              disabled={loading}
+              className="cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              onClick={() => void editRole(role)}
+            >
+              <PencilSvg />
+            </button>
+          ) : null}
+        </div>
+      ),
+    },
+  ];
+
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <div className="mt-4 space-y-6">
+      <ZauruTable
+        columns={columns}
+        data={[...roles].sort((a, b) =>
+          a.data.name.localeCompare(b.data.name),
+        )}
+        loading={loading}
+        offlineSearch={["data.name", "data.description"]}
+      />
+      {canCreate ? (
+        <div className="rounded-md border border-gray-200 bg-white p-4">
+          <ReactZodForm
+            schema={roleSchema}
+            onSubmit={(values) =>
+              onCreate({
+                name: String(values.name ?? ""),
+                description: String(values.description ?? ""),
+              })
+            }
+          >
+            <h2 className="mb-4 text-base font-semibold text-gray-900">
+              {createTitle}
+            </h2>
+            <TextField name="name" title="Nombre del rol" required />
+            <TextField
+              className="mt-4"
+              name="description"
+              title="Descripción"
+            />
+            <ButtonSectionContainer>
+              <Button loading={loading} title={createButtonLabel} />
+            </ButtonSectionContainer>
+          </ReactZodForm>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/AccessControl/index.ts

@@ -0,0 +1,2 @@
+export * from "./WebappEmployeeAccess.js";
+export * from "./WebappRoleManagement.js";

package/src/Form/SelectField/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useState,
   useRef,
+  useId,
   KeyboardEvent,
   useCallback,
 } from "react";
@@ -89,6 +90,10 @@ export const SelectField = (props: Props) => {
   );
   const [isTabPressed, setIsTabPressed] = useState<boolean>(false);
   const [isSearching, setIsSearching] = useState<boolean>(false);
+  const generatedInputId = useId();
+  const inputId = id ?? (name ? `${name}-input` : generatedInputId);
+  const errorId = `${inputId}-error`;
+  const hintId = `${inputId}-hint`;
 
   // Use refs to store stable references to callbacks
   const onChangeRef = useRef(onChange);
@@ -409,12 +414,11 @@ export const SelectField = (props: Props) => {
     return (
       <>
         {title && (
-          <label
-            htmlFor={error ? `${name}-error` : `${name}-success`}
+          <span
             className={`block text-sm font-medium text-${color}-700 dark:text-${color}-500`}
           >
             {title}
-          </label>
+          </span>
         )}
         <LoadingInputSkeleton />
         {helpText && (
@@ -432,7 +436,7 @@ export const SelectField = (props: Props) => {
     <div className={`col-span-6 sm:col-span-3 ${className}`} ref={selectRef}>
       {title && (
         <label
-          htmlFor={error ? `${name}-error` : `${name}-success`}
+          htmlFor={inputId}
           className={`block text-sm font-medium ${
             color === "red"
               ? "text-red-700 dark:text-red-500"
@@ -447,7 +451,7 @@ export const SelectField = (props: Props) => {
         <div className="flex items-center">
           <input
             type="text"
-            id={id}
+            id={inputId}
             value={inputValue}
             onFocus={() => setIsOpen(true)}
             onKeyDown={handleKeyDown}
@@ -459,14 +463,21 @@ export const SelectField = (props: Props) => {
             onChange={handleInputChange}
             onBlur={handleBlur}
             required={required}
+            aria-invalid={Boolean(error)}
+            aria-describedby={error ? errorId : hint ? hintId : undefined}
           />
           {isClearable && (value || valueMulti.length > 0) && (
             <button
               type="button"
               onClick={handleClear}
-              className="absolute inset-y-0 right-0 pr-3 flex items-center"
+              aria-label={
+                isMulti
+                  ? "Limpiar todas las opciones seleccionadas"
+                  : "Limpiar la opción seleccionada"
+              }
+              className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-600 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
             >
-              ×
+              <span aria-hidden="true">×</span>
             </button>
           )}
           {helpText && (
@@ -542,32 +553,40 @@ export const SelectField = (props: Props) => {
         )}
       </div>
       {isMulti && valueMulti.length > 0 && (
-        <div className="mt-2 flex flex-wrap gap-2">
+        <ul
+          className="mt-2 flex max-h-20 flex-wrap gap-1.5 overflow-auto overscroll-contain rounded-md border border-blue-100 bg-blue-50/40 p-1.5"
+          aria-label="Opciones seleccionadas"
+        >
           {valueMulti.map((option, index) => (
-            <span
+            <li
               key={`${option.value}-${index}`}
-              className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded"
+              className="inline-flex max-w-full shrink-0 items-center rounded bg-blue-100 py-0.5 pl-2.5 pr-0.5 text-xs font-semibold text-blue-800"
             >
-              {option.label}
+              <span className="whitespace-nowrap">{option.label}</span>
               <button
                 type="button"
                 onClick={() => handleRemoveMultiValue(option)}
-                className="ml-1 text-blue-600 hover:text-blue-800"
+                aria-label={`Quitar ${option.label}`}
+                className="ml-1 inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded text-blue-700 hover:bg-blue-200 hover:text-blue-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
               >
-                ×
+                <span aria-hidden="true">×</span>
               </button>
-            </span>
+            </li>
           ))}
-        </div>
+        </ul>
       )}
       {error && (
-        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
+        <p
+          id={errorId}
+          className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}
+        >
           <span className="font-medium">Oops!</span>{" "}
           {error?.message?.toString() || "Error desconocido"}
         </p>
       )}
       {!error && hint && (
         <p
+          id={hintId}
           className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
         >
           {hint}

package/src/Tab/PermissionMatrix.tsx

@@ -174,6 +174,8 @@ function GroupRows({
               >
                 <input
                   type="checkbox"
+                  id={`permission-${role.id}-${action.key}`}
+                  name={`permission-${role.id}-${action.key}`}
                   className={checkboxClass}
                   checked={granted}
                   disabled={disabled || pending}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./Alerts/index.js";
+export * from "./AccessControl/index.js";
 export * from "./BlockUI/index.js";
 export * from "./Buttons/index.js";
 export * from "./Card/index.js";