@aseguragonzalez/ui 1.4.0 → 1.5.0

package/dist/index.d.ts

@@ -41,7 +41,7 @@ export type { NumberInputProps, NumberInputSize } from './primitives/NumberInput
 export { DateInput } from './primitives/DateInput/DateInput';
 export type { DateInputProps, DateInputSize } from './primitives/DateInput/DateInput';
 export { Avatar } from './primitives/Avatar/Avatar';
-export type { AvatarProps, AvatarSize, AvatarShape } from './primitives/Avatar/Avatar';
+export type { AvatarProps, AvatarImgProps, AvatarSize, AvatarShape } from './primitives/Avatar/Avatar';
 export { Tabs, TabList, Tab, TabPanel } from './primitives/Tabs/Tabs';
 export type { TabsProps, TabListProps, TabProps, TabPanelProps } from './primitives/Tabs/Tabs';
 export { Tooltip } from './primitives/Tooltip/Tooltip';

package/dist/patterns/AuthLayout/AuthLayout.cjs

@@ -1 +1 @@
-const e=require("./AuthLayout.module.css.cjs");let t=require("react/jsx-runtime");var n=()=>(0,t.jsxs)(`svg`,{width:`36`,height:`36`,viewBox:`0 0 36 36`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`rect`,{width:`36`,height:`36`,rx:`8`,fill:`var(--ds-color-action-primary)`}),(0,t.jsx)(`path`,{d:`M10 12h16M10 18h11M10 24h8`,stroke:`white`,strokeWidth:`2.5`,strokeLinecap:`round`})]});function r({children:r,branding:i,tagline:a,logo:o,brandingLabel:s=`Product branding`,footer:c}){let l=o??(0,t.jsx)(n,{});return(0,t.jsxs)(`div`,{className:[e.default.layout,c?e.default.withFooter:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`aside`,{className:e.default.brandPanel,"aria-label":s,"aria-hidden":`true`,children:(0,t.jsx)(`div`,{className:e.default.brandContent,children:i??(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`div`,{className:e.default.brandLogo,children:l}),(0,t.jsx)(`p`,{className:e.default.brandTagline,children:a??(0,t.jsxs)(t.Fragment,{children:[`Build better products,`,(0,t.jsx)(`br`,{}),`together.`]})})]})})}),(0,t.jsx)(`main`,{className:e.default.formPanel,children:(0,t.jsxs)(`div`,{className:e.default.formContent,children:[(0,t.jsx)(`div`,{className:e.default.mobileLogo,"aria-hidden":`true`,children:l}),r]})}),c&&(0,t.jsx)(`footer`,{className:e.default.footer,children:c})]})}r.displayName=`AuthLayout`,exports.AuthLayout=r;
+const e=require("./AuthLayout.module.css.cjs");let t=require("react/jsx-runtime");var n=()=>(0,t.jsxs)(`svg`,{width:`36`,height:`36`,viewBox:`0 0 36 36`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`rect`,{width:`36`,height:`36`,rx:`8`,fill:`var(--ds-color-action-primary)`}),(0,t.jsx)(`path`,{d:`M10 12h16M10 18h11M10 24h8`,stroke:`white`,strokeWidth:`2.5`,strokeLinecap:`round`})]});function r({children:r,branding:i,tagline:a,logo:o,brandingLabel:s=`Product branding`,footer:c}){let l=o??(0,t.jsx)(n,{});return(0,t.jsxs)(`div`,{className:[e.default.layout,c?e.default.withFooter:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`aside`,{className:e.default.brandPanel,"aria-label":s,children:(0,t.jsx)(`div`,{className:e.default.brandContent,children:i??(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`div`,{className:e.default.brandLogo,children:l}),(0,t.jsx)(`p`,{className:e.default.brandTagline,children:a??(0,t.jsxs)(t.Fragment,{children:[`Build better products,`,(0,t.jsx)(`br`,{}),`together.`]})})]})})}),(0,t.jsx)(`main`,{className:e.default.formPanel,children:(0,t.jsxs)(`div`,{className:e.default.formContent,children:[(0,t.jsx)(`div`,{className:e.default.mobileLogo,"aria-hidden":`true`,children:l}),r]})}),c&&(0,t.jsx)(`footer`,{className:e.default.footer,children:c})]})}r.displayName=`AuthLayout`,exports.AuthLayout=r;

package/dist/patterns/AuthLayout/AuthLayout.d.ts

@@ -8,7 +8,7 @@ export interface AuthLayoutProps {
     tagline?: ReactNode;
     /** Logo shown at the top of the form panel on mobile, and inside the branding panel on desktop. */
     logo?: ReactNode;
-    /** Accessible label for the branding panel (hidden from visual display). */
+    /** Accessible name of the branding panel's complementary landmark. Default: `'Product branding'`. */
     brandingLabel?: string;
     /**
      * Page footer. Rendered in a `<footer>` after `<main>`, not inside it, so it is exposed as the

package/dist/patterns/AuthLayout/AuthLayout.js

@@ -27,7 +27,6 @@ function a({ children: a, branding: o, tagline: s, logo: c, brandingLabel: l = "
 			/* @__PURE__ */ n("aside", {
 				className: e.brandPanel,
 				"aria-label": l,
-				"aria-hidden": "true",
 				children: /* @__PURE__ */ n("div", {
 					className: e.brandContent,
 					children: o ?? /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("div", {

package/dist/primitives/Avatar/Avatar.cjs

@@ -1 +1 @@
-const e=require("./Avatar.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(e){let t=e.trim().split(/\s+/).filter(Boolean);return t.length===0?`?`:t.length===1?t[0][0].toUpperCase():(t[0][0]+t[t.length-1][0]).toUpperCase()}var i=(0,t.forwardRef)(({name:i,src:a,size:o=`md`,shape:s=`circle`,className:c,...l},u)=>{let[d,f]=(0,t.useState)(!1);(0,t.useEffect)(()=>{f(!1)},[a]);let p=!!a&&!d,m=[e.default.avatar,e.default[o],e.default[s],c??``].filter(Boolean).join(` `);return(0,n.jsx)(`span`,{ref:u,role:`img`,"aria-label":i,className:m,...l,children:p?(0,n.jsx)(`img`,{src:a,alt:``,"aria-hidden":`true`,className:e.default.image,onError:()=>f(!0)}):(0,n.jsx)(`span`,{"aria-hidden":`true`,className:e.default.initials,children:r(i)})})});i.displayName=`Avatar`,exports.Avatar=i;
+const e=require("./Avatar.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(e){let t=e.trim().split(/\s+/).filter(Boolean);return t.length===0?`?`:t.length===1?t[0][0].toUpperCase():(t[0][0]+t[t.length-1][0]).toUpperCase()}var i=(0,t.forwardRef)(({name:i,src:a,size:o=`md`,shape:s=`circle`,decorative:c=!1,imgProps:l,className:u,...d},f)=>{let[p,m]=(0,t.useState)(!1);(0,t.useEffect)(()=>{m(!1)},[a]);let h=!!a&&!p,g=[e.default.avatar,e.default[o],e.default[s],u??``].filter(Boolean).join(` `);return(0,n.jsx)(`span`,{ref:f,role:c?void 0:`img`,"aria-label":c?void 0:i,"aria-hidden":c?!0:void 0,className:g,...d,children:h?(0,n.jsx)(`img`,{...l,src:a,alt:``,"aria-hidden":`true`,className:e.default.image,onError:e=>{m(!0),l?.onError?.(e)}}):(0,n.jsx)(`span`,{"aria-hidden":`true`,className:e.default.initials,children:r(i)})})});i.displayName=`Avatar`,exports.Avatar=i;

package/dist/primitives/Avatar/Avatar.d.ts

@@ -1,11 +1,16 @@
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShape = 'circle' | 'square';
+export type AvatarImgProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'className'>;
 export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Full name — used for accessible label and to derive initials. */
     name: string;
     src?: string;
     size?: AvatarSize;
     shape?: AvatarShape;
+    /** When true, the avatar is hidden from assistive technology — use it next to the visible name. */
+    decorative?: boolean;
+    /** Attributes forwarded to the inner `<img>`, such as `referrerPolicy`. */
+    imgProps?: AvatarImgProps;
 }
 declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
 export { Avatar };

package/dist/primitives/Avatar/Avatar.js

@@ -6,29 +6,33 @@ function a(e) {
 	let t = e.trim().split(/\s+/).filter(Boolean);
 	return t.length === 0 ? "?" : t.length === 1 ? t[0][0].toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
 }
-var o = t(({ name: t, src: o, size: s = "md", shape: c = "circle", className: l, ...u }, d) => {
-	let [f, p] = r(!1);
+var o = t(({ name: t, src: o, size: s = "md", shape: c = "circle", decorative: l = !1, imgProps: u, className: d, ...f }, p) => {
+	let [m, h] = r(!1);
 	n(() => {
-		p(!1);
+		h(!1);
 	}, [o]);
-	let m = !!o && !f, h = [
+	let g = !!o && !m, _ = [
 		e.avatar,
 		e[s],
 		e[c],
-		l ?? ""
+		d ?? ""
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ i("span", {
-		ref: d,
-		role: "img",
-		"aria-label": t,
-		className: h,
-		...u,
-		children: m ? /* @__PURE__ */ i("img", {
+		ref: p,
+		role: l ? void 0 : "img",
+		"aria-label": l ? void 0 : t,
+		"aria-hidden": l ? !0 : void 0,
+		className: _,
+		...f,
+		children: g ? /* @__PURE__ */ i("img", {
+			...u,
 			src: o,
 			alt: "",
 			"aria-hidden": "true",
 			className: e.image,
-			onError: () => p(!0)
+			onError: (e) => {
+				h(!0), u?.onError?.(e);
+			}
 		}) : /* @__PURE__ */ i("span", {
 			"aria-hidden": "true",
 			className: e.initials,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aseguragonzalez/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": false,
   "type": "module",
   "description": "Accessible, themeable design system for React SPAs",