@ttoss/components 2.9.0 → 2.10.0

package/dist/SpotlightCard/index.d.ts

@@ -6,21 +6,21 @@ import * as React from 'react';
 type ButtonPropType = ButtonProps | React.ReactNode;
 type SpotlightCardProps = {
     icon: IconType;
-    title: string;
-    subtitle?: string;
+    /**
+     * Title of the card. Pass a ReactNode for styling.
+     */
+    title: string | React.ReactNode;
+    /**
+     * Badge text. Renders as a badge/tag next to the title.
+     */
+    badge?: string | React.ReactNode;
     description: string;
     firstButton?: ButtonPropType;
     secondButton?: ButtonPropType;
-    /**
-     * Visual variant of the card.
-     * - 'accent': (Default) Highlighted background (Action Accent) with shine animation.
-     * - 'primary': Primary background (Action Primary).
-     * @default 'accent'
-     */
     variant?: 'accent' | 'primary';
 };
 declare const SpotlightCard: {
-    ({ icon, title, subtitle, description, firstButton, secondButton, variant, }: SpotlightCardProps): react_jsx_runtime.JSX.Element;
+    ({ icon, title, badge, description, firstButton, secondButton, variant, }: SpotlightCardProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/esm/SpotlightCard/index.js

@@ -8,7 +8,7 @@ import * as React from "react";
 var SpotlightCard = /* @__PURE__ */__name(({
   icon,
   title,
-  subtitle,
+  badge,
   description,
   firstButton,
   secondButton,
@@ -30,6 +30,8 @@ var SpotlightCard = /* @__PURE__ */__name(({
   const textColorToken = isAccent ? "action.text.accent.default" : "action.text.primary.default";
   const iconColorToken = isAccent ? "action.text.accent.default" : "display.text.accent.default";
   const iconBgToken = isAccent ? "rgba(255,255,255,0.3)" : "action.background.secondary.default";
+  const badgeBgToken = isAccent ? "action.background.primary.default" : "action.background.accent.default";
+  const badgeTextToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
   const btnPrimaryVariant = isAccent ? "primary" : "accent";
   const btnPrimaryColorToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
   const btnSecondaryColorToken = textColorToken;
@@ -109,8 +111,8 @@ var SpotlightCard = /* @__PURE__ */__name(({
     }
   }, /* @__PURE__ */React.createElement(Box, {
     sx: {
-      width: 58,
-      height: 58,
+      width: 64,
+      height: 64,
       borderRadius: "2xl",
       backgroundColor: iconBgToken,
       display: "flex",
@@ -121,7 +123,7 @@ var SpotlightCard = /* @__PURE__ */__name(({
     }
   }, /* @__PURE__ */React.createElement(Icon, {
     icon,
-    width: 28
+    width: 32
   })), /* @__PURE__ */React.createElement(Box, {
     sx: {
       minWidth: 0
@@ -129,40 +131,43 @@ var SpotlightCard = /* @__PURE__ */__name(({
   }, /* @__PURE__ */React.createElement(Text, {
     as: "div",
     sx: {
-      fontFamily: "heading",
-      fontWeight: 800,
-      fontSize: "24px",
-      lineHeight: 1.2,
+      fontFamily: "mono",
+      // Tamanho da fonte aumentado para dar mais presença ao OneClick
+      fontSize: "32px",
+      lineHeight: 1.1,
       color: "inherit",
       whiteSpace: "nowrap",
       display: "flex",
-      alignItems: "baseline",
-      gap: "2"
-    }
-  }, /* @__PURE__ */React.createElement("span", {
-    style: {
-      fontWeight: 800,
-      letterSpacing: "-0.5px",
-      verticalAlign: "middle",
-      lineHeight: 1.1
+      alignItems: "center",
+      gap: "3"
     }
-  }, title), subtitle && /* @__PURE__ */React.createElement("span", {
-    style: {
-      fontWeight: 300,
-      fontSize: "20px",
-      opacity: 0.8,
-      marginLeft: 6,
-      verticalAlign: "baseline",
-      lineHeight: 1.1
+  }, title, badge && /* @__PURE__ */React.createElement(Box, {
+    as: "span",
+    sx: {
+      backgroundColor: badgeBgToken,
+      color: badgeTextToken,
+      fontFamily: "mono",
+      fontWeight: "bold",
+      fontSize: "11px",
+      lineHeight: 1,
+      paddingX: "6px",
+      paddingY: "3px",
+      borderRadius: "md",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em",
+      display: "inline-flex",
+      alignItems: "center",
+      boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+      transform: "translateY(3px)"
     }
-  }, subtitle)), /* @__PURE__ */React.createElement(Text, {
+  }, badge)), /* @__PURE__ */React.createElement(Text, {
     as: "div",
     sx: {
       fontFamily: "body",
       fontWeight: 400,
-      fontSize: "15px",
+      fontSize: "16px",
       color: "inherit",
-      opacity: 0.85,
+      opacity: 0.9,
       mt: "1",
       overflow: "hidden",
       textOverflow: "ellipsis",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -110,8 +110,8 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-hooks": "^2.1.10",
-    "@ttoss/ui": "^6.0.4",
-    "@ttoss/react-i18n": "^2.0.24"
+    "@ttoss/react-i18n": "^2.0.24",
+    "@ttoss/ui": "^6.0.4"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -120,12 +120,12 @@
     "react": "^19.2.0",
     "tsup": "^8.5.1",
     "tsx": "^4.19.2",
+    "@ttoss/react-i18n": "^2.0.24",
     "@ttoss/config": "^1.35.12",
     "@ttoss/i18n-cli": "^0.7.38",
     "@ttoss/react-hooks": "^2.1.10",
-    "@ttoss/react-i18n": "^2.0.24",
-    "@ttoss/react-icons": "^0.5.5",
     "@ttoss/test-utils": "^4.0.1",
+    "@ttoss/react-icons": "^0.5.5",
     "@ttoss/ui": "^6.0.4"
   },
   "keywords": [