@ttoss/components 2.14.25 → 2.14.27

package/dist/EnhancedTitle/index.mjs

@@ -1,234 +0,0 @@
-/** 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
-var gradientFlow = keyframes({
-  "0%": {
-    backgroundPosition: "0% 50%"
-  },
-  "50%": {
-    backgroundPosition: "100% 50%"
-  },
-  "100%": {
-    backgroundPosition: "0% 50%"
-  }
-});
-var 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})`;
-};
-var 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.
-*/
-var 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' }
-*   ]}
-* />
-* ```
-*/
-var 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

@@ -1,77 +0,0 @@
-
-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 };

package/dist/FileUploader/index.mjs

@@ -1,386 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from "react";
-import { Box, Button, Flex, Stack, Text } from "@ttoss/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useI18n } from "@ttoss/react-i18n";
-
-//#region src/components/FileUploader/FileUploader.tsx
-var FileUploader = ({
-  onUpload,
-  onUploadStart,
-  onUploadProgress,
-  onUploadComplete,
-  onUploadError,
-  onFilesChange,
-  onRemove,
-  accept,
-  multiple = true,
-  maxSize = 10 * 1024 * 1024,
-  maxFiles = 5,
-  disabled = false,
-  autoUpload = true,
-  retryAttempts = 2,
-  placeholder,
-  error,
-  children,
-  showFileList = true,
-  FileListComponent,
-  files: uploadedFiles = []
-}) => {
-  const {
-    intl
-  } = useI18n();
-  const [files, setFiles] = React.useState([]);
-  const [isDragOver, setIsDragOver] = React.useState(false);
-  const fileInputRef = React.useRef(null);
-  const formatFileSize = bytes => {
-    if (bytes === 0) return "0 Bytes";
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-  };
-  const validateFiles = newFiles => {
-    const fileArray = Array.from(newFiles);
-    const validFiles = [];
-    const currentFileCount = files.length;
-    if (currentFileCount >= maxFiles) return [];
-    for (const file of fileArray) {
-      if (maxSize && file.size > maxSize) continue;
-      if (validFiles.length + currentFileCount >= maxFiles) break;
-      validFiles.push(file);
-    }
-    return validFiles;
-  };
-  const updateFileState = React.useCallback((file, updates) => {
-    setFiles(prevFiles => {
-      const newFiles = prevFiles.map(f => {
-        return f.file === file ? {
-          ...f,
-          ...updates
-        } : f;
-      });
-      onFilesChange?.(newFiles);
-      return newFiles;
-    });
-  }, [onFilesChange]);
-  const uploadFile = React.useCallback(async (fileState, attempts = 0) => {
-    try {
-      onUploadStart?.(fileState.file);
-      updateFileState(fileState.file, {
-        status: "uploading",
-        progress: 0
-      });
-      const result = await onUpload(fileState.file, progress => {
-        updateFileState(fileState.file, {
-          progress
-        });
-        onUploadProgress?.(fileState.file, progress);
-      });
-      updateFileState(fileState.file, {
-        status: "completed",
-        progress: 100,
-        result
-      });
-      onUploadComplete?.(fileState.file, result);
-    } catch (error_) {
-      const error = error_;
-      if (attempts < retryAttempts) setTimeout(() => {
-        return uploadFile(fileState, attempts + 1);
-      }, 1e3 * (attempts + 1));else {
-        updateFileState(fileState.file, {
-          status: "error",
-          error
-        });
-        onUploadError?.(fileState.file, error);
-      }
-    }
-  }, [onUpload, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, retryAttempts, updateFileState]);
-  const addFiles = newFiles => {
-    const newFileStates = newFiles.map(file => {
-      return {
-        file,
-        status: "pending"
-      };
-    });
-    setFiles(prevFiles => {
-      const updatedFiles = [...prevFiles, ...newFileStates];
-      onFilesChange?.(updatedFiles);
-      return updatedFiles;
-    });
-    if (autoUpload) for (const fileState of newFileStates) uploadFile(fileState);
-  };
-  const handleFileChange = event => {
-    if (event.target.files) addFiles(validateFiles(event.target.files));
-  };
-  const handleDrop = event => {
-    event.preventDefault();
-    setIsDragOver(false);
-    if (disabled || files.length >= maxFiles) return;
-    const droppedFiles = event.dataTransfer.files;
-    if (droppedFiles) addFiles(validateFiles(droppedFiles));
-  };
-  const handleDragOver = event => {
-    event.preventDefault();
-    if (!disabled && files.length < maxFiles) setIsDragOver(true);
-  };
-  const handleDragLeave = event => {
-    event.preventDefault();
-    setIsDragOver(false);
-  };
-  const handleClick = () => {
-    if (!disabled && files.length < maxFiles && fileInputRef.current) fileInputRef.current.click();
-  };
-  const handleRemoveFile = React.useCallback(index => {
-    const fileToRemove = uploadedFiles[index];
-    onRemove?.(fileToRemove, index);
-  }, [uploadedFiles, onRemove]);
-  const isUploading = files.some(f => {
-    return f.status === "uploading";
-  });
-  const isMaxFilesReached = files.length >= maxFiles;
-  const fileListNode = React.useMemo(() => {
-    if (!showFileList || files.length === 0 && uploadedFiles.length === 0) return null;
-    if (FileListComponent) return /* @__PURE__ */jsx(FileListComponent, {
-      files: uploadedFiles,
-      onRemove: handleRemoveFile
-    });
-    return /* @__PURE__ */jsx(Stack, {
-      sx: {
-        gap: 1,
-        width: "100%"
-      },
-      children: uploadedFiles.map((file, index) => {
-        return /* @__PURE__ */jsxs(Flex, {
-          sx: {
-            width: "full",
-            alignItems: "center",
-            justifyContent: "space-between",
-            p: 2,
-            backgroundColor: "display.background.secondary.default",
-            borderRadius: "md",
-            gap: 2
-          },
-          children: [/* @__PURE__ */jsxs(Flex, {
-            sx: {
-              alignItems: "center",
-              gap: 2,
-              flex: 1
-            },
-            children: [file.imageUrl && /* @__PURE__ */jsx(Box, {
-              sx: {
-                width: 32,
-                height: 32
-              },
-              children: /* @__PURE__ */jsx("img", {
-                src: file.imageUrl,
-                alt: file.name,
-                style: {
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "cover",
-                  borderRadius: 4
-                }
-              })
-            }), /* @__PURE__ */jsx(Box, {
-              sx: {
-                flex: 1
-              },
-              children: /* @__PURE__ */jsx("a", {
-                href: file.url,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                style: {
-                  textDecoration: "none",
-                  color: "inherit"
-                },
-                children: /* @__PURE__ */jsx(Text, {
-                  variant: "body",
-                  sx: {
-                    fontWeight: "medium",
-                    "&:hover": {
-                      textDecoration: "underline",
-                      color: "primary.default"
-                    }
-                  },
-                  children: file.name
-                })
-              })
-            })]
-          }), /* @__PURE__ */jsx(Button, {
-            variant: "destructive",
-            onClick: () => {
-              return handleRemoveFile(index);
-            },
-            sx: {
-              fontSize: "sm",
-              color: "text.muted",
-              "&:hover": {
-                color: "error.default"
-              }
-            },
-            children: intl.formatMessage({
-              id: "G/yZLu",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Remove"
-              }]
-            })
-          })]
-        }, file.id);
-      })
-    });
-  }, [files.length, uploadedFiles, handleRemoveFile, intl, showFileList, FileListComponent]);
-  const placeholderTexts = React.useMemo(() => {
-    const texts = [];
-    if (isUploading) texts.push(intl.formatMessage({
-      id: "JEsxDw",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Uploading..."
-      }]
-    }));else if (isMaxFilesReached) texts.push(intl.formatMessage({
-      id: "eRShvB",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Maximum files reached"
-      }]
-    }));else texts.push(placeholder || intl.formatMessage({
-      id: "gy0Ynb",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Click or drag files here"
-      }]
-    }));
-    if (!isUploading && !isMaxFilesReached) {
-      if (accept) texts.push(accept);
-      if (maxSize) texts.push(`Max ${formatFileSize(maxSize)}`);
-      if (multiple && maxFiles) texts.push(intl.formatMessage({
-        id: "fOOwej",
-        defaultMessage: [{
-          "type": 6,
-          "value": "max_files",
-          "options": {
-            "one": {
-              "value": [{
-                "type": 0,
-                "value": "Up to "
-              }, {
-                "type": 7
-              }, {
-                "type": 0,
-                "value": " file"
-              }]
-            },
-            "other": {
-              "value": [{
-                "type": 0,
-                "value": "Up to "
-              }, {
-                "type": 7
-              }, {
-                "type": 0,
-                "value": " files"
-              }]
-            }
-          },
-          "offset": 0,
-          "pluralType": "cardinal"
-        }]
-      }, {
-        max_files: maxFiles
-      }));
-    }
-    return texts.filter(Boolean).join(" • ");
-  }, [isUploading, isMaxFilesReached, intl, placeholder, accept, maxSize, multiple, maxFiles]);
-  return /* @__PURE__ */jsxs(Stack, {
-    sx: {
-      gap: 3,
-      justifyContent: "stretch",
-      width: "100%"
-    },
-    children: [/* @__PURE__ */jsxs(Box, {
-      onDrop: handleDrop,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onClick: handleClick,
-      sx: {
-        width: "100%",
-        border: "2px dashed",
-        borderColor: error ? "error.default" : isDragOver ? "primary.default" : "display.border.muted.default",
-        borderRadius: "xl",
-        padding: 6,
-        textAlign: "center",
-        cursor: disabled || isUploading || isMaxFilesReached ? "not-allowed" : "pointer",
-        backgroundColor: isDragOver ? "primary.muted" : "display.background.secondary.default",
-        transition: "all 0.2s ease",
-        opacity: disabled || isMaxFilesReached ? .6 : 1,
-        "&:hover": {
-          borderColor: !disabled && !isUploading && !error && !isMaxFilesReached ? "primary.default" : void 0,
-          backgroundColor: !disabled && !isUploading && !isMaxFilesReached ? "primary.muted" : void 0
-        }
-      },
-      children: [/* @__PURE__ */jsx("input", {
-        ref: fileInputRef,
-        type: "file",
-        accept,
-        multiple,
-        onChange: handleFileChange,
-        disabled: disabled || isUploading || isMaxFilesReached,
-        style: {
-          display: "none"
-        }
-      }), children || /* @__PURE__ */jsxs(Flex, {
-        sx: {
-          flexDirection: "column",
-          alignItems: "center",
-          gap: 3,
-          justifyContent: "center"
-        },
-        children: [/* @__PURE__ */jsx(Text, {
-          sx: {
-            fontSize: "2xl"
-          },
-          children: intl.formatMessage({
-            id: "XKyo5X",
-            defaultMessage: [{
-              "type": 0,
-              "value": "File Upload"
-            }]
-          })
-        }), /* @__PURE__ */jsx(Box, {
-          sx: {
-            textAlign: "center"
-          },
-          children: /* @__PURE__ */jsx(Text, {
-            variant: "body",
-            sx: {
-              color: "text.default",
-              mb: 1
-            },
-            children: placeholderTexts
-          })
-        }), !isUploading && !isMaxFilesReached && /* @__PURE__ */jsx(Button, {
-          variant: "secondary",
-          disabled,
-          children: intl.formatMessage({
-            id: "fDCMA6",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Select Files"
-            }]
-          })
-        })]
-      })]
-    }), error && /* @__PURE__ */jsx(Text, {
-      variant: "caption",
-      sx: {
-        color: "error.default"
-      },
-      children: error
-    }), fileListNode]
-  });
-};
-
-//#endregion
-export { FileUploader };

package/dist/InstallPwa/index.d.mts

@@ -1,13 +0,0 @@
-
-import * as React from "react";
-
-//#region src/components/InstallPwa/InstallPwa.d.ts
-type InstallPwaUiProps = {
-  onInstall: React.MouseEventHandler<HTMLButtonElement>;
-};
-declare const InstallPwaUi: ({
-  onInstall
-}: InstallPwaUiProps) => import("react/jsx-runtime").JSX.Element;
-declare const InstallPwa: () => import("react/jsx-runtime").JSX.Element | null;
-//#endregion
-export { InstallPwa, InstallPwaUi, InstallPwaUiProps };