@ttoss/components 2.11.6 → 2.12.0

package/dist/EnhancedTitle/index.d.ts

@@ -0,0 +1,97 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BadgeProps } from '@ttoss/ui';
+
+/**
+ * Visual variant for the icon wrapper.
+ */
+type EnhancedTitleVariant = 'spotlight-accent' | 'spotlight-primary' | 'primary' | 'secondary' | 'accent' | 'positive' | 'negative' | 'informative' | 'muted';
+/**
+ * Badge configuration for top and bottom badge sections.
+ */
+interface EnhancedTitleBadge {
+    /**
+     * Icon to display in the badge.
+     */
+    icon?: string;
+    /**
+     * Badge label text.
+     */
+    label: string;
+    /**
+     * Badge visual variant.
+     */
+    variant?: BadgeProps['variant'];
+}
+/**
+ * Props for the EnhancedTitle component.
+ */
+interface EnhancedTitleProps {
+    /**
+     * Visual variant for the icon wrapper.
+     * @default 'primary'
+     */
+    variant?: EnhancedTitleVariant;
+    /**
+     * Icon to display next to the title.
+     */
+    icon?: string;
+    /**
+     * Main title text (heading).
+     */
+    title: string;
+    /**
+     * Optional subtitle/description text.
+     */
+    description?: string;
+    /**
+     * Optional text displayed next to the title (e.g., price, metadata).
+     */
+    frontTitle?: string;
+    /**
+     * Badges to display above the title.
+     */
+    topBadges?: EnhancedTitleBadge[];
+    /**
+     * Badges to display below the title.
+     */
+    bottomBadges?: EnhancedTitleBadge[];
+}
+
+/**
+ * EnhancedTitle component renders a structured title section with icon, badges, and metadata.
+ *
+ * This component is useful for displaying rich title sections with status indicators,
+ * feature tags, and supplementary information in a consistent layout.
+ *
+ * @example
+ * ```tsx
+ * <EnhancedTitle
+ *   icon="fluent:shield-24-filled"
+ *   title="Starter Plan"
+ *   frontTitle="R$ 49,90/mês"
+ *   description="Perfect for small teams"
+ *   variant="primary"
+ *   topBadges={[
+ *     { label: 'Active', variant: 'positive', icon: 'fluent:checkmark-circle-24-filled' }
+ *   ]}
+ *   bottomBadges={[
+ *     { label: 'OneClick Tracking', icon: 'fluent:checkmark-24-filled' }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <EnhancedTitle
+ *   title="Pro Plan"
+ *   frontTitle="$99/month"
+ *   variant="accent"
+ *   topBadges={[
+ *     { label: 'Most Popular', variant: 'informative' }
+ *   ]}
+ * />
+ * ```
+ */
+declare const EnhancedTitle: ({ variant, icon, title, description, frontTitle, topBadges, bottomBadges, }: EnhancedTitleProps) => react_jsx_runtime.JSX.Element;
+
+export { EnhancedTitle, type EnhancedTitleBadge, type EnhancedTitleProps, type EnhancedTitleVariant };

package/dist/LockedOverlay/index.d.ts

@@ -0,0 +1,151 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps, ThemeUIStyleObject, Theme } from '@ttoss/ui';
+import * as React from 'react';
+
+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) => react_jsx_runtime.JSX.Element | null;
+
+export { LockedOverlay };

package/dist/MetricCard/index.d.ts

@@ -0,0 +1,148 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconType } from '@ttoss/react-icons';
+
+/**
+ * Base metric properties shared by all metric types.
+ */
+interface BaseMetric {
+    /**
+     * Label displayed above the metric value.
+     */
+    label: string;
+    /**
+     * Optional tooltip text or action handler for additional context.
+     * When a string is provided, it displays a simple tooltip.
+     * When a function is provided, it's called when the tooltip icon is clicked.
+     */
+    tooltip?: string | (() => void);
+    /**
+     * Icon to display alongside the metric.
+     */
+    icon?: IconType;
+    /**
+     * Optional click handler to make the metric card interactive.
+     */
+    onClick?: () => void;
+    /**
+     * Optional help article action handler.
+     */
+    helpArticleAction?: () => void;
+}
+/**
+ * Date-based metric for displaying dates like expiration or renewal.
+ */
+interface DateMetric extends BaseMetric {
+    type: 'date';
+    /**
+     * The date value to display.
+     */
+    date: string;
+    /**
+     * Optional message showing remaining days.
+     */
+    remainingDaysMessage?: string;
+    /**
+     * Whether to show a warning indicator.
+     */
+    isWarning?: boolean;
+}
+/**
+ * Percentage-based metric with progress bar.
+ */
+interface PercentageMetric extends BaseMetric {
+    type: 'percentage';
+    /**
+     * Current value.
+     */
+    current: number;
+    /**
+     * Maximum value. Use null for unlimited.
+     */
+    max: number | null;
+    /**
+     * Custom formatter for displaying values.
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Percentage threshold at which to show an alert.
+     */
+    showAlertThreshold?: number;
+}
+/**
+ * Number-based metric for displaying counts.
+ */
+interface NumberMetric extends BaseMetric {
+    type: 'number';
+    /**
+     * Current value.
+     */
+    current: number;
+    /**
+     * Maximum value. Use null for unlimited.
+     */
+    max: number | null;
+    /**
+     * Custom formatter for displaying values.
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Optional footer text below the metric.
+     */
+    footerText?: string;
+}
+/**
+ * Union type for all supported metric types.
+ */
+type Metric = DateMetric | PercentageMetric | NumberMetric;
+/**
+ * Props for the MetricCard component.
+ */
+interface MetricCardProps {
+    /**
+     * The metric configuration to display.
+     */
+    metric: Metric;
+    /**
+     * Whether the card is in loading state.
+     */
+    isLoading?: boolean;
+}
+
+/**
+ * MetricCard component displays a metric in a consistent card layout.
+ *
+ * It supports three metric types:
+ * - **date**: displays a date and optional remaining-days message
+ * - **percentage**: displays current/max values and a progress bar
+ * - **number**: displays current/max values and an optional footer text
+ *
+ * @example
+ * ```tsx
+ * <MetricCard
+ *   metric={{
+ *     type: 'date',
+ *     label: 'Renewal date',
+ *     date: '31/12/2025',
+ *     icon: 'fluent:calendar-24-regular',
+ *     remainingDaysMessage: '10 days remaining',
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <MetricCard
+ *   metric={{
+ *     type: 'percentage',
+ *     label: 'Plan usage',
+ *     current: 350,
+ *     max: 1000,
+ *     icon: 'fluent:gauge-24-regular',
+ *     showAlertThreshold: 80,
+ *   }}
+ * />
+ * ```
+ */
+declare const MetricCard: ({ metric, isLoading }: MetricCardProps) => react_jsx_runtime.JSX.Element | null;
+
+export { type BaseMetric, type DateMetric, type Metric, MetricCard, type MetricCardProps, type NumberMetric, type PercentageMetric };

package/dist/NotificationsMenu/index.d.ts

@@ -1,6 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NotificationCardProps } from '../NotificationCard/index.js';
-import 'react';
+import * as React from 'react';
+
+type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+type NotificationAction = {
+    action?: 'open_url';
+    url?: string;
+    label?: string;
+};
+type NotificationCardProps = {
+    type: NotificationType;
+    title?: string | React.ReactNode;
+    message: string | React.ReactNode;
+    actions?: NotificationAction[];
+    caption?: string | React.ReactNode;
+    tags?: string[] | React.ReactNode;
+    onClose?: () => void;
+};
 
 type Notification = NotificationCardProps & {
     id: string;

package/dist/esm/EnhancedTitle/index.js

@@ -0,0 +1,190 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/EnhancedTitle/EnhancedTitle.tsx
+import { Icon } from "@ttoss/react-icons";
+import { Badge, Flex, Heading, Stack, Text } from "@ttoss/ui";
+
+// src/components/EnhancedTitle/EnhancedTitle.styles.ts
+import { keyframes } from "@ttoss/ui";
+var gradientFlow = keyframes({
+  "0%": {
+    backgroundPosition: "0% 50%"
+  },
+  "50%": {
+    backgroundPosition: "100% 50%"
+  },
+  "100%": {
+    backgroundPosition: "0% 50%"
+  }
+});
+var getAccentGradientBackground = /* @__PURE__ */__name(t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.accent?.default || theme.colors?.input?.background?.accent?.default;
+  if (!start) return void 0;
+  const middle = theme.colors?.action?.background?.accent?.active || theme.colors?.input?.background?.accent?.active || start;
+  return `linear-gradient(270deg, ${start}, ${middle}, ${start})`;
+}, "getAccentGradientBackground");
+var getPrimaryGradientBackground = /* @__PURE__ */__name(t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.primary?.default;
+  if (!start) return void 0;
+  const middle = theme.colors?.action?.background?.secondary?.default || start;
+  return `linear-gradient(270deg, ${start}, ${middle}, ${start})`;
+}, "getPrimaryGradientBackground");
+var getEnhancedTitleIconSx = /* @__PURE__ */__name(variant => {
+  const variantStyles = {
+    "spotlight-accent": {
+      backgroundColor: "input.background.accent.default",
+      color: "action.text.accent.default",
+      borderColor: "display.border.muted.default",
+      background: getAccentGradientBackground,
+      backgroundSize: "400% 400%",
+      animation: `${gradientFlow} 6s ease infinite`
+    },
+    "spotlight-primary": {
+      backgroundColor: "action.background.primary.default",
+      color: "display.text.accent.default",
+      borderColor: "display.border.muted.default",
+      background: getPrimaryGradientBackground,
+      backgroundSize: "400% 400%",
+      animation: `${gradientFlow} 6s ease infinite`
+    },
+    primary: {
+      backgroundColor: "action.background.primary.default",
+      color: "action.text.primary.default",
+      borderColor: "display.border.muted.default"
+    },
+    secondary: {
+      backgroundColor: "action.background.secondary.default",
+      color: "action.text.primary.default",
+      borderColor: "display.border.muted.default"
+    },
+    accent: {
+      backgroundColor: "action.background.accent.default",
+      color: "action.text.accent.default",
+      borderColor: "display.border.muted.default"
+    },
+    positive: {
+      backgroundColor: "display.bg.positive.boldest",
+      color: "display.fg.positive.bolder",
+      borderColor: "display.border.muted.default"
+    },
+    negative: {
+      backgroundColor: "display.bg.negative.boldest",
+      color: "display.fg.negative.bolder",
+      borderColor: "display.border.muted.default"
+    },
+    informative: {
+      backgroundColor: "display.bg.informative.boldest",
+      color: "display.fg.informative.bolder",
+      borderColor: "display.border.muted.default"
+    },
+    muted: {
+      backgroundColor: "display.bg.muted.boldest",
+      color: "display.fg.muted.bolder",
+      borderColor: "display.border.muted.default"
+    }
+  };
+  return {
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "2xl",
+    border: "md",
+    width: "56px",
+    height: "56px",
+    ...variantStyles[variant]
+  };
+}, "getEnhancedTitleIconSx");
+
+// src/components/EnhancedTitle/EnhancedTitle.tsx
+var EnhancedTitle = /* @__PURE__ */__name(({
+  variant = "spotlight-primary",
+  icon,
+  title,
+  description,
+  frontTitle,
+  topBadges = [],
+  bottomBadges = []
+}) => {
+  return /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      paddingY: "6",
+      paddingX: "6",
+      width: "full"
+    }
+  }, /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      gap: "6",
+      alignItems: "flex-start",
+      flexDirection: ["column", "row"]
+    }
+  }, icon && /* @__PURE__ */React.createElement(Flex, {
+    sx: getEnhancedTitleIconSx(variant)
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon,
+    width: 24,
+    height: 24
+  })), /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexDirection: "column",
+      gap: ["4", "5"],
+      flex: 1
+    }
+  }, topBadges.length > 0 && /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexWrap: "wrap",
+      gap: "2",
+      alignItems: "center"
+    }
+  }, topBadges.map((badge, index) => {
+    return /* @__PURE__ */React.createElement(Badge, {
+      key: index,
+      icon: badge.icon,
+      variant: badge.variant ?? "muted",
+      sx: {
+        borderRadius: "full"
+      }
+    }, badge.label);
+  })), /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexDirection: ["column", "row"],
+      alignItems: ["flex-start", "baseline"],
+      gap: ["1", "3"]
+    }
+  }, /* @__PURE__ */React.createElement(Heading, {
+    as: "h2",
+    sx: {
+      fontSize: "4xl",
+      fontWeight: "semibold",
+      color: "display.text.primary.default"
+    }
+  }, title), frontTitle && /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      fontSize: "xl",
+      color: "display.text.secondary.default"
+    }
+  }, frontTitle)), description && /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      fontSize: "md",
+      color: "display.text.secondary.default"
+    }
+  }, description), bottomBadges.length > 0 && /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexWrap: "wrap",
+      gap: "2"
+    }
+  }, bottomBadges.map((badge, index) => {
+    return /* @__PURE__ */React.createElement(Badge, {
+      key: index,
+      icon: badge.icon ?? "fluent:checkmark-24-filled",
+      variant: badge.variant ?? "muted",
+      sx: {
+        borderRadius: "full"
+      }
+    }, badge.label);
+  })))));
+}, "EnhancedTitle");
+export { EnhancedTitle };