@ttoss/components 2.23.1 → 2.23.2

package/dist/index.mjs

@@ -757,7 +757,7 @@ var Drawer = ({
 
 //#endregion
 //#region src/components/EnhancedTitle/EnhancedTitle.styles.ts
-var gradientFlow = keyframes({
+var gradientFlow$1 = keyframes({
   "0%": {
     backgroundPosition: "0% 50%"
   },
@@ -799,7 +799,7 @@ var getEnhancedTitleIconSx = variant => {
         borderColor: "display.border.muted.default",
         background: getAccentGradientBackground,
         backgroundSize: "400% 400%",
-        animation: `${gradientFlow} 6s ease infinite`
+        animation: `${gradientFlow$1} 6s ease infinite`
       },
       "spotlight-primary": {
         backgroundColor: "action.background.primary.default",
@@ -807,7 +807,7 @@ var getEnhancedTitleIconSx = variant => {
         borderColor: "display.border.muted.default",
         background: getPrimaryGradientBackground,
         backgroundSize: "400% 400%",
-        animation: `${gradientFlow} 6s ease infinite`
+        animation: `${gradientFlow$1} 6s ease infinite`
       },
       primary: {
         backgroundColor: "action.background.primary.default",
@@ -1470,208 +1470,254 @@ ListItem.displayName = "ListItem";
 
 //#endregion
 //#region src/components/SpotlightCard/SpotlightCard.tsx
-var SpotlightCard = ({
+var TOKENS = {
+  accent: {
+    text: "action.text.accent.default",
+    icon: "action.text.accent.default",
+    iconBg: "rgba(255,255,255,0.3)",
+    badgeBg: "action.background.primary.default",
+    badgeText: "action.text.primary.default",
+    primaryButtonVariant: "primary",
+    primaryButtonText: "action.text.primary.default",
+    secondaryButtonBorder: "currentColor",
+    border: "transparent",
+    backgroundSize: "200% 100%, auto"
+  },
+  primary: {
+    text: "action.text.primary.default",
+    icon: "display.text.accent.default",
+    iconBg: "action.background.secondary.default",
+    badgeBg: "action.background.accent.default",
+    badgeText: "action.text.accent.default",
+    primaryButtonVariant: "accent",
+    primaryButtonText: "action.text.accent.default",
+    secondaryButtonBorder: "display.border.muted.default",
+    border: "display.border.muted.default",
+    backgroundSize: "400% 400%"
+  }
+};
+var gradientFlow = keyframes({
+  "0%": {
+    backgroundPosition: "0% 50%"
+  },
+  "50%": {
+    backgroundPosition: "100% 50%"
+  },
+  "100%": {
+    backgroundPosition: "0% 50%"
+  }
+});
+var getAccentBackground = theme => {
+  const bg = theme.colors?.action?.background?.accent?.default;
+  return `linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%),
+                    linear-gradient(0deg, ${bg}, ${bg})`;
+};
+var getPrimaryBackground = theme => {
+  const background = theme.colors?.action?.background;
+  const bgStart = background?.primary?.default;
+  return `linear-gradient(270deg, ${bgStart}, ${background?.secondary?.default}, ${bgStart})`;
+};
+var SpotlightButton = ({
+  prop,
+  variant,
+  textColor,
+  styles
+}) => {
+  if (!prop) return null;
+  if (React.isValidElement(prop)) return prop;
+  if (typeof prop !== "object") return /* @__PURE__ */jsx(Fragment, {
+    children: prop
+  });
+  const {
+    sx,
+    ...rest
+  } = prop;
+  return /* @__PURE__ */jsx(Button, {
+    variant,
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "2",
+      px: "6",
+      py: "3",
+      fontSize: "15px",
+      fontWeight: "bold",
+      whiteSpace: "nowrap",
+      transition: "all 0.2s",
+      flex: ["1 1 auto", "0 1 auto"],
+      color: textColor,
+      ...styles,
+      ...sx
+    },
+    ...rest
+  });
+};
+var SpotlightContent = ({
   icon,
   title,
   badge,
   description,
-  firstButton,
-  secondButton,
-  variant = "accent"
+  tokens
 }) => {
-  const gradientFlow = keyframes({
-    "0%": {
-      backgroundPosition: "0% 50%"
-    },
-    "50%": {
-      backgroundPosition: "100% 50%"
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      alignItems: "center",
+      gap: ["4", "5"],
+      flex: 1,
+      minWidth: 0
     },
-    "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;
-  const btnSecondaryBorderColorToken = isAccent ? "currentColor" : "display.border.muted.default";
-  const renderButton = (prop, config) => {
-    if (!prop) return null;
-    if (React.isValidElement(prop)) return prop;
-    if (typeof prop !== "object") return prop;
-    const {
-      sx,
-      ...rest
-    } = prop;
-    const {
-      variant: defaultVariant,
-      textColor,
-      styles = {}
-    } = config;
-    return /* @__PURE__ */jsx(Button, {
-      variant: defaultVariant,
+    children: [/* @__PURE__ */jsx(Box, {
       sx: {
+        width: [48, 64],
+        height: [48, 64],
+        borderRadius: "2xl",
+        backgroundColor: tokens.iconBg,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        gap: "2",
-        px: "6",
-        py: "3",
-        fontSize: "15px",
-        fontWeight: "bold",
-        whiteSpace: "nowrap",
-        transition: "all 0.2s",
-        color: textColor,
-        ...styles,
-        ...sx
+        flexShrink: 0,
+        color: tokens.icon
       },
-      ...rest
-    });
-  };
+      children: /* @__PURE__ */jsx(Icon, {
+        icon,
+        width: 32
+      })
+    }), /* @__PURE__ */jsxs(Box, {
+      sx: {
+        minWidth: 0
+      },
+      children: [/* @__PURE__ */jsxs(Text, {
+        as: "div",
+        sx: {
+          fontFamily: "mono",
+          fontSize: ["24px", "32px"],
+          lineHeight: 1.1,
+          color: "inherit",
+          whiteSpace: "nowrap",
+          display: "flex",
+          alignItems: "center",
+          gap: "3"
+        },
+        children: [title, badge && /* @__PURE__ */jsx(Box, {
+          as: "span",
+          sx: {
+            backgroundColor: tokens.badgeBg,
+            color: tokens.badgeText,
+            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)"
+          },
+          children: badge
+        })]
+      }), /* @__PURE__ */jsx(Text, {
+        as: "div",
+        sx: {
+          fontFamily: "body",
+          fontWeight: 400,
+          fontSize: ["14px", "16px"],
+          color: "inherit",
+          opacity: .9,
+          mt: "1",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          display: "-webkit-box",
+          WebkitLineClamp: [4, 2],
+          WebkitBoxOrient: "vertical"
+        },
+        children: description
+      })]
+    })]
+  });
+};
+var SpotlightCard = ({
+  icon,
+  title,
+  badge,
+  description,
+  firstButton,
+  secondButton,
+  variant = "accent"
+}) => {
+  const hasButtons = !!firstButton || !!secondButton;
+  const isAccent = variant === "accent";
+  const tokens = TOKENS[isAccent ? "accent" : "primary"];
   return /* @__PURE__ */jsxs(Card, {
     sx: {
       display: "flex",
       flexDirection: ["row"],
-      flexWrap: "nowrap",
+      flexWrap: ["wrap", "nowrap"],
       alignItems: "center",
       justifyContent: "space-between",
       background: t => {
         const theme = t;
-        const bgStart = isAccent ? theme.colors?.action?.background?.accent?.default : theme.colors?.action?.background?.primary?.default;
-        const bgMiddle = isAccent ? theme.colors?.action?.background?.accent?.active : theme.colors?.action?.background?.secondary?.default;
-        if (isAccent) return `linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%), 
-                    linear-gradient(0deg, ${bgStart}, ${bgStart})`;
-        return `linear-gradient(270deg, ${bgStart}, ${bgMiddle}, ${bgStart})`;
+        return isAccent ? getAccentBackground(theme) : getPrimaryBackground(theme);
       },
-      backgroundSize: isAccent ? "200% 100%, auto" : "400% 400%",
+      backgroundSize: tokens.backgroundSize,
       animation: `${gradientFlow} 6s ease infinite`,
       width: "100%",
       minHeight: "104px",
       borderRadius: "xl",
       boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
-      py: "7",
-      px: "8",
-      gap: "5",
-      color: textColorToken,
+      py: ["5", "7"],
+      px: ["5", "8"],
+      gap: ["4", "5"],
+      color: tokens.text,
       overflow: "hidden",
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: isAccent ? "transparent" : "display.border.muted.default"
+      borderColor: tokens.border
     },
     "data-testid": "spotlight-card",
-    children: [/* @__PURE__ */jsxs(Flex, {
-      sx: {
-        alignItems: "center",
-        gap: "5",
-        flex: 1,
-        minWidth: 0
-      },
-      children: [/* @__PURE__ */jsx(Box, {
-        sx: {
-          width: 64,
-          height: 64,
-          borderRadius: "2xl",
-          backgroundColor: iconBgToken,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flexShrink: 0,
-          color: iconColorToken
-        },
-        children: /* @__PURE__ */jsx(Icon, {
-          icon,
-          width: 32
-        })
-      }), /* @__PURE__ */jsxs(Box, {
-        sx: {
-          minWidth: 0
-        },
-        children: [/* @__PURE__ */jsxs(Text, {
-          as: "div",
-          sx: {
-            fontFamily: "mono",
-            fontSize: "32px",
-            lineHeight: 1.1,
-            color: "inherit",
-            whiteSpace: "nowrap",
-            display: "flex",
-            alignItems: "center",
-            gap: "3"
-          },
-          children: [title, badge && /* @__PURE__ */jsx(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)"
-            },
-            children: badge
-          })]
-        }), /* @__PURE__ */jsx(Text, {
-          as: "div",
-          sx: {
-            fontFamily: "body",
-            fontWeight: 400,
-            fontSize: "16px",
-            color: "inherit",
-            opacity: .9,
-            mt: "1",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            display: "-webkit-box",
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: "vertical"
-          },
-          children: description
-        })]
-      })]
+    children: [/* @__PURE__ */jsx(SpotlightContent, {
+      icon,
+      title,
+      badge,
+      description,
+      tokens
     }), hasButtons && /* @__PURE__ */jsxs(Flex, {
       sx: {
-        gap: "4",
+        gap: ["3", "4"],
         alignItems: "center",
         flexShrink: 0,
+        flexWrap: ["wrap", "nowrap"],
+        width: ["100%", "auto"],
         ml: "auto"
       },
-      children: [renderButton(firstButton, {
-        variant: btnPrimaryVariant,
-        textColor: btnPrimaryColorToken,
+      children: [/* @__PURE__ */jsx(SpotlightButton, {
+        prop: firstButton,
+        variant: tokens.primaryButtonVariant,
+        textColor: tokens.primaryButtonText,
         styles: {
           ":hover": {
             transform: "translateY(-1px)"
           }
         }
-      }), renderButton(secondButton, {
+      }), /* @__PURE__ */jsx(SpotlightButton, {
+        prop: secondButton,
         variant: "secondary",
-        textColor: btnSecondaryColorToken,
+        textColor: tokens.text,
         styles: {
           backgroundColor: "transparent",
           borderWidth: "1px",
           borderStyle: "solid",
-          borderColor: btnSecondaryBorderColorToken,
+          borderColor: tokens.secondaryButtonBorder,
           opacity: isAccent ? .6 : 1,
           cursor: "pointer",
           ":hover": {
             backgroundColor: "rgba(255,255,255,0.2)",
             opacity: 1,
-            borderColor: btnSecondaryBorderColorToken
+            borderColor: tokens.secondaryButtonBorder
           }
         }
       })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.23.1",
+  "version": "2.23.2",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -55,18 +55,18 @@
     "tsdown": "^0.22.2",
     "tsx": "^4.21.0",
     "@ttoss/i18n-cli": "^0.13.0",
-    "@ttoss/react-icons": "^0.11.1",
-    "@ttoss/ui": "^6.11.0",
+    "@ttoss/config": "^1.41.0",
+    "@ttoss/react-i18n": "^2.7.0",
     "@ttoss/react-hooks": "^2.5.0",
+    "@ttoss/react-icons": "^0.11.1",
     "@ttoss/test-utils": "^4.4.0",
-    "@ttoss/config": "^1.41.0",
-    "@ttoss/react-i18n": "^2.7.0"
+    "@ttoss/ui": "^6.11.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
+    "@ttoss/react-hooks": "^2.5.0",
     "@ttoss/react-i18n": "^2.7.0",
     "@ttoss/react-icons": "^0.11.1",
-    "@ttoss/react-hooks": "^2.5.0",
     "@ttoss/ui": "^6.11.0"
   },
   "publishConfig": {