@ttoss/components 2.14.19 → 2.14.21

package/dist/LockedOverlay/index.d.mts

@@ -0,0 +1,162 @@
+
+import * as React from "react";
+import { ButtonProps, Theme, ThemeUIStyleObject } from "@ttoss/ui";
+
+//#region src/components/LockedOverlay/LockedOverlay.d.ts
+type LockedOverlayAction = {
+  /**
+   * Label text for the button
+   */
+  label: string;
+  /**
+   * Icon identifier from @ttoss/react-icons
+   */
+  icon?: string;
+  /**
+   * Button variant
+   */
+  variant: 'primary' | 'accent' | 'secondary';
+  /**
+   * Click handler for the button
+   */
+  onClick: () => void;
+};
+type LockedOverlayProps = {
+  /**
+   * Controls the overlay visibility
+   */
+  isOpen: boolean;
+  /**
+   * Optional close handler. If not provided, overlay cannot be closed by user interaction
+   */
+  onRequestClose?: () => void;
+  /**
+   * Header configuration for the SpotlightCard
+   */
+  header: {
+    /**
+     * Icon identifier from @ttoss/react-icons
+     */
+    icon: string;
+    /**
+     * Title text for the header
+     */
+    title: string;
+    /**
+     * Description text for the header
+     */
+    description: string;
+    /**
+     * Visual variant for the SpotlightCard
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'accent';
+  };
+  /**
+   * Optional first button to display in the SpotlightCard header
+   */
+  firstButton?: ButtonProps | React.ReactNode;
+  /**
+   * Optional second button to display in the SpotlightCard header
+   */
+  secondButton?: ButtonProps | React.ReactNode;
+  /**
+   * Content to be rendered in the overlay body
+   */
+  children: React.ReactNode;
+  /**
+   * Optional list of actions to render as buttons in the footer
+   */
+  actions?: LockedOverlayAction[];
+  /**
+   * Optional style overrides for the overlay and content container
+   */
+  sx?: ThemeUIStyleObject<Theme<object>>;
+  /**
+   * Optional z-index value to control overlay stacking order.
+   * The overlay will appear above the parent container content.
+   * @default 1
+   *
+   * zIndex hierarchy reference:
+   * - modal: 1400
+   * - overlay: 1300 (sidebar layouts use this value)
+   * - dropdown: 1000
+   * - sticky: 1100
+   * - banner: 1200
+   */
+  zIndex?: string | number;
+};
+/**
+ * LockedOverlay is a component for blocking and displaying locked features or restricted content
+ * within a specific container.
+ *
+ * This component renders as an absolutely positioned overlay that blocks the parent container's content.
+ * The parent container must have `position: relative` for proper positioning.
+ *
+ * Unlike a modal, this component blocks only its parent container, not the entire viewport,
+ * making it ideal for blocking specific sections like Layout.Main, Layout.Main.Body, etc.
+ *
+ * @example
+ * ```tsx
+ * // Parent container must have position: relative
+ * <Layout.Main sx={{ position: 'relative' }}>
+ *   <LockedOverlay
+ *     isOpen={isOpen}
+ *     onRequestClose={() => setIsOpen(false)}
+ *     header={{
+ *       icon: "fluent:lock-closed-24-filled",
+ *       title: "Premium Feature",
+ *       description: "Available in Pro plan only",
+ *       variant: "primary"
+ *     }}
+ *     actions={[
+ *       {
+ *         label: "Upgrade Now",
+ *         icon: "fluent-emoji-high-contrast:sparkles",
+ *         variant: "primary",
+ *         onClick: handleUpgrade
+ *       },
+ *       {
+ *         label: "Learn More",
+ *         icon: "fluent:arrow-right-16-regular",
+ *         variant: "accent",
+ *         onClick: handleLearnMore
+ *       }
+ *     ]}
+ *   >
+ *     <Text>This feature is only available for Pro users.</Text>
+ *   </LockedOverlay>
+ * </Layout.Main>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Blocking a specific section with custom zIndex
+ * <Box sx={{ position: 'relative' }}>
+ *   <LockedOverlay
+ *     isOpen={isOpen}
+ *     zIndex={10}
+ *     header={{
+ *       icon: "fluent:lock-closed-24-filled",
+ *       title: "Feature Locked",
+ *       description: "Unlock this feature"
+ *     }}
+ *   >
+ *     <Text>Content here</Text>
+ *   </LockedOverlay>
+ * </Box>
+ * ```
+ */
+declare const LockedOverlay: ({
+  isOpen,
+  onRequestClose,
+  header,
+  firstButton,
+  secondButton,
+  children,
+  actions,
+  sx,
+  zIndex
+}: LockedOverlayProps) => import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { LockedOverlay };

package/dist/LockedOverlay/index.mjs

@@ -0,0 +1,386 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@ttoss/react-icons";
+import { Box, Button, Card, Flex, Text, keyframes } from "@ttoss/ui";
+
+//#region src/components/SpotlightCard/SpotlightCard.tsx
+const SpotlightCard = ({
+  icon,
+  title,
+  badge,
+  description,
+  firstButton,
+  secondButton,
+  variant = "accent"
+}) => {
+  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;
+  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,
+      sx: {
+        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
+      },
+      ...rest
+    });
+  };
+  return /* @__PURE__ */jsxs(Card, {
+    sx: {
+      display: "flex",
+      flexDirection: ["row"],
+      flexWrap: "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})`;
+      },
+      backgroundSize: isAccent ? "200% 100%, auto" : "400% 400%",
+      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,
+      overflow: "hidden",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: isAccent ? "transparent" : "display.border.muted.default"
+    },
+    "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
+        })]
+      })]
+    }), hasButtons && /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        gap: "4",
+        alignItems: "center",
+        flexShrink: 0,
+        ml: "auto"
+      },
+      children: [renderButton(firstButton, {
+        variant: btnPrimaryVariant,
+        textColor: btnPrimaryColorToken,
+        styles: {
+          ":hover": {
+            transform: "translateY(-1px)"
+          }
+        }
+      }), renderButton(secondButton, {
+        variant: "secondary",
+        textColor: btnSecondaryColorToken,
+        styles: {
+          backgroundColor: "transparent",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: btnSecondaryBorderColorToken,
+          opacity: isAccent ? .6 : 1,
+          cursor: "pointer",
+          ":hover": {
+            backgroundColor: "rgba(255,255,255,0.2)",
+            opacity: 1,
+            borderColor: btnSecondaryBorderColorToken
+          }
+        }
+      })]
+    })]
+  });
+};
+SpotlightCard.displayName = "SpotlightCard";
+
+//#endregion
+//#region src/components/LockedOverlay/LockedOverlay.tsx
+/**
+* LockedOverlay is a component for blocking and displaying locked features or restricted content
+* within a specific container.
+*
+* This component renders as an absolutely positioned overlay that blocks the parent container's content.
+* The parent container must have `position: relative` for proper positioning.
+*
+* Unlike a modal, this component blocks only its parent container, not the entire viewport,
+* making it ideal for blocking specific sections like Layout.Main, Layout.Main.Body, etc.
+*
+* @example
+* ```tsx
+* // Parent container must have position: relative
+* <Layout.Main sx={{ position: 'relative' }}>
+*   <LockedOverlay
+*     isOpen={isOpen}
+*     onRequestClose={() => setIsOpen(false)}
+*     header={{
+*       icon: "fluent:lock-closed-24-filled",
+*       title: "Premium Feature",
+*       description: "Available in Pro plan only",
+*       variant: "primary"
+*     }}
+*     actions={[
+*       {
+*         label: "Upgrade Now",
+*         icon: "fluent-emoji-high-contrast:sparkles",
+*         variant: "primary",
+*         onClick: handleUpgrade
+*       },
+*       {
+*         label: "Learn More",
+*         icon: "fluent:arrow-right-16-regular",
+*         variant: "accent",
+*         onClick: handleLearnMore
+*       }
+*     ]}
+*   >
+*     <Text>This feature is only available for Pro users.</Text>
+*   </LockedOverlay>
+* </Layout.Main>
+* ```
+*
+* @example
+* ```tsx
+* // Blocking a specific section with custom zIndex
+* <Box sx={{ position: 'relative' }}>
+*   <LockedOverlay
+*     isOpen={isOpen}
+*     zIndex={10}
+*     header={{
+*       icon: "fluent:lock-closed-24-filled",
+*       title: "Feature Locked",
+*       description: "Unlock this feature"
+*     }}
+*   >
+*     <Text>Content here</Text>
+*   </LockedOverlay>
+* </Box>
+* ```
+*/
+const LockedOverlay = ({
+  isOpen,
+  onRequestClose,
+  header,
+  firstButton,
+  secondButton,
+  children,
+  actions,
+  sx,
+  zIndex = 1
+}) => {
+  const content = /* @__PURE__ */jsxs(Card, {
+    className: "lockedoverlay-card",
+    role: "dialog",
+    "aria-modal": true,
+    sx: {
+      width: "full",
+      maxWidth: "620px",
+      borderRadius: "lg",
+      overflow: "auto",
+      border: "none",
+      boxShadow: "none"
+    },
+    children: [/* @__PURE__ */jsx(Flex, {
+      sx: {
+        width: "full",
+        paddingX: "6",
+        paddingY: "4"
+      },
+      children: /* @__PURE__ */jsx(SpotlightCard, {
+        icon: header.icon,
+        title: header.title,
+        description: header.description,
+        variant: header.variant || "primary",
+        firstButton,
+        secondButton
+      })
+    }), /* @__PURE__ */jsxs(Card.Body, {
+      sx: {
+        px: ["5", "7"],
+        py: ["6", "7"],
+        gap: "6",
+        width: "full"
+      },
+      children: [children, actions && actions.length > 0 && /* @__PURE__ */jsx(Card.Footer, {
+        children: /* @__PURE__ */jsx(Flex, {
+          className: "lockedoverlay-footer",
+          sx: {
+            flexDirection: "column",
+            gap: "4",
+            alignItems: "center",
+            width: "full",
+            paddingX: "6",
+            marginTop: "8"
+          },
+          children: actions.map((action, index) => {
+            return /* @__PURE__ */jsxs(Button, {
+              variant: action.variant,
+              onClick: action.onClick,
+              sx: {
+                width: "full",
+                justifyContent: "center"
+              },
+              children: [action.icon && /* @__PURE__ */jsx(Icon, {
+                icon: action.icon
+              }), action.label]
+            }, index);
+          })
+        })
+      })]
+    })]
+  });
+  if (!isOpen) return null;
+  return /* @__PURE__ */jsx(Flex, {
+    "data-testid": "lockedoverlay-overlay",
+    onClick: () => {
+      return onRequestClose?.();
+    },
+    sx: {
+      position: "absolute",
+      inset: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex,
+      ...sx
+    },
+    children: /* @__PURE__ */jsx(Flex, {
+      onClick: event => {
+        event.stopPropagation();
+      },
+      sx: {
+        width: "full",
+        maxWidth: ["95%", "90%", "620px"],
+        maxHeight: "90%",
+        justifyContent: "center",
+        overflow: "auto"
+      },
+      children: content
+    })
+  });
+};
+
+//#endregion
+export { LockedOverlay };

package/dist/Markdown/index.d.mts

@@ -0,0 +1,16 @@
+
+import { FlexProps } from "@ttoss/ui";
+import { Options } from "react-markdown";
+
+//#region src/components/Markdown/Markdown.d.ts
+type MarkdownProps = Options & {
+  children: string;
+  sx?: FlexProps['sx'];
+};
+declare const Markdown: ({
+  children,
+  sx,
+  ...props
+}: MarkdownProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Markdown, MarkdownProps };

package/dist/Markdown/index.mjs

@@ -0,0 +1,26 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { jsx } from "react/jsx-runtime";
+import { BaseStyles } from "@ttoss/ui";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+
+//#region src/components/Markdown/Markdown.tsx
+const Markdown = ({
+  children,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(BaseStyles, {
+    sx,
+    children: /* @__PURE__ */jsx(ReactMarkdown, {
+      rehypePlugins: [rehypeRaw],
+      remarkPlugins: [remarkGfm],
+      ...props,
+      children
+    })
+  });
+};
+
+//#endregion
+export { Markdown };

package/dist/Menu/index.d.mts

@@ -0,0 +1,16 @@
+
+import * as React from "react";
+
+//#region src/components/Menu/Menu.d.ts
+type MenuProps = {
+  children: React.ReactNode;
+  sx?: Record<string, unknown>;
+  menuIcon?: string;
+};
+declare const Menu: ({
+  children,
+  sx,
+  menuIcon
+}: MenuProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Menu, MenuProps };