@ttoss/components 2.8.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.
-     * - 'dark': Dark background (Action Primary).
-     * @default 'accent'
-     */
-    variant?: 'accent' | 'dark';
+    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

@@ -3,37 +3,35 @@ import { Icon } from "../chunk-2R7AUPJL.js";
 import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/SpotlightCard/SpotlightCard.tsx
-import { Box, Button, Card, Flex, Text } from "@ttoss/ui";
+import { Box, Button, Card, Flex, keyframes, Text } from "@ttoss/ui";
 import * as React from "react";
 var SpotlightCard = /* @__PURE__ */__name(({
   icon,
   title,
-  subtitle,
+  badge,
   description,
   firstButton,
   secondButton,
   variant = "accent"
 }) => {
-  React.useEffect(() => {
-    const styleId = "oca-spotlight-animations-v2";
-    if (!document.getElementById(styleId)) {
-      const style = document.createElement("style");
-      style.id = styleId;
-      style.innerHTML = `
-        @keyframes ocaGradientFlow {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-      `;
-      document.head.appendChild(style);
+  const gradientFlow = keyframes({
+    "0%": {
+      backgroundPosition: "0% 50%"
+    },
+    "50%": {
+      backgroundPosition: "100% 50%"
+    },
+    "100%": {
+      backgroundPosition: "0% 50%"
     }
-  }, []);
+  });
   const hasButtons = !!firstButton || !!secondButton;
   const isAccent = variant === "accent";
   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;
@@ -89,7 +87,7 @@ var SpotlightCard = /* @__PURE__ */__name(({
         return `linear-gradient(270deg, ${bgStart}, ${bgMiddle}, ${bgStart})`;
       }, "background"),
       backgroundSize: isAccent ? "200% 100%, auto" : "400% 400%",
-      animation: "ocaGradientFlow 6s ease infinite",
+      animation: `${gradientFlow} 6s ease infinite`,
       width: "100%",
       minHeight: "104px",
       borderRadius: "xl",
@@ -113,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",
@@ -125,7 +123,7 @@ var SpotlightCard = /* @__PURE__ */__name(({
     }
   }, /* @__PURE__ */React.createElement(Icon, {
     icon,
-    width: 28
+    width: 32
   })), /* @__PURE__ */React.createElement(Box, {
     sx: {
       minWidth: 0
@@ -133,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.8.0",
+  "version": "2.10.0",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -120,12 +120,12 @@
     "react": "^19.2.0",
     "tsup": "^8.5.1",
     "tsx": "^4.19.2",
-    "@ttoss/config": "^1.35.12",
     "@ttoss/react-i18n": "^2.0.24",
-    "@ttoss/react-hooks": "^2.1.10",
-    "@ttoss/react-icons": "^0.5.5",
+    "@ttoss/config": "^1.35.12",
     "@ttoss/i18n-cli": "^0.7.38",
+    "@ttoss/react-hooks": "^2.1.10",
     "@ttoss/test-utils": "^4.0.1",
+    "@ttoss/react-icons": "^0.5.5",
     "@ttoss/ui": "^6.0.4"
   },
   "keywords": [