@ttoss/components 2.8.0 → 2.9.0

package/dist/SpotlightCard/index.d.ts

@@ -14,10 +14,10 @@ type SpotlightCardProps = {
     /**
      * Visual variant of the card.
      * - 'accent': (Default) Highlighted background (Action Accent) with shine animation.
-     * - 'dark': Dark background (Action Primary).
+     * - 'primary': Primary 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;

package/dist/esm/SpotlightCard/index.js

@@ -3,7 +3,7 @@ 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,
@@ -14,21 +14,17 @@ var SpotlightCard = /* @__PURE__ */__name(({
   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";
@@ -89,7 +85,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.8.0",
+  "version": "2.9.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/react-i18n": "^2.0.24",
-    "@ttoss/ui": "^6.0.4"
+    "@ttoss/ui": "^6.0.4",
+    "@ttoss/react-i18n": "^2.0.24"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -121,10 +121,10 @@
     "tsup": "^8.5.1",
     "tsx": "^4.19.2",
     "@ttoss/config": "^1.35.12",
-    "@ttoss/react-i18n": "^2.0.24",
+    "@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/i18n-cli": "^0.7.38",
     "@ttoss/test-utils": "^4.0.1",
     "@ttoss/ui": "^6.0.4"
   },