@ttoss/components 2.14.19 → 2.14.21

package/dist/Drawer/index.d.mts

@@ -0,0 +1,17 @@
+
+import { BoxProps } from "@ttoss/ui";
+import * as React from "react";
+import DrawerUi from "react-modern-drawer";
+
+//#region src/components/Drawer/Drawer.d.ts
+type DrawerUiProps = React.ComponentProps<typeof DrawerUi>;
+type DrawerProps = DrawerUiProps & {
+  sx?: BoxProps['sx'];
+};
+declare const Drawer: ({
+  children,
+  sx,
+  ...props
+}: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Drawer, DrawerProps };

package/dist/{esm/Drawer/index.js → Drawer/index.mjs}

@@ -1,16 +1,16 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/Drawer/Drawer.tsx
 import { Box } from "@ttoss/ui";
-import * as React from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import DrawerUi from "react-modern-drawer";
-var Drawer = /* @__PURE__ */__name(({
+
+//#region src/components/Drawer/Drawer.tsx
+const Drawer = ({
   children,
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */React.createElement(Box, {
+  return /* @__PURE__ */jsx(Box, {
     "data-testid": "drawer-container",
     sx: {
       /**
@@ -48,12 +48,19 @@ var Drawer = /* @__PURE__ */__name(({
         overflowY: "auto"
       },
       ...sx
-    }
-  }, /* @__PURE__ */React.createElement(DrawerUi, props, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      width: "100%",
-      height: "100%"
-    }
-  }, children)));
-}, "Drawer");
+    },
+    children: /* @__PURE__ */jsx(DrawerUi, {
+      ...props,
+      children: /* @__PURE__ */jsx(Box, {
+        sx: {
+          width: "100%",
+          height: "100%"
+        },
+        children
+      })
+    })
+  });
+};
+
+//#endregion
 export { Drawer };

package/dist/EnhancedTitle/{index.d.ts → index.d.mts}

@@ -1,6 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BadgeProps } from '@ttoss/ui';
 
+import { BadgeProps } from "@ttoss/ui";
+
+//#region src/components/EnhancedTitle/EnhancedTitle.types.d.ts
 /**
  * Visual variant for the icon wrapper.
  */
@@ -9,54 +10,55 @@ type EnhancedTitleVariant = 'spotlight-accent' | 'spotlight-primary' | 'primary'
  * 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'];
+  /**
+   * 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[];
+  /**
+   * 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[];
 }
-
+//#endregion
+//#region src/components/EnhancedTitle/EnhancedTitle.d.ts
 /**
  * EnhancedTitle component renders a structured title section with icon, badges, and metadata.
  *
@@ -92,6 +94,14 @@ interface EnhancedTitleProps {
  * />
  * ```
  */
-declare const EnhancedTitle: ({ variant, icon, title, description, frontTitle, topBadges, bottomBadges, }: EnhancedTitleProps) => react_jsx_runtime.JSX.Element;
-
-export { EnhancedTitle, type EnhancedTitleBadge, type EnhancedTitleProps, type EnhancedTitleVariant };
+declare const EnhancedTitle: ({
+  variant,
+  icon,
+  title,
+  description,
+  frontTitle,
+  topBadges,
+  bottomBadges
+}: EnhancedTitleProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { EnhancedTitle, EnhancedTitleBadge, EnhancedTitleProps, EnhancedTitleVariant };

package/dist/EnhancedTitle/index.mjs

@@ -0,0 +1,234 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Badge, Flex, Heading, Stack, Text, keyframes } from "@ttoss/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@ttoss/react-icons";
+
+//#region src/components/EnhancedTitle/EnhancedTitle.styles.ts
+const gradientFlow = keyframes({
+  "0%": {
+    backgroundPosition: "0% 50%"
+  },
+  "50%": {
+    backgroundPosition: "100% 50%"
+  },
+  "100%": {
+    backgroundPosition: "0% 50%"
+  }
+});
+const getAccentGradientBackground = t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.accent?.default || theme.colors?.input?.background?.accent?.default;
+  if (!start) return void 0;
+  return `linear-gradient(270deg, ${start}, ${theme.colors?.action?.background?.accent?.active || theme.colors?.input?.background?.accent?.active || start}, ${start})`;
+};
+const getPrimaryGradientBackground = t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.primary?.default;
+  if (!start) return void 0;
+  return `linear-gradient(270deg, ${start}, ${theme.colors?.action?.background?.secondary?.default || start}, ${start})`;
+};
+/**
+* Returns style configuration for the icon wrapper based on variant.
+*/
+const getEnhancedTitleIconSx = variant => {
+  return {
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "2xl",
+    border: "md",
+    width: "56px",
+    height: "56px",
+    ...{
+      "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"
+      }
+    }[variant]
+  };
+};
+
+//#endregion
+//#region src/components/EnhancedTitle/EnhancedTitle.tsx
+/**
+* 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' }
+*   ]}
+* />
+* ```
+*/
+const EnhancedTitle = ({
+  variant = "spotlight-primary",
+  icon,
+  title,
+  description,
+  frontTitle,
+  topBadges = [],
+  bottomBadges = []
+}) => {
+  return /* @__PURE__ */jsx(Stack, {
+    sx: {
+      paddingY: "6",
+      paddingX: "6",
+      width: "full"
+    },
+    children: /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        gap: "6",
+        alignItems: "flex-start",
+        flexDirection: ["column", "row"]
+      },
+      children: [icon && /* @__PURE__ */jsx(Flex, {
+        sx: getEnhancedTitleIconSx(variant),
+        children: /* @__PURE__ */jsx(Icon, {
+          icon,
+          width: 24,
+          height: 24
+        })
+      }), /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          flexDirection: "column",
+          gap: ["4", "5"],
+          flex: 1
+        },
+        children: [topBadges.length > 0 && /* @__PURE__ */jsx(Flex, {
+          sx: {
+            flexWrap: "wrap",
+            gap: "2",
+            alignItems: "center"
+          },
+          children: topBadges.map((badge, index) => {
+            return /* @__PURE__ */jsx(Badge, {
+              icon: badge.icon,
+              variant: badge.variant ?? "muted",
+              sx: {
+                borderRadius: "full"
+              },
+              children: badge.label
+            }, index);
+          })
+        }), /* @__PURE__ */jsxs(Flex, {
+          sx: {
+            flexDirection: ["column", "row"],
+            alignItems: ["flex-start", "baseline"],
+            gap: ["1", "3"]
+          },
+          children: [/* @__PURE__ */jsx(Heading, {
+            as: "h2",
+            sx: {
+              fontSize: "4xl",
+              fontWeight: "semibold",
+              color: "display.text.primary.default"
+            },
+            children: title
+          }), frontTitle && /* @__PURE__ */jsx(Text, {
+            sx: {
+              fontSize: "xl",
+              color: "display.text.secondary.default"
+            },
+            children: frontTitle
+          })]
+        }), description && /* @__PURE__ */jsx(Text, {
+          sx: {
+            fontSize: "md",
+            color: "display.text.secondary.default"
+          },
+          children: description
+        }), bottomBadges.length > 0 && /* @__PURE__ */jsx(Flex, {
+          sx: {
+            flexWrap: "wrap",
+            gap: "2"
+          },
+          children: bottomBadges.map((badge, index) => {
+            return /* @__PURE__ */jsx(Badge, {
+              icon: badge.icon ?? "fluent:checkmark-24-filled",
+              variant: badge.variant ?? "muted",
+              sx: {
+                borderRadius: "full"
+              },
+              children: badge.label
+            }, index);
+          })
+        })]
+      })]
+    })
+  });
+};
+
+//#endregion
+export { EnhancedTitle };

package/dist/FileUploader/index.d.mts

@@ -0,0 +1,77 @@
+
+import * as React from "react";
+
+//#region src/components/FileUploader/FileUploader.d.ts
+type UploadResult = {
+  url: string;
+  id: string | number;
+};
+type FileUploadState = {
+  file: File;
+  status: 'pending' | 'uploading' | 'completed' | 'error';
+  progress?: number;
+  result?: UploadResult;
+  error?: Error;
+};
+type OnUpload = (file: File, onProgress?: (progress: number) => void) => Promise<UploadResult>;
+type OnUploadStart = (file: File) => void;
+type OnUploadProgress = (file: File, progress: number) => void;
+type OnUploadComplete = (file: File, result: UploadResult) => void;
+type OnUploadError = (file: File, error: Error) => void;
+type OnFilesChange = (files: FileUploadState[]) => void;
+type OnRemove = (file: UploadedFile, index: number) => void;
+type UploadedFile = {
+  id: string | number;
+  name: string;
+  imageUrl?: string;
+  url: string;
+};
+type FileUploaderProps = {
+  onUpload: OnUpload;
+  onUploadStart?: OnUploadStart;
+  onUploadProgress?: OnUploadProgress;
+  onUploadComplete?: OnUploadComplete;
+  onUploadError?: OnUploadError;
+  onFilesChange?: OnFilesChange;
+  onRemove?: OnRemove;
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number;
+  maxFiles?: number;
+  disabled?: boolean;
+  autoUpload?: boolean;
+  retryAttempts?: number;
+  placeholder?: string;
+  error?: string;
+  children?: React.ReactNode;
+  showFileList?: boolean;
+  FileListComponent?: (props: {
+    files: UploadedFile[];
+    onRemove: (index: number) => void;
+  }) => React.ReactNode;
+  files?: UploadedFile[];
+};
+declare const FileUploader: ({
+  onUpload,
+  onUploadStart,
+  onUploadProgress,
+  onUploadComplete,
+  onUploadError,
+  onFilesChange,
+  onRemove,
+  accept,
+  multiple,
+  maxSize,
+  maxFiles,
+  disabled,
+  autoUpload,
+  retryAttempts,
+  placeholder,
+  error,
+  children,
+  showFileList,
+  FileListComponent,
+  files: uploadedFiles
+}: FileUploaderProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FileUploadState, FileUploader, FileUploaderProps, OnFilesChange, OnRemove, OnUpload, OnUploadComplete, OnUploadError, OnUploadProgress, OnUploadStart, UploadResult, UploadedFile };