@doscientos/ui 0.1.9 → 0.1.11

package/README.md

@@ -2,13 +2,13 @@
 
 Primitives React accesibles, rápidas y temables para los productos de Doscientos. No depende de Next.js, Astro, router, backend ni estado de datos.
 
-## Alcance de la primera versión
+## Alcance
 
-- Tokens CSS del backoffice y tema claro/oscuro.
-- Controles: botón, input, textarea, label, badge, separadores, atajos de teclado y skeleton.
-- Formularios: `Field`, descripción y errores accesibles.
-- Navegación y overlays: tabs, tooltip, popover, `Dialog` y `ConfirmDialog` controlado.
-- Búsqueda: `Combobox` composable sobre React Aria y `HighlightMatch` sin distinción de mayúsculas o acentos.
+- Foundations: tokens CSS, tema claro/oscuro y utilidades de clases y texto.
+- Controles y formularios: botones, campos, selección, feedback, búsqueda y validación accesible.
+- Navegación y overlays: tabs, menús, breadcrumbs, tooltip, popover, dialogs y drawers.
+- Datos y estados: tablas, cards, avatares, badges, skeletons, alertas y estados vacíos.
+- Patrones de aplicación: shell, sidebar, cabeceras, toolbars, paginación, toasts y carga.
 - Hooks: debounce, cambios no guardados y autosave sin acoplamiento a transporte o datos.
 
 Los componentes de dominio, llamadas API, navegación, toasts y layouts permanecen en cada aplicación.

package/dist/index.cjs

@@ -439,15 +439,31 @@ function AppShellContent({
 var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var sizes = { xs: "size-5 text-[10px]", sm: "size-6 text-xs", default: "size-8 text-sm", lg: "size-10 text-base" };
-function Avatar({ className, size = "default", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex shrink-0 overflow-hidden rounded-full bg-muted text-muted-foreground", sizes[size], className), ...props });
+var AvatarContext = (0, import_react4.createContext)(null);
+function Avatar({ className, size = "default", children, ...props }) {
+  const [status, setStatus] = (0, import_react4.useState)("idle");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvatarContext.Provider, { value: { status, setStatus }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex shrink-0 overflow-hidden rounded-full bg-muted text-muted-foreground", sizes[size], className), ...props, children }) });
 }
-function AvatarImage({ className, ...props }) {
+function AvatarImage({ className, src, onError, onLoad, ...props }) {
+  const avatar = (0, import_react4.useContext)(AvatarContext);
   const [failed, setFailed] = (0, import_react4.useState)(false);
-  if (failed) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { "data-slot": "avatar-image", className: cn("aspect-square size-full object-cover", className), onError: () => setFailed(true), ...props });
+  (0, import_react4.useEffect)(() => {
+    setFailed(false);
+    avatar?.setStatus(src ? "loading" : "idle");
+  }, [avatar?.setStatus, src]);
+  if (failed || avatar?.status === "error") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { "data-slot": "avatar-image", src, className: cn("aspect-square size-full object-cover", className), onLoad: (event) => {
+    avatar?.setStatus("loaded");
+    onLoad?.(event);
+  }, onError: (event) => {
+    setFailed(true);
+    avatar?.setStatus("error");
+    onError?.(event);
+  }, ...props });
 }
 function AvatarFallback({ className, ...props }) {
+  const avatar = (0, import_react4.useContext)(AvatarContext);
+  if (avatar?.status === "loaded") return null;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center font-medium", className), ...props });
 }
 function AvatarBadge({ className, ...props }) {