@punkbit/cui 0.0.248-rc.1 → 0.2.0-rc.3

package/dist/cjs/components/FileUpload/FileUploadItem.cjs

@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+const MiddleTruncator = require('../MiddleTruncator/index.cjs');
+const file = require('../../utils/file.cjs');
+const Icon = require('../Icon/index.cjs');
+const ProgressBar = require('../ProgressBar/index.cjs');
+const IconButton = require('../IconButton/index.cjs');
+const Text = require('../Text/index.cjs');
+
+const FileItemContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-1ajq0pc-0"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:", ";flex:1;min-width:0;", ""], ({
+  theme
+}) => theme.click.fileUpload.sm.space.gap, (props) => !props.$inline && styledComponents.css(["background-color:", ";border:", ";border-radius:", ";padding:", ";", ""], ({
+  theme
+}) => theme.click.fileUpload.color.background.default, ({
+  theme
+}) => `1px solid ${theme.click.fileUpload.color.stroke.default}`, ({
+  theme
+}) => theme.click.fileUpload.sm.radii.all, ({
+  theme
+}) => `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}`, props.$isError && styledComponents.css(["background-color:", ";border-color:transparent;"], ({
+  theme
+}) => theme.click.fileUpload.color.background.error)));
+const DocumentIcon = styledComponents.styled(Icon.Icon).withConfig({
+  componentId: "sc-1ajq0pc-1"
+})(["svg{width:", ";height:", ";color:", ";}"], ({
+  theme,
+  $size
+}) => $size === "sm" ? theme.click.fileUpload.sm.icon.size.width : theme.click.fileUpload.md.icon.size.width, ({
+  theme,
+  $size
+}) => $size === "sm" ? theme.click.fileUpload.sm.icon.size.height : theme.click.fileUpload.md.icon.size.height, ({
+  theme,
+  $size
+}) => $size === "sm" ? theme.click.fileUpload.sm.color.icon.default : theme.click.fileUpload.md.color.icon.default);
+const FileUploadDescription = styledComponents.styled(Text.Text).withConfig({
+  componentId: "sc-1ajq0pc-2"
+})(["font:", ";color:", ";"], ({
+  theme
+}) => theme.click.fileUpload.typography.description.default, ({
+  theme,
+  $isError
+}) => $isError ? theme.click.fileUpload.color.title.error : theme.click.fileUpload.color.description.default);
+const FileDetails = styledComponents.styled.div.withConfig({
+  componentId: "sc-1ajq0pc-3"
+})(["display:flex;gap:", ";border:none;min-width:0;"], ({
+  theme
+}) => theme.click.fileUpload.md.space.gap);
+const FileActions = styledComponents.styled.div.withConfig({
+  componentId: "sc-1ajq0pc-4"
+})(["display:flex;align-items:center;margin-left:auto;gap:0;"]);
+const FileContentContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-1ajq0pc-5"
+})(["flex:1;display:flex;flex-direction:column;justify-content:center;min-height:", ";min-width:0;"], ({
+  $size
+}) => $size === "sm" ? "24px" : "auto");
+const ProgressBarWrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-1ajq0pc-6"
+})(["margin-top:", ";margin-bottom:9px;"], ({
+  theme
+}) => theme.click.fileUpload.md.space.gap);
+const FileUploadItem = ({
+  fileName,
+  fileSize,
+  progress = 0,
+  showSuccess = false,
+  showProgress = false,
+  failureMessage = "Upload failed",
+  onRetry,
+  onRemove,
+  size = "sm",
+  inline = false
+}) => {
+  const isError = !showSuccess && !showProgress;
+  return /* @__PURE__ */ jsxRuntime.jsxs(FileItemContainer, { $isError: isError, $inline: inline, $size: size, children: [
+    showSuccess ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "xs", state: "success", name: "check" }) : /* @__PURE__ */ jsxRuntime.jsx(DocumentIcon, { name: "document", $size: size }),
+    /* @__PURE__ */ jsxRuntime.jsxs(FileContentContainer, { $size: size, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(FileDetails, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MiddleTruncator.MiddleTruncator, { text: fileName }),
+        showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsxs(FileUploadDescription, { children: [
+          progress,
+          "%"
+        ] })
+      ] }),
+      isError && /* @__PURE__ */ jsxRuntime.jsx(FileUploadDescription, { $isError: true, children: failureMessage }),
+      showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsx(ProgressBarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar.ProgressBar, { progress, type: "small" }) }),
+      showSuccess && /* @__PURE__ */ jsxRuntime.jsx(FileUploadDescription, { children: file.formatFileSize(fileSize) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(FileActions, { children: [
+      isError && onRetry && /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { size: "sm", icon: "refresh", type: "ghost", onClick: onRetry }),
+      onRemove && /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { size: "sm", icon: "cross", type: "ghost", onClick: onRemove })
+    ] })
+  ] });
+};
+
+exports.FileUploadItem = FileUploadItem;
+//# sourceMappingURL=FileUploadItem.cjs.map

package/dist/cjs/components/FileUpload/FileUploadItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadItem.cjs","sources":["../../../../src/components/FileUpload/FileUploadItem.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { styled, css } from 'styled-components';\nimport { Text } from '@/components/Text';\nimport { Icon } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { ProgressBar } from '@/components/ProgressBar';\nimport { MiddleTruncator } from '@/components/MiddleTruncator';\nimport { formatFileSize } from '@/utils/file';\n\nexport interface FileUploadItemProps {\n  fileName: string;\n  fileSize: number;\n  progress?: number;\n  showSuccess?: boolean;\n  showProgress?: boolean;\n  failureMessage?: string;\n  onRetry?: () => void;\n  onRemove?: () => void;\n  size?: 'sm' | 'md';\n  inline?: boolean;\n}\n\nconst FileItemContainer = styled.div<{\n  $isError?: boolean;\n  $inline?: boolean;\n  $size?: 'sm' | 'md';\n}>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: ${({ theme }) => theme.click.fileUpload.sm.space.gap};\n  flex: 1;\n  min-width: 0;\n\n  ${props =>\n    !props.$inline &&\n    css`\n      background-color: ${({ theme }) => theme.click.fileUpload.color.background.default};\n      border: ${({ theme }) =>\n        `1px solid ${theme.click.fileUpload.color.stroke.default}`};\n      border-radius: ${({ theme }) => theme.click.fileUpload.sm.radii.all};\n      padding: ${({ theme }) =>\n        `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}`};\n\n      ${props.$isError &&\n      css`\n        background-color: ${({ theme }) => theme.click.fileUpload.color.background.error};\n        border-color: transparent;\n      `}\n    `}\n`;\n\nconst DocumentIcon = styled(Icon)<{ $size?: 'sm' | 'md' }>`\n  svg {\n    width: ${({ theme, $size }) =>\n      $size === 'sm'\n        ? theme.click.fileUpload.sm.icon.size.width\n        : theme.click.fileUpload.md.icon.size.width};\n    height: ${({ theme, $size }) =>\n      $size === 'sm'\n        ? theme.click.fileUpload.sm.icon.size.height\n        : theme.click.fileUpload.md.icon.size.height};\n    color: ${({ theme, $size }) =>\n      $size === 'sm'\n        ? theme.click.fileUpload.sm.color.icon.default\n        : theme.click.fileUpload.md.color.icon.default};\n  }\n`;\n\nconst FileUploadDescription = styled(Text)<{ $isError?: boolean }>`\n  font: ${({ theme }) => theme.click.fileUpload.typography.description.default};\n  color: ${({ theme, $isError }) =>\n    $isError\n      ? theme.click.fileUpload.color.title.error\n      : theme.click.fileUpload.color.description.default};\n`;\n\nconst FileDetails = styled.div`\n  display: flex;\n  gap: ${({ theme }) => theme.click.fileUpload.md.space.gap};\n  border: none;\n  min-width: 0;\n`;\n\nconst FileActions = styled.div`\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  gap: 0;\n`;\n\nconst FileContentContainer = styled.div<{ $size: 'sm' | 'md' }>`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: ${({ $size }) => ($size === 'sm' ? '24px' : 'auto')};\n  min-width: 0;\n`;\n\nconst ProgressBarWrapper = styled.div`\n  margin-top: ${({ theme }) => theme.click.fileUpload.md.space.gap};\n  margin-bottom: 9px;\n`;\n\nexport const FileUploadItem: FC<FileUploadItemProps> = ({\n  fileName,\n  fileSize,\n  progress = 0,\n  showSuccess = false,\n  showProgress = false,\n  failureMessage = 'Upload failed',\n  onRetry,\n  onRemove,\n  size = 'sm',\n  inline = false,\n}) => {\n  const isError = !showSuccess && !showProgress;\n\n  return (\n    <FileItemContainer\n      $isError={isError}\n      $inline={inline}\n      $size={size}\n    >\n      {showSuccess ? (\n        <Icon\n          size={'xs'}\n          state={'success'}\n          name={'check'}\n        />\n      ) : (\n        <DocumentIcon\n          name={'document'}\n          $size={size}\n        />\n      )}\n\n      <FileContentContainer $size={size}>\n        <FileDetails>\n          <MiddleTruncator text={fileName} />\n          {showProgress && !showSuccess && (\n            <FileUploadDescription>{progress}%</FileUploadDescription>\n          )}\n        </FileDetails>\n\n        {isError && (\n          <FileUploadDescription $isError>{failureMessage}</FileUploadDescription>\n        )}\n\n        {showProgress && !showSuccess && (\n          <ProgressBarWrapper>\n            <ProgressBar\n              progress={progress}\n              type={'small'}\n            />\n          </ProgressBarWrapper>\n        )}\n\n        {showSuccess && (\n          <FileUploadDescription>{formatFileSize(fileSize)}</FileUploadDescription>\n        )}\n      </FileContentContainer>\n\n      <FileActions>\n        {isError && onRetry && (\n          <IconButton\n            size={'sm'}\n            icon={'refresh'}\n            type={'ghost'}\n            onClick={onRetry}\n          />\n        )}\n        {onRemove && (\n          <IconButton\n            size={'sm'}\n            icon={'cross'}\n            type={'ghost'}\n            onClick={onRemove}\n          />\n        )}\n      </FileActions>\n    </FileItemContainer>\n  );\n};\n"],"names":["FileItemContainer","styled","div","withConfig","componentId","theme","click","fileUpload","sm","space","gap","props","$inline","css","color","background","default","stroke","radii","all","y","x","$isError","error","DocumentIcon","Icon","$size","icon","size","width","md","height","FileUploadDescription","Text","typography","description","title","FileDetails","FileActions","FileContentContainer","ProgressBarWrapper","FileUploadItem","fileName","fileSize","progress","showSuccess","showProgress","failureMessage","onRetry","onRemove","inline","isError","jsx","jsxs","MiddleTruncator","ProgressBar","formatFileSize","IconButton"],"mappings":"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"}

package/dist/cjs/components/FileUpload/index.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const FileUploadArea = require('./FileUploadArea.cjs');
+const FileUploadItem = require('./FileUploadItem.cjs');
+const useDragAndDrop = require('./useDragAndDrop.cjs');
+
+const FileUpload = ({
+  title,
+  supportedFileTypes = [".txt", ".sql"],
+  size = "sm",
+  onFileSelect,
+  onRetry,
+  progress = 0,
+  failureMessage = "Upload failed",
+  showProgress = false,
+  showSuccess = false,
+  onFileFailure,
+  onFileClose
+}) => {
+  const [file, setFile] = react.useState(null);
+  const handleFilesProcessed = react.useCallback((files) => {
+    const selectedFile = files[0];
+    const newFile = {
+      name: selectedFile.name,
+      size: selectedFile.size
+    };
+    setFile(newFile);
+    if (onFileSelect) {
+      onFileSelect(selectedFile);
+    }
+  }, [onFileSelect]);
+  const {
+    isDragging,
+    isNotSupported,
+    fileInputRef,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    handleFileSelect,
+    handleBrowseClick
+  } = useDragAndDrop.useDragAndDrop({
+    onFilesProcessed: handleFilesProcessed,
+    supportedFileTypes,
+    onFileFailure,
+    multiple: false
+  });
+  const handleRemoveFile = react.useCallback(() => {
+    setFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    if (onFileClose) {
+      onFileClose();
+    }
+  }, [onFileClose, fileInputRef]);
+  const handleRetryUpload = react.useCallback(() => {
+    if (onRetry) {
+      onRetry();
+    }
+  }, [onRetry]);
+  const acceptedFileTypes = supportedFileTypes.join(",");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FileUploadArea.FileUploadArea, { title, supportedFileTypes, size, isDragging, isNotSupported, hasFile: !!file, isError: !!file && !showSuccess && !showProgress, multiple: false, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleBrowseClick, children: file && /* @__PURE__ */ jsxRuntime.jsx(FileUploadItem.FileUploadItem, { fileName: file.name, fileSize: file.size, progress, showSuccess, showProgress, failureMessage, onRetry: handleRetryUpload, onRemove: handleRemoveFile, size, inline: true }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, style: {
+      display: "none"
+    } })
+  ] });
+};
+
+exports.FileUpload = FileUpload;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/FileUpload/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { FileUploadArea } from './FileUploadArea';\nimport { FileUploadItem } from './FileUploadItem';\nimport { useDragAndDrop } from './useDragAndDrop';\n\ninterface FileInfo {\n  name: string;\n  size: number;\n}\n\nexport interface FileUploadProps {\n  /** The title text displayed in the upload area */\n  title: string;\n  supportedFileTypes?: string[];\n  size?: 'sm' | 'md';\n  progress?: number;\n  showSuccess?: boolean;\n  showProgress?: boolean;\n  failureMessage?: string;\n  onRetry?: () => void;\n  onFileSelect?: (file: File) => void;\n  onFileFailure?: () => void;\n  onFileClose?: () => void;\n}\n\nexport const FileUpload = ({\n  title,\n  supportedFileTypes = ['.txt', '.sql'],\n  size = 'sm',\n  onFileSelect,\n  onRetry,\n  progress = 0,\n  failureMessage = 'Upload failed',\n  showProgress = false,\n  showSuccess = false,\n  onFileFailure,\n  onFileClose,\n}: FileUploadProps) => {\n  const [file, setFile] = useState<FileInfo | null>(null);\n\n  const handleFilesProcessed = useCallback(\n    (files: File[]) => {\n      const selectedFile = files[0];\n      const newFile: FileInfo = {\n        name: selectedFile.name,\n        size: selectedFile.size,\n      };\n\n      setFile(newFile);\n\n      if (onFileSelect) {\n        onFileSelect(selectedFile);\n      }\n    },\n    [onFileSelect]\n  );\n\n  const {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  } = useDragAndDrop({\n    onFilesProcessed: handleFilesProcessed,\n    supportedFileTypes,\n    onFileFailure,\n    multiple: false,\n  });\n\n  const handleRemoveFile = useCallback(() => {\n    setFile(null);\n    if (fileInputRef.current) {\n      fileInputRef.current.value = '';\n    }\n\n    if (onFileClose) {\n      onFileClose();\n    }\n  }, [onFileClose, fileInputRef]);\n\n  const handleRetryUpload = useCallback(() => {\n    if (onRetry) {\n      onRetry();\n    }\n  }, [onRetry]);\n\n  const acceptedFileTypes = supportedFileTypes.join(',');\n\n  return (\n    <>\n      <FileUploadArea\n        title={title}\n        supportedFileTypes={supportedFileTypes}\n        size={size}\n        isDragging={isDragging}\n        isNotSupported={isNotSupported}\n        hasFile={!!file}\n        isError={!!file && !showSuccess && !showProgress}\n        multiple={false}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onClick={handleBrowseClick}\n      >\n        {file && (\n          <FileUploadItem\n            fileName={file.name}\n            fileSize={file.size}\n            progress={progress}\n            showSuccess={showSuccess}\n            showProgress={showProgress}\n            failureMessage={failureMessage}\n            onRetry={handleRetryUpload}\n            onRemove={handleRemoveFile}\n            size={size}\n            inline={true}\n          />\n        )}\n      </FileUploadArea>\n\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        accept={acceptedFileTypes}\n        onChange={handleFileSelect}\n        style={{ display: 'none' }}\n      />\n    </>\n  );\n};\n"],"names":["FileUpload","title","supportedFileTypes","size","onFileSelect","onRetry","progress","failureMessage","showProgress","showSuccess","onFileFailure","onFileClose","file","setFile","useState","handleFilesProcessed","useCallback","files","selectedFile","newFile","name","isDragging","isNotSupported","fileInputRef","handleDragEnter","handleDragLeave","handleDragOver","handleDrop","handleFileSelect","handleBrowseClick","useDragAndDrop","onFilesProcessed","multiple","handleRemoveFile","current","value","handleRetryUpload","acceptedFileTypes","join","jsxs","Fragment","jsx","FileUploadArea","FileUploadItem","display"],"mappings":"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"}

package/dist/cjs/components/FileUpload/useDragAndDrop.cjs

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+const isFiletypeSupported = (filename, supportedTypes) => {
+  if (!supportedTypes.length) {
+    return true;
+  }
+  const extension = filename.toLowerCase().slice(filename.lastIndexOf("."));
+  return supportedTypes.some((type) => type.toLowerCase() === extension.toLowerCase());
+};
+const useDragAndDrop = ({
+  onFilesProcessed,
+  supportedFileTypes,
+  onFileFailure,
+  multiple = false
+}) => {
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [isNotSupported, setIsNotSupported] = react.useState(false);
+  const fileInputRef = react.useRef(null);
+  const dragCounterRef = react.useRef(0);
+  react.useEffect(() => {
+    let timeoutId;
+    if (isNotSupported) {
+      timeoutId = setTimeout(() => {
+        setIsNotSupported(false);
+      }, 2e3);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isNotSupported]);
+  const handleDragEnter = react.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current += 1;
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = react.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current -= 1;
+    if (dragCounterRef.current <= 0) {
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+    }
+  }, []);
+  const handleDragOver = react.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  react.useEffect(() => {
+    const handleDragEnd = () => {
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+    };
+    window.addEventListener("dragend", handleDragEnd);
+    document.addEventListener("drop", handleDragEnd);
+    document.addEventListener("mouseleave", handleDragEnd);
+    return () => {
+      window.removeEventListener("dragend", handleDragEnd);
+      document.removeEventListener("drop", handleDragEnd);
+      document.removeEventListener("mouseleave", handleDragEnd);
+    };
+  }, []);
+  const processFiles = react.useCallback((files) => {
+    const validFiles = [];
+    let hasInvalidFile = false;
+    files.forEach((file) => {
+      if (isFiletypeSupported(file.name, supportedFileTypes)) {
+        validFiles.push(file);
+      } else {
+        hasInvalidFile = true;
+      }
+    });
+    if (hasInvalidFile) {
+      setIsNotSupported(true);
+      if (onFileFailure) {
+        onFileFailure();
+      }
+    }
+    if (validFiles.length > 0) {
+      setIsNotSupported(false);
+      onFilesProcessed(validFiles);
+    }
+  }, [onFilesProcessed, supportedFileTypes, onFileFailure]);
+  const handleDrop = react.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    dragCounterRef.current = 0;
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const files = Array.from(e.dataTransfer.files);
+      processFiles(multiple ? files : [files[0]]);
+    }
+  }, [processFiles, multiple]);
+  const handleFileSelect = react.useCallback((e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const files = Array.from(e.target.files);
+      processFiles(files);
+    }
+  }, [processFiles]);
+  const handleBrowseClick = react.useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, []);
+  return {
+    isDragging,
+    isNotSupported,
+    fileInputRef,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    handleFileSelect,
+    handleBrowseClick
+  };
+};
+
+exports.useDragAndDrop = useDragAndDrop;
+//# sourceMappingURL=useDragAndDrop.cjs.map

package/dist/cjs/components/FileUpload/useDragAndDrop.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragAndDrop.cjs","sources":["../../../../src/components/FileUpload/useDragAndDrop.ts"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type DragEvent,\n  type RefObject,\n  type ChangeEvent,\n} from 'react';\n\nexport interface UseDragAndDropOptions {\n  onFilesProcessed: (files: File[]) => void;\n  supportedFileTypes: string[];\n  onFileFailure?: () => void;\n  multiple?: boolean;\n}\n\nexport interface UseDragAndDropReturn {\n  isDragging: boolean;\n  isNotSupported: boolean;\n  fileInputRef: RefObject<HTMLInputElement>;\n  handleDragEnter: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragLeave: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragOver: (e: DragEvent<HTMLDivElement>) => void;\n  handleDrop: (e: DragEvent<HTMLDivElement>) => void;\n  handleFileSelect: (e: ChangeEvent<HTMLInputElement>) => void;\n  handleBrowseClick: () => void;\n}\n\nconst isFiletypeSupported = (filename: string, supportedTypes: string[]): boolean => {\n  if (!supportedTypes.length) {\n    return true;\n  }\n\n  const extension = filename.toLowerCase().slice(filename.lastIndexOf('.'));\n  return supportedTypes.some(type => type.toLowerCase() === extension.toLowerCase());\n};\n\nexport const useDragAndDrop = ({\n  onFilesProcessed,\n  supportedFileTypes,\n  onFileFailure,\n  multiple = false,\n}: UseDragAndDropOptions): UseDragAndDropReturn => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isNotSupported, setIsNotSupported] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const dragCounterRef = useRef(0);\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout;\n    if (isNotSupported) {\n      timeoutId = setTimeout(() => {\n        setIsNotSupported(false);\n      }, 2000);\n    }\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [isNotSupported]);\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounterRef.current += 1;\n    setIsDragging(true);\n  }, []);\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    dragCounterRef.current -= 1;\n\n    // Only set to false when left the container\n    if (dragCounterRef.current <= 0) {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    }\n  }, []);\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  // Reset state when drag ends anywhere in the document\n  useEffect(() => {\n    const handleDragEnd = () => {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    };\n\n    window.addEventListener('dragend', handleDragEnd);\n    document.addEventListener('drop', handleDragEnd);\n    document.addEventListener('mouseleave', handleDragEnd);\n\n    return () => {\n      window.removeEventListener('dragend', handleDragEnd);\n      document.removeEventListener('drop', handleDragEnd);\n      document.removeEventListener('mouseleave', handleDragEnd);\n    };\n  }, []);\n\n  const processFiles = useCallback(\n    (files: File[]) => {\n      const validFiles: File[] = [];\n      let hasInvalidFile = false;\n\n      files.forEach(file => {\n        if (isFiletypeSupported(file.name, supportedFileTypes)) {\n          validFiles.push(file);\n        } else {\n          hasInvalidFile = true;\n        }\n      });\n\n      if (hasInvalidFile) {\n        setIsNotSupported(true);\n        if (onFileFailure) {\n          onFileFailure();\n        }\n      }\n\n      if (validFiles.length > 0) {\n        setIsNotSupported(false);\n        onFilesProcessed(validFiles);\n      }\n    },\n    [onFilesProcessed, supportedFileTypes, onFileFailure]\n  );\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        const files = Array.from(e.dataTransfer.files);\n        processFiles(multiple ? files : [files[0]]);\n      }\n    },\n    [processFiles, multiple]\n  );\n\n  const handleFileSelect = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        const files = Array.from(e.target.files);\n        processFiles(files);\n      }\n    },\n    [processFiles]\n  );\n\n  const handleBrowseClick = useCallback(() => {\n    if (fileInputRef.current) {\n      fileInputRef.current.click();\n    }\n  }, []);\n\n  return {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  };\n};\n"],"names":["isFiletypeSupported","filename","supportedTypes","length","extension","toLowerCase","slice","lastIndexOf","some","type","useDragAndDrop","onFilesProcessed","supportedFileTypes","onFileFailure","multiple","isDragging","setIsDragging","useState","isNotSupported","setIsNotSupported","fileInputRef","useRef","dragCounterRef","useEffect","timeoutId","setTimeout","clearTimeout","handleDragEnter","useCallback","e","preventDefault","stopPropagation","current","handleDragLeave","handleDragOver","handleDragEnd","window","addEventListener","document","removeEventListener","processFiles","files","validFiles","hasInvalidFile","forEach","file","name","push","handleDrop","dataTransfer","Array","from","handleFileSelect","target","handleBrowseClick","click"],"mappings":"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"}

package/dist/cjs/components/Flyout/index.cjs

@@ -0,0 +1,243 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const RadixDialog = require('@radix-ui/react-dialog');
+const styledComponents = require('styled-components');
+const CrossButton = require('../CrossButton/index.cjs');
+const Container = require('../Container/index.cjs');
+const CodeBlock = require('../CodeBlock/index.cjs');
+const Icon = require('../Icon/index.cjs');
+const Separator = require('../Separator/index.cjs');
+const Button = require('../Button/index.cjs');
+const Spacer = require('../Spacer/index.cjs');
+
+const Flyout = ({
+  modal = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.Dialog, { modal, ...props });
+};
+const Trigger = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, children }) });
+};
+Trigger.displayName = "Flyout.Trigger";
+Flyout.Trigger = Trigger;
+const animationWidth = () => styledComponents.keyframes({
+  from: {
+    width: 0
+  },
+  to: {
+    width: "fit-content"
+  }
+});
+const FlyoutContent = styledComponents.styled(RadixDialog.DialogContent).withConfig({
+  componentId: "sc-1noqpag-0"
+})(["display:flex;flex-direction:column;align-items:center;overflow:hidden;top:0;bottom:0;width:fit-content;--flyout-width:", ";animation:", " 500ms cubic-bezier(0.16,1,0.3,1) forwards;", ""], ({
+  theme,
+  $size = "default",
+  $width
+}) => $width || theme.click.flyout.size[$size].width, animationWidth, ({
+  theme,
+  $strategy,
+  $type = "default",
+  $align
+}) => `
+    ${$align === "start" ? "left" : "right"}: 0;
+    max-width: 100%;
+    position: ${$strategy};
+    height: ${$strategy === "relative" ? "100%" : "auto"};
+    padding: 0 ${theme.click.flyout.space[$type].x}
+    gap: ${theme.click.flyout.space[$type].gap};
+    box-shadow: ${$align === "start" ? theme.click.flyout.shadow.reverse : theme.click.flyout.shadow.default};
+    border-${$align === "start" ? "right" : "left"}: 1px solid ${theme.click.flyout.color.stroke.default};
+    background: ${theme.click.flyout.color.background.default};
+
+    @media (max-width: 1024px) {
+      ${$strategy === "relative" ? `
+            position: absolute !important;` : ""}
+      overflow: hidden;
+      transform: ${$align === "start" ? "translateX(calc(50px - 100%))" : "translateX(calc(100% - 50px))"};
+      transition: 0.3s ease-in-out;
+      &:hover,
+      &.active,
+      &:focus-within {
+        transform: translateX(0);
+        ${$align === "start" ? "right" : "left"}: auto;
+      }
+    }
+  `);
+const FlyoutContainer = styledComponents.styled.div.withConfig({
+  componentId: "sc-1noqpag-1"
+})(["display:flex;gap:0;width:var(--flyout-width);max-width:100%;flex-flow:column nowrap;gap:inherit;"]);
+const Content = ({
+  showOverlay = false,
+  children,
+  container,
+  strategy = "relative",
+  size,
+  type = "default",
+  closeOnInteractOutside = false,
+  width,
+  align = "end",
+  onInteractOutside,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog.DialogPortal, { container, children: [
+    showOverlay && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogOverlay, { className: "DialogOverlay" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FlyoutContent, { $size: size, $type: type, $strategy: strategy, onInteractOutside: (e) => {
+      if (!closeOnInteractOutside) {
+        e.preventDefault();
+      }
+      if (typeof onInteractOutside === "function") {
+        onInteractOutside(e);
+      }
+    }, $width: width, $align: align, ...props, children })
+  ] });
+};
+Content.displayName = "Flyout.Content";
+Flyout.Content = Content;
+const FlyoutElement = styledComponents.styled(Container.Container).withConfig({
+  componentId: "sc-1noqpag-2"
+})(["max-width:100%;max-width:-webkit-fill-available;max-width:fill-available;max-width:stretch;", ""], ({
+  theme,
+  $type = "default"
+}) => `
+    gap: ${theme.click.flyout.space[$type].gap};
+    padding: 0 ${theme.click.flyout.space[$type].content.x};
+  `);
+const Element = ({
+  type,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(FlyoutElement, { orientation: "vertical", padding: "none", gap: "none", $type: type, ...props });
+Element.displayName = "Flyout.Element";
+Flyout.Element = Element;
+const FlyoutHeaderContainer = styledComponents.styled(Container.Container).withConfig({
+  componentId: "sc-1noqpag-3"
+})(["", ""], ({
+  theme,
+  $type = "default"
+}) => `
+    row-gap: ${theme.click.flyout.space[$type].content["row-gap"]};
+    column-gap: ${theme.click.flyout.space[$type].content["column-gap"]};
+    padding: ${theme.click.flyout.space[$type].y} ${theme.click.flyout.space[$type].y} 0 ${theme.click.flyout.space[$type].y} ;
+  `);
+const FlyoutTitle = styledComponents.styled(RadixDialog.DialogTitle).withConfig({
+  componentId: "sc-1noqpag-4"
+})(["", ""], ({
+  theme,
+  $type = "default"
+}) => `
+    color: ${theme.click.flyout.color.title.default};
+    font: ${theme.click.flyout.typography[$type].title.default};
+    margin: 0;
+    padding: 0;
+  `);
+const FlyoutDescription = styledComponents.styled(RadixDialog.DialogDescription).withConfig({
+  componentId: "sc-1noqpag-5"
+})(["", ""], ({
+  theme,
+  $type = "default"
+}) => `
+    color: ${theme.click.flyout.color.description.default};
+    font: ${theme.click.flyout.typography[$type].description.default};
+    margin: 0;
+    padding: 0;
+  `);
+const Header = ({
+  title,
+  description,
+  type,
+  children,
+  showClose = true,
+  showSeparator = true,
+  ...props
+}) => {
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(FlyoutContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(FlyoutHeaderContainer, { $type: type, justifyContent: "space-between", alignItems: "start", padding: "none", gap: "none", fillWidth: false, isResponsive: false, ...props, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children }),
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton.CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
+      ] }),
+      showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { "data-testid": "flyout-header-separator", size: "lg" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(FlyoutContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(FlyoutHeaderContainer, { $type: type, justifyContent: "space-between", alignItems: "start", fillWidth: false, isResponsive: false, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FlyoutTitle, { $type: type, children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(FlyoutDescription, { $type: type, children: description })
+      ] }),
+      showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton.CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
+    ] }),
+    showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { "data-testid": "flyout-header-separator", size: "lg" })
+  ] });
+};
+Header.displayName = "Flyout.Header";
+Flyout.Header = Header;
+const FlyoutBody = styledComponents.styled(Container.Container).withConfig({
+  componentId: "sc-1noqpag-6"
+})(["width:var(--flyout-width);max-width:100%;margin-top:", ";"], ({
+  $align = "default"
+}) => $align === "top" ? "-1rem" : 0);
+const Body = ({
+  align,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(FlyoutBody, { overflow: "auto", orientation: "vertical", grow: "1", $align: align, ...props });
+Body.displayName = "Flyout.Body";
+Flyout.Body = Body;
+const FlyoutFooter = styledComponents.styled(Container.Container).withConfig({
+  componentId: "sc-1noqpag-7"
+})(["", ""], ({
+  theme,
+  type = "default"
+}) => `
+    row-gap: ${theme.click.flyout.space[type].content["row-gap"]};
+    column-gap: ${theme.click.flyout.space[type].content["column-gap"]};
+    padding: ${theme.click.flyout.space[type].y} ${theme.click.flyout.space[type].content.x};
+  `);
+const FlyoutClose = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "secondary", ...props }) });
+};
+FlyoutClose.displayName = "Flyout.Close";
+Flyout.Close = FlyoutClose;
+const FooterContainer = styledComponents.styled(Container.Container).withConfig({
+  componentId: "sc-1noqpag-8"
+})(["width:var(--flyout-width);max-width:100%;"]);
+const Footer = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(FooterContainer, { gap: "none", orientation: "vertical", alignItems: "end", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "xs" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FlyoutFooter, { justifyContent: "end", gap: "none", padding: "none", isResponsive: false, wrap: "wrap", ...props })
+  ] });
+};
+Footer.displayName = "Flyout.Footer";
+Flyout.Footer = Footer;
+const CustomCodeBlock = styledComponents.styled(CodeBlock.CodeBlock).withConfig({
+  componentId: "sc-1noqpag-9"
+})(["display:flex;height:100%;pre{flex:1;overflow-wrap:break-word;code{display:inline-block;max-width:calc(100% - 1rem);}}"]);
+const FlyoutCodeBlock = ({
+  statement,
+  language,
+  wrapLines,
+  showLineNumbers,
+  showWrapButton,
+  onCopy,
+  onCopyError,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Element, { fillHeight: true, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CustomCodeBlock, { wrapLines, language, showLineNumbers, showWrapButton, onCopy, onCopyError, children: statement }),
+    /* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: "xs" })
+  ] });
+};
+Flyout.CodeBlock = FlyoutCodeBlock;
+
+exports.Flyout = Flyout;
+//# sourceMappingURL=index.cjs.map