@doscientos/ui 0.1.9 → 0.1.10

package/dist/index.d.cts

@@ -86,9 +86,9 @@ declare function AppShellContent({ className, size, padded, scrollable, ...props
 type AvatarProps = React.ComponentProps<"div"> & {
     size?: "xs" | "sm" | "default" | "lg";
 };
-declare function Avatar({ className, size, ...props }: AvatarProps): react.JSX.Element;
-declare function AvatarImage({ className, ...props }: React.ComponentProps<"img">): react.JSX.Element | null;
-declare function AvatarFallback({ className, ...props }: React.ComponentProps<"span">): react.JSX.Element;
+declare function Avatar({ className, size, children, ...props }: AvatarProps): react.JSX.Element;
+declare function AvatarImage({ className, src, onError, onLoad, ...props }: React.ComponentProps<"img">): react.JSX.Element | null;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<"span">): react.JSX.Element | null;
 declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): react.JSX.Element;
 declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): react.JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"span">): react.JSX.Element;

package/dist/index.d.ts

@@ -86,9 +86,9 @@ declare function AppShellContent({ className, size, padded, scrollable, ...props
 type AvatarProps = React.ComponentProps<"div"> & {
     size?: "xs" | "sm" | "default" | "lg";
 };
-declare function Avatar({ className, size, ...props }: AvatarProps): react.JSX.Element;
-declare function AvatarImage({ className, ...props }: React.ComponentProps<"img">): react.JSX.Element | null;
-declare function AvatarFallback({ className, ...props }: React.ComponentProps<"span">): react.JSX.Element;
+declare function Avatar({ className, size, children, ...props }: AvatarProps): react.JSX.Element;
+declare function AvatarImage({ className, src, onError, onLoad, ...props }: React.ComponentProps<"img">): react.JSX.Element | null;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<"span">): react.JSX.Element | null;
 declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): react.JSX.Element;
 declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): react.JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"span">): react.JSX.Element;

package/dist/index.js

@@ -256,18 +256,34 @@ function AppShellContent({
 }
 
 // src/ui/avatar/avatar.tsx
-import { useState as useState4 } from "react";
+import { createContext, useContext, useEffect as useEffect3, useState as useState4 } from "react";
 import { jsx as jsx4 } from "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__ */ jsx4("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 = createContext(null);
+function Avatar({ className, size = "default", children, ...props }) {
+  const [status, setStatus] = useState4("idle");
+  return /* @__PURE__ */ jsx4(AvatarContext.Provider, { value: { status, setStatus }, children: /* @__PURE__ */ jsx4("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 = useContext(AvatarContext);
   const [failed, setFailed] = useState4(false);
-  if (failed) return null;
-  return /* @__PURE__ */ jsx4("img", { "data-slot": "avatar-image", className: cn("aspect-square size-full object-cover", className), onError: () => setFailed(true), ...props });
+  useEffect3(() => {
+    setFailed(false);
+    avatar?.setStatus(src ? "loading" : "idle");
+  }, [avatar?.setStatus, src]);
+  if (failed || avatar?.status === "error") return null;
+  return /* @__PURE__ */ jsx4("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 = useContext(AvatarContext);
+  if (avatar?.status === "loaded") return null;
   return /* @__PURE__ */ jsx4("span", { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center font-medium", className), ...props });
 }
 function AvatarBadge({ className, ...props }) {
@@ -663,7 +679,7 @@ function FieldError2({ className, children, ...props }) {
 }
 
 // src/ui/form-feedback/form-feedback.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState6 } from "react";
 import { CheckCircle, LoaderCircle, CircleAlert } from "lucide-react";
 import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 function useFormFeedback(options) {
@@ -674,7 +690,7 @@ function useFormFeedback(options) {
     if (timer.current) clearTimeout(timer.current);
     timer.current = null;
   }, []);
-  useEffect3(() => () => clearTimer(), [clearTimer]);
+  useEffect4(() => () => clearTimer(), [clearTimer]);
   const setPending = useCallback3(() => {
     clearTimer();
     setState({ status: "pending" });
@@ -1015,16 +1031,16 @@ import {
   Search
 } from "lucide-react";
 import {
-  createContext,
-  useContext,
+  createContext as createContext2,
+  useContext as useContext2,
   useMemo as useMemo2,
   useState as useState7
 } from "react";
 import { Link as Link2 } from "react-aria-components";
 import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs13 } from "react/jsx-runtime";
-var SidebarContext = createContext(null);
+var SidebarContext = createContext2(null);
 function useSidebar() {
-  const context = useContext(SidebarContext);
+  const context = useContext2(SidebarContext);
   if (!context)
     throw new Error("useSidebar must be used inside SidebarProvider");
   return context;
@@ -1385,7 +1401,7 @@ function TabsContent({ className, ...props }) {
 }
 
 // src/ui/toast/toast.tsx
-import { useEffect as useEffect4, useSyncExternalStore } from "react";
+import { useEffect as useEffect5, useSyncExternalStore } from "react";
 import { CheckCircle as CheckCircle2, Info, CircleAlert as CircleAlert2, XCircle, X as X3 } from "lucide-react";
 import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs16 } from "react/jsx-runtime";
 var records = [];
@@ -1454,7 +1470,7 @@ function ToastViewport({ position, visiblePosition, className }) {
   return /* @__PURE__ */ jsx43("div", { "aria-label": `Notificaciones ${position}`, className: cn("pointer-events-none fixed z-50 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2", positionClasses[position], className), children: toasts.map((item) => /* @__PURE__ */ jsx43(Toast, { ...item, onDismiss: () => dismiss(item.id) }, item.id)) });
 }
 function Toast({ id, title, description, variant = "default", action, state = "open", duration = 0, onDismiss }) {
-  useEffect4(() => {
+  useEffect5(() => {
     if (state !== "open" || duration <= 0) return;
     const timeout = window.setTimeout(() => dismiss(id), duration);
     return () => window.clearTimeout(timeout);