@ttoss/components 2.16.0 → 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
 /**
@@ -3040,6 +3082,7 @@ var ScopeRow = ({
     busy
   });
   const checkboxId = `consent-scope-${scope.key}`;
+  const labelId = `consent-scope-label-${scope.key}`;
   const descId = `consent-scope-desc-${scope.key}`;
   return /* @__PURE__ */jsxs(Box, {
     as: "li",
@@ -3047,6 +3090,7 @@ var ScopeRow = ({
       listStyle: "none"
     },
     children: [/* @__PURE__ */jsxs(Flex, {
+      as: "label",
       sx: {
         gap: 3,
         alignItems: "flex-start",
@@ -3055,6 +3099,7 @@ var ScopeRow = ({
         borderRadius: "md",
         opacity: ancestorSelected ? .55 : 1,
         transition: "background-color 0.15s ease",
+        cursor: isInteractive ? "pointer" : "default",
         ...(isInteractive && {
           "&:hover": {
             backgroundColor: "display.background.muted.default"
@@ -3070,6 +3115,7 @@ var ScopeRow = ({
           id: checkboxId,
           checked: isChecked,
           disabled: isDisabled,
+          "aria-labelledby": labelId,
           "aria-describedby": descId,
           onChange: () => {
             onToggle(scope, ancestorSelected);
@@ -3080,15 +3126,15 @@ var ScopeRow = ({
           flex: 1,
           minWidth: 0
         },
-        children: [/* @__PURE__ */jsx(Label, {
-          htmlFor: checkboxId,
+        children: [/* @__PURE__ */jsx(Text, {
+          as: "span",
+          id: labelId,
           sx: {
             fontWeight: "semibold",
             fontSize: "md",
             lineHeight: "short",
-            cursor: isInteractive ? "pointer" : "default",
             color: "display.text.primary.default",
-            width: "fit-content"
+            display: "block"
           },
           children: scope.label
         }), /* @__PURE__ */jsx(Text, {
@@ -3175,6 +3221,7 @@ var ConsentCard = ({
 */
 var OAuthConsent = ({
   clientName,
+  clientLogoUrl,
   scopes,
   onAuthorize,
   onAuthorized,
@@ -3224,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.0",
+  "version": "2.17.0",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -54,19 +54,19 @@
     "tsdown": "^0.22.2",
     "tsx": "^4.21.0",
     "@ttoss/config": "^1.37.17",
+    "@ttoss/i18n-cli": "^0.8.17",
     "@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/i18n-cli": "^0.8.17",
     "@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",