@ttoss/components 2.16.1 → 2.18.0

package/README.md

@@ -23,6 +23,7 @@ import { OAuthConsent } from '@ttoss/components';
 
 <OAuthConsent
   clientName="My App"
+  logoUri={searchParams.get('logo_uri') ?? undefined}
   scopes={[
     {
       key: 'openid',

package/dist/index.d.mts

@@ -894,7 +894,19 @@ 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;
+  /**
+   * Logo URL sourced directly from the OAuth `logo_uri` parameter appended by
+   * the consent-redirect flow. Takes precedence over `clientLogoUrl` when both
+   * are provided; otherwise the two are interchangeable.
+   */
+  logoUri?: string; /** Scope tree to render. */
   scopes: ConsentScope[];
   /**
    * Called when the user approves. Receives the minimal granted scope set
@@ -958,6 +970,8 @@ declare const collectGrantedScopes: (scopes: ConsentScope[], selected: Set<strin
  */
 declare const OAuthConsent: ({
   clientName,
+  clientLogoUrl,
+  logoUri,
   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,8 @@ var ConsentCard = ({
 */
 var OAuthConsent = ({
   clientName,
+  clientLogoUrl,
+  logoUri,
   scopes,
   onAuthorize,
   onAuthorized,
@@ -3187,6 +3231,7 @@ var OAuthConsent = ({
   isValidRequest = true,
   labels
 }) => {
+  const resolvedLogoUrl = logoUri ?? clientLogoUrl;
   const [selected, setSelected] = React.useState(() => {
     return initSelected(scopes);
   });
@@ -3228,7 +3273,15 @@ var OAuthConsent = ({
     })]
   });
   return /* @__PURE__ */jsxs(ConsentCard, {
-    children: [/* @__PURE__ */jsx(Heading, {
+    children: [resolvedLogoUrl && /* @__PURE__ */jsx(Box, {
+      sx: {
+        marginBottom: 4
+      },
+      children: /* @__PURE__ */jsx(ClientLogo, {
+        src: resolvedLogoUrl,
+        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.18.0",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -53,11 +53,11 @@
     "react": "^19.2.6",
     "tsdown": "^0.22.2",
     "tsx": "^4.21.0",
-    "@ttoss/config": "^1.37.17",
+    "@ttoss/react-hooks": "^2.3.20",
     "@ttoss/i18n-cli": "^0.8.17",
+    "@ttoss/config": "^1.37.17",
     "@ttoss/react-i18n": "^2.3.0",
     "@ttoss/react-icons": "^0.7.21",
-    "@ttoss/react-hooks": "^2.3.20",
     "@ttoss/test-utils": "^4.2.18",
     "@ttoss/ui": "^6.9.28"
   },