@ttoss/components 2.16.1 → 2.17.0

package/dist/index.d.mts

@@ -894,7 +894,13 @@ type OAuthConsentLabels = {
  * Props for the OAuthConsent component.
  */
 type OAuthConsentProps = {
-  /** Display name or identifier of the requesting OAuth client. */clientName: string; /** Scope tree to render. */
+  /** Display name or identifier of the requesting OAuth client. */clientName: string;
+  /**
+   * URL of the client's logo or icon. When provided, renders the image above
+   * the consent heading. Falls back to the first letter of `clientName` if the
+   * image fails to load. When omitted, no logo is shown (backward-compatible).
+   */
+  clientLogoUrl?: string; /** Scope tree to render. */
   scopes: ConsentScope[];
   /**
    * Called when the user approves. Receives the minimal granted scope set
@@ -958,6 +964,7 @@ declare const collectGrantedScopes: (scopes: ConsentScope[], selected: Set<strin
  */
 declare const OAuthConsent: ({
   clientName,
+  clientLogoUrl,
   scopes,
   onAuthorize,
   onAuthorized,

package/dist/index.mjs

@@ -2980,6 +2980,48 @@ var NotificationsMenu = ({
   });
 };
 
+//#endregion
+//#region src/components/OAuthConsent/ClientLogo.tsx
+var ClientLogo = ({
+  src,
+  clientName
+}) => {
+  const [errored, setErrored] = React.useState(false);
+  if (errored) return /* @__PURE__ */jsx(Flex, {
+    "aria-hidden": "true",
+    sx: {
+      width: 48,
+      height: 48,
+      borderRadius: "lg",
+      backgroundColor: "display.background.muted.default",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "xl",
+        fontWeight: "bold",
+        color: "display.text.muted.default"
+      },
+      children: clientName.charAt(0).toUpperCase()
+    })
+  });
+  return /* @__PURE__ */jsx("img", {
+    src,
+    alt: `${clientName} logo`,
+    onError: () => {
+      return setErrored(true);
+    },
+    style: {
+      width: 48,
+      height: 48,
+      borderRadius: 8,
+      objectFit: "contain",
+      display: "block"
+    }
+  });
+};
+
 //#endregion
 //#region src/components/OAuthConsent/OAuthConsent.tsx
 /**
@@ -3179,6 +3221,7 @@ var ConsentCard = ({
 */
 var OAuthConsent = ({
   clientName,
+  clientLogoUrl,
   scopes,
   onAuthorize,
   onAuthorized,
@@ -3228,7 +3271,15 @@ var OAuthConsent = ({
     })]
   });
   return /* @__PURE__ */jsxs(ConsentCard, {
-    children: [/* @__PURE__ */jsx(Heading, {
+    children: [clientLogoUrl && /* @__PURE__ */jsx(Box, {
+      sx: {
+        marginBottom: 4
+      },
+      children: /* @__PURE__ */jsx(ClientLogo, {
+        src: clientLogoUrl,
+        clientName
+      })
+    }), /* @__PURE__ */jsx(Heading, {
       as: "h1",
       sx: {
         fontSize: "3xl",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.16.1",
+  "version": "2.17.0",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -55,18 +55,18 @@
     "tsx": "^4.21.0",
     "@ttoss/config": "^1.37.17",
     "@ttoss/i18n-cli": "^0.8.17",
-    "@ttoss/react-i18n": "^2.3.0",
-    "@ttoss/react-icons": "^0.7.21",
     "@ttoss/react-hooks": "^2.3.20",
+    "@ttoss/react-icons": "^0.7.21",
+    "@ttoss/react-i18n": "^2.3.0",
     "@ttoss/test-utils": "^4.2.18",
     "@ttoss/ui": "^6.9.28"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-hooks": "^2.3.20",
-    "@ttoss/react-i18n": "^2.3.0",
     "@ttoss/react-icons": "^0.7.21",
-    "@ttoss/ui": "^6.9.28"
+    "@ttoss/ui": "^6.9.28",
+    "@ttoss/react-i18n": "^2.3.0"
   },
   "publishConfig": {
     "access": "public",