@clickhouse/click-ui 0.9.0 → 0.10.0-rc1

package/dist/esm/components/FileUpload/FileUploadArea.js

@@ -83,38 +83,82 @@ const FileUploadArea = ({
   children
 }) => {
   const isCompact = hasFile || size === "sm";
-  return /* @__PURE__ */ jsx("div", { className: cn(uploadAreaVariants({
-    radius: hasFile ? "sm" : "md",
-    padding: isCompact ? "sm" : "md",
-    minHeight: size === "sm" ? "sm" : "md",
-    direction: hasFile || size === "sm" ? "row" : "column",
-    justify: hasFile || size === "sm" ? "space-between" : "center",
-    gap: size === "sm" ? "sm" : "md",
-    cursor: hasFile ? "default" : "pointer",
-    dashed: !hasFile,
-    dragging: !hasFile && isDragging,
-    error: isError
-  })), onDragEnter, onDragLeave, onDragOver, onDrop, onClick: !hasFile ? onClick : void 0, children: !hasFile ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: "upload", className: styles["upload-icon"] }),
-    /* @__PURE__ */ jsxs("div", { className: cn(uploadTextVariants({
-      centered: !hasFile && size === "md",
-      grow: hasFile || size === "sm"
-    })), children: [
-      isNotSupported ? /* @__PURE__ */ jsx(Title, { type: "h1", className: cn(titleVariants({
-        notSupported: true
-      })), children: "Unsupported file type" }) : /* @__PURE__ */ jsx(Title, { type: "h1", className: cn(titleVariants({
-        notSupported: isNotSupported
-      })), children: title }),
-      /* @__PURE__ */ jsxs(Text, { className: styles.description, children: [
-        "Files supported: ",
-        supportedFileTypes.join(", ")
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Button, { type: "secondary", onClick: (e) => {
-      e.stopPropagation();
-      onClick?.();
-    }, children: multiple ? "Browse files" : "Browse file" })
-  ] }) : children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        uploadAreaVariants({
+          radius: hasFile ? "sm" : "md",
+          padding: isCompact ? "sm" : "md",
+          minHeight: size === "sm" ? "sm" : "md",
+          direction: hasFile || size === "sm" ? "row" : "column",
+          justify: hasFile || size === "sm" ? "space-between" : "center",
+          gap: size === "sm" ? "sm" : "md",
+          cursor: hasFile ? "default" : "pointer",
+          dashed: !hasFile,
+          dragging: !hasFile && isDragging,
+          error: isError
+        })
+      ),
+      onDragEnter,
+      onDragLeave,
+      onDragOver,
+      onDrop,
+      onClick: !hasFile ? onClick : void 0,
+      children: !hasFile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SvgImage,
+          {
+            name: "upload",
+            className: styles["upload-icon"]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              uploadTextVariants({
+                centered: !hasFile && size === "md",
+                grow: hasFile || size === "sm"
+              })
+            ),
+            children: [
+              isNotSupported ? /* @__PURE__ */ jsx(
+                Title,
+                {
+                  type: "h1",
+                  className: cn(titleVariants({ notSupported: true })),
+                  children: "Unsupported file type"
+                }
+              ) : /* @__PURE__ */ jsx(
+                Title,
+                {
+                  type: "h1",
+                  className: cn(titleVariants({ notSupported: isNotSupported })),
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsxs(Text, { className: styles.description, children: [
+                "Files supported: ",
+                supportedFileTypes.join(", ")
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "secondary",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClick?.();
+            },
+            children: multiple ? "Browse files" : "Browse file"
+          }
+        )
+      ] }) : children
+    }
+  );
 };
 
 export { FileUploadArea };

package/dist/esm/components/FileUpload/FileUploadArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadArea.js","sources":["../../../../src/components/FileUpload/FileUploadArea.tsx"],"sourcesContent":["import type { DragEvent, FC, ReactNode } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Text } from '@/components/Text';\nimport { Title } from '@/components/Title';\nimport { Icon } from '@/components/Icon';\nimport { Button } from '@/components/Button';\nimport styles from './FileUploadArea.module.css';\n\nconst uploadAreaVariants = cva(styles['upload-area'], {\n  variants: {\n    radius: {\n      sm: styles['upload-area_radius_sm'],\n      md: styles['upload-area_radius_md'],\n    },\n    padding: {\n      sm: styles['upload-area_padding_sm'],\n      md: styles['upload-area_padding_md'],\n    },\n    minHeight: {\n      sm: styles['upload-area_min-height_sm'],\n      md: styles['upload-area_min-height_md'],\n    },\n    direction: {\n      row: styles['upload-area_direction_row'],\n      column: styles['upload-area_direction_column'],\n    },\n    justify: {\n      'space-between': styles['upload-area_justify_space-between'],\n      center: styles['upload-area_justify_center'],\n    },\n    gap: {\n      sm: styles['upload-area_gap_sm'],\n      md: styles['upload-area_gap_md'],\n    },\n    cursor: {\n      default: styles['upload-area_cursor_default'],\n      pointer: styles['upload-area_cursor_pointer'],\n    },\n    dashed: {\n      true: styles['upload-area_dashed_true'],\n    },\n    dragging: {\n      true: styles['upload-area_dragging_true'],\n    },\n    error: {\n      true: styles['upload-area_error_true'],\n    },\n  },\n});\n\nconst titleVariants = cva(styles.title, {\n  variants: {\n    notSupported: {\n      true: styles['title_not-supported_true'],\n    },\n  },\n});\n\nconst uploadTextVariants = cva(styles['upload-text'], {\n  variants: {\n    centered: {\n      true: styles['upload-text_centered_true'],\n    },\n    grow: {\n      true: styles['upload-text_grow_true'],\n    },\n  },\n});\n\nexport interface FileUploadAreaProps {\n  title: string;\n  supportedFileTypes: string[];\n  size?: 'sm' | 'md';\n  isDragging: boolean;\n  isNotSupported: boolean;\n  hasFile?: boolean;\n  isError?: boolean;\n  multiple?: boolean;\n  onDragEnter: (e: DragEvent<HTMLDivElement>) => void;\n  onDragLeave: (e: DragEvent<HTMLDivElement>) => void;\n  onDragOver: (e: DragEvent<HTMLDivElement>) => void;\n  onDrop: (e: DragEvent<HTMLDivElement>) => void;\n  onClick?: () => void;\n  children?: ReactNode;\n}\n\nexport const FileUploadArea: FC<FileUploadAreaProps> = ({\n  title,\n  supportedFileTypes,\n  size = 'sm',\n  isDragging,\n  isNotSupported,\n  hasFile = false,\n  isError = false,\n  multiple = false,\n  onDragEnter,\n  onDragLeave,\n  onDragOver,\n  onDrop,\n  onClick,\n  children,\n}) => {\n  const isCompact = hasFile || size === 'sm';\n\n  return (\n    <div\n      className={cn(\n        uploadAreaVariants({\n          radius: hasFile ? 'sm' : 'md',\n          padding: isCompact ? 'sm' : 'md',\n          minHeight: size === 'sm' ? 'sm' : 'md',\n          direction: hasFile || size === 'sm' ? 'row' : 'column',\n          justify: hasFile || size === 'sm' ? 'space-between' : 'center',\n          gap: size === 'sm' ? 'sm' : 'md',\n          cursor: hasFile ? 'default' : 'pointer',\n          dashed: !hasFile,\n          dragging: !hasFile && isDragging,\n          error: isError,\n        })\n      )}\n      onDragEnter={onDragEnter}\n      onDragLeave={onDragLeave}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onClick={!hasFile ? onClick : undefined}\n    >\n      {!hasFile ? (\n        <>\n          <Icon\n            name=\"upload\"\n            className={styles['upload-icon']}\n          />\n          <div\n            className={cn(\n              uploadTextVariants({\n                centered: !hasFile && size === 'md',\n                grow: hasFile || size === 'sm',\n              })\n            )}\n          >\n            {isNotSupported ? (\n              <Title\n                type=\"h1\"\n                className={cn(titleVariants({ notSupported: true }))}\n              >\n                Unsupported file type\n              </Title>\n            ) : (\n              <Title\n                type=\"h1\"\n                className={cn(titleVariants({ notSupported: isNotSupported }))}\n              >\n                {title}\n              </Title>\n            )}\n            <Text className={styles.description}>\n              Files supported: {supportedFileTypes.join(', ')}\n            </Text>\n          </div>\n          <Button\n            type={'secondary'}\n            onClick={e => {\n              e.stopPropagation();\n              onClick?.();\n            }}\n          >\n            {multiple ? 'Browse files' : 'Browse file'}\n          </Button>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n};\n"],"names":["uploadAreaVariants","cva","styles","variants","radius","sm","md","padding","minHeight","direction","row","column","justify","center","gap","cursor","default","pointer","dashed","true","dragging","error","titleVariants","title","notSupported","uploadTextVariants","centered","grow","FileUploadArea","supportedFileTypes","size","isDragging","isNotSupported","hasFile","isError","multiple","onDragEnter","onDragLeave","onDragOver","onDrop","onClick","children","isCompact","cn","undefined","Icon","description","join","e","stopPropagation"],"mappings":"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"}
+{"version":3,"file":"FileUploadArea.js","sources":["../../../../src/components/FileUpload/FileUploadArea.tsx"],"sourcesContent":["import type { DragEvent, FC, ReactNode } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Text } from '@/components/Text';\nimport { Title } from '@/components/Title';\nimport { Icon } from '@/components/Icon';\nimport { Button } from '@/components/Button';\nimport styles from './FileUploadArea.module.css';\n\nconst uploadAreaVariants = cva(styles['upload-area'], {\n  variants: {\n    radius: {\n      sm: styles['upload-area_radius_sm'],\n      md: styles['upload-area_radius_md'],\n    },\n    padding: {\n      sm: styles['upload-area_padding_sm'],\n      md: styles['upload-area_padding_md'],\n    },\n    minHeight: {\n      sm: styles['upload-area_min-height_sm'],\n      md: styles['upload-area_min-height_md'],\n    },\n    direction: {\n      row: styles['upload-area_direction_row'],\n      column: styles['upload-area_direction_column'],\n    },\n    justify: {\n      'space-between': styles['upload-area_justify_space-between'],\n      center: styles['upload-area_justify_center'],\n    },\n    gap: {\n      sm: styles['upload-area_gap_sm'],\n      md: styles['upload-area_gap_md'],\n    },\n    cursor: {\n      default: styles['upload-area_cursor_default'],\n      pointer: styles['upload-area_cursor_pointer'],\n    },\n    dashed: {\n      true: styles['upload-area_dashed_true'],\n    },\n    dragging: {\n      true: styles['upload-area_dragging_true'],\n    },\n    error: {\n      true: styles['upload-area_error_true'],\n    },\n  },\n});\n\nconst titleVariants = cva(styles.title, {\n  variants: {\n    notSupported: {\n      true: styles['title_not-supported_true'],\n    },\n  },\n});\n\nconst uploadTextVariants = cva(styles['upload-text'], {\n  variants: {\n    centered: {\n      true: styles['upload-text_centered_true'],\n    },\n    grow: {\n      true: styles['upload-text_grow_true'],\n    },\n  },\n});\n\nexport interface FileUploadAreaProps {\n  title: string;\n  supportedFileTypes: string[];\n  size?: 'sm' | 'md';\n  isDragging: boolean;\n  isNotSupported: boolean;\n  hasFile?: boolean;\n  isError?: boolean;\n  multiple?: boolean;\n  onDragEnter: (e: DragEvent<HTMLDivElement>) => void;\n  onDragLeave: (e: DragEvent<HTMLDivElement>) => void;\n  onDragOver: (e: DragEvent<HTMLDivElement>) => void;\n  onDrop: (e: DragEvent<HTMLDivElement>) => void;\n  onClick?: () => void;\n  children?: ReactNode;\n}\n\nexport const FileUploadArea: FC<FileUploadAreaProps> = ({\n  title,\n  supportedFileTypes,\n  size = 'sm',\n  isDragging,\n  isNotSupported,\n  hasFile = false,\n  isError = false,\n  multiple = false,\n  onDragEnter,\n  onDragLeave,\n  onDragOver,\n  onDrop,\n  onClick,\n  children,\n}) => {\n  const isCompact = hasFile || size === 'sm';\n\n  return (\n    <div\n      className={cn(\n        uploadAreaVariants({\n          radius: hasFile ? 'sm' : 'md',\n          padding: isCompact ? 'sm' : 'md',\n          minHeight: size === 'sm' ? 'sm' : 'md',\n          direction: hasFile || size === 'sm' ? 'row' : 'column',\n          justify: hasFile || size === 'sm' ? 'space-between' : 'center',\n          gap: size === 'sm' ? 'sm' : 'md',\n          cursor: hasFile ? 'default' : 'pointer',\n          dashed: !hasFile,\n          dragging: !hasFile && isDragging,\n          error: isError,\n        })\n      )}\n      onDragEnter={onDragEnter}\n      onDragLeave={onDragLeave}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onClick={!hasFile ? onClick : undefined}\n    >\n      {!hasFile ? (\n        <>\n          <Icon\n            name=\"upload\"\n            className={styles['upload-icon']}\n          />\n          <div\n            className={cn(\n              uploadTextVariants({\n                centered: !hasFile && size === 'md',\n                grow: hasFile || size === 'sm',\n              })\n            )}\n          >\n            {isNotSupported ? (\n              <Title\n                type=\"h1\"\n                className={cn(titleVariants({ notSupported: true }))}\n              >\n                Unsupported file type\n              </Title>\n            ) : (\n              <Title\n                type=\"h1\"\n                className={cn(titleVariants({ notSupported: isNotSupported }))}\n              >\n                {title}\n              </Title>\n            )}\n            <Text className={styles.description}>\n              Files supported: {supportedFileTypes.join(', ')}\n            </Text>\n          </div>\n          <Button\n            type={'secondary'}\n            onClick={e => {\n              e.stopPropagation();\n              onClick?.();\n            }}\n          >\n            {multiple ? 'Browse files' : 'Browse file'}\n          </Button>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n};\n"],"names":["Icon"],"mappings":"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"}

package/dist/esm/components/FileUpload/FileUploadItem.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
 .file-item-container__86J-i {
   display: flex;
   min-width: 0;
@@ -80,3 +80,4 @@
   margin-top: var(--click-fileUpload-md-space-gap);
   margin-bottom: 9px;
 }
+}

package/dist/esm/components/FileUpload/FileUploadItem.js

@@ -56,34 +56,71 @@ const FileUploadItem = ({
   inline = false
 }) => {
   const isError = !showSuccess && !showProgress;
-  return /* @__PURE__ */ jsxs("div", { className: cn(fileItemContainerVariants({
-    inline: inline ? void 0 : false,
-    error: !inline && isError
-  })), children: [
-    showSuccess ? /* @__PURE__ */ jsx(SvgImage, { size: "xs", state: "success", name: "check" }) : /* @__PURE__ */ jsx(SvgImage, { name: "document", className: cn(documentIconVariants({
-      size
-    })) }),
-    /* @__PURE__ */ jsxs("div", { className: cn(fileContentContainerVariants({
-      size
-    })), children: [
-      /* @__PURE__ */ jsxs("div", { className: styles["file-details"], children: [
-        /* @__PURE__ */ jsx(MiddleTruncator, { text: fileName }),
-        showProgress && !showSuccess && /* @__PURE__ */ jsxs(Text, { className: styles.description, children: [
-          progress,
-          "%"
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        fileItemContainerVariants({
+          inline: inline ? void 0 : false,
+          error: !inline && isError
+        })
+      ),
+      children: [
+        showSuccess ? /* @__PURE__ */ jsx(
+          SvgImage,
+          {
+            size: "xs",
+            state: "success",
+            name: "check"
+          }
+        ) : /* @__PURE__ */ jsx(
+          SvgImage,
+          {
+            name: "document",
+            className: cn(documentIconVariants({ size }))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn(fileContentContainerVariants({ size })), children: [
+          /* @__PURE__ */ jsxs("div", { className: styles["file-details"], children: [
+            /* @__PURE__ */ jsx(MiddleTruncator, { text: fileName }),
+            showProgress && !showSuccess && /* @__PURE__ */ jsxs(Text, { className: styles.description, children: [
+              progress,
+              "%"
+            ] })
+          ] }),
+          isError && /* @__PURE__ */ jsx(Text, { className: cn(descriptionVariants({ error: true })), children: failureMessage }),
+          showProgress && !showSuccess && /* @__PURE__ */ jsx("div", { className: styles["progress-bar-wrapper"], children: /* @__PURE__ */ jsx(
+            ProgressBar,
+            {
+              progress,
+              type: "small"
+            }
+          ) }),
+          showSuccess && /* @__PURE__ */ jsx(Text, { className: styles.description, children: formatFileSize(fileSize) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles["file-actions"], children: [
+          isError && onRetry && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "sm",
+              icon: "refresh",
+              type: "ghost",
+              onClick: onRetry
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "sm",
+              icon: "cross",
+              type: "ghost",
+              onClick: onRemove
+            }
+          )
         ] })
-      ] }),
-      isError && /* @__PURE__ */ jsx(Text, { className: cn(descriptionVariants({
-        error: true
-      })), children: failureMessage }),
-      showProgress && !showSuccess && /* @__PURE__ */ jsx("div", { className: styles["progress-bar-wrapper"], children: /* @__PURE__ */ jsx(ProgressBar, { progress, type: "small" }) }),
-      showSuccess && /* @__PURE__ */ jsx(Text, { className: styles.description, children: formatFileSize(fileSize) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: styles["file-actions"], children: [
-      isError && onRetry && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: "refresh", type: "ghost", onClick: onRetry }),
-      onRemove && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: "cross", type: "ghost", onClick: onRemove })
-    ] })
-  ] });
+      ]
+    }
+  );
 };
 
 export { FileUploadItem };

package/dist/esm/components/FileUpload/FileUploadItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadItem.js","sources":["../../../../src/components/FileUpload/FileUploadItem.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { cn, cva } from '@/lib/cva';\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';\nimport styles from './FileUploadItem.module.css';\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 fileItemContainerVariants = cva(styles['file-item-container'], {\n  variants: {\n    inline: {\n      false: styles['file-item-container_inline_false'],\n    },\n    error: {\n      true: styles['file-item-container_error_true'],\n    },\n  },\n});\n\nconst documentIconVariants = cva(styles['document-icon'], {\n  variants: {\n    size: {\n      sm: styles['document-icon_size_sm'],\n      md: styles['document-icon_size_md'],\n    },\n  },\n});\n\nconst descriptionVariants = cva(styles.description, {\n  variants: {\n    error: {\n      true: styles['description_error_true'],\n    },\n  },\n});\n\nconst fileContentContainerVariants = cva(styles['file-content-container'], {\n  variants: {\n    size: {\n      sm: styles['file-content-container_size_sm'],\n      md: styles['file-content-container_size_md'],\n    },\n  },\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    <div\n      className={cn(\n        fileItemContainerVariants({\n          inline: inline ? undefined : false,\n          error: !inline && isError,\n        })\n      )}\n    >\n      {showSuccess ? (\n        <Icon\n          size={'xs'}\n          state={'success'}\n          name={'check'}\n        />\n      ) : (\n        <Icon\n          name={'document'}\n          className={cn(documentIconVariants({ size }))}\n        />\n      )}\n\n      <div className={cn(fileContentContainerVariants({ size }))}>\n        <div className={styles['file-details']}>\n          <MiddleTruncator text={fileName} />\n          {showProgress && !showSuccess && (\n            <Text className={styles.description}>{progress}%</Text>\n          )}\n        </div>\n\n        {isError && (\n          <Text className={cn(descriptionVariants({ error: true }))}>\n            {failureMessage}\n          </Text>\n        )}\n\n        {showProgress && !showSuccess && (\n          <div className={styles['progress-bar-wrapper']}>\n            <ProgressBar\n              progress={progress}\n              type={'small'}\n            />\n          </div>\n        )}\n\n        {showSuccess && (\n          <Text className={styles.description}>{formatFileSize(fileSize)}</Text>\n        )}\n      </div>\n\n      <div className={styles['file-actions']}>\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      </div>\n    </div>\n  );\n};\n"],"names":["fileItemContainerVariants","cva","styles","variants","inline","false","error","true","documentIconVariants","size","sm","md","descriptionVariants","description","fileContentContainerVariants","FileUploadItem","fileName","fileSize","progress","showSuccess","showProgress","failureMessage","onRetry","onRemove","isError","cn","undefined","Icon","formatFileSize"],"mappings":"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"}
+{"version":3,"file":"FileUploadItem.js","sources":["../../../../src/components/FileUpload/FileUploadItem.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { cn, cva } from '@/lib/cva';\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';\nimport styles from './FileUploadItem.module.css';\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 fileItemContainerVariants = cva(styles['file-item-container'], {\n  variants: {\n    inline: {\n      false: styles['file-item-container_inline_false'],\n    },\n    error: {\n      true: styles['file-item-container_error_true'],\n    },\n  },\n});\n\nconst documentIconVariants = cva(styles['document-icon'], {\n  variants: {\n    size: {\n      sm: styles['document-icon_size_sm'],\n      md: styles['document-icon_size_md'],\n    },\n  },\n});\n\nconst descriptionVariants = cva(styles.description, {\n  variants: {\n    error: {\n      true: styles['description_error_true'],\n    },\n  },\n});\n\nconst fileContentContainerVariants = cva(styles['file-content-container'], {\n  variants: {\n    size: {\n      sm: styles['file-content-container_size_sm'],\n      md: styles['file-content-container_size_md'],\n    },\n  },\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    <div\n      className={cn(\n        fileItemContainerVariants({\n          inline: inline ? undefined : false,\n          error: !inline && isError,\n        })\n      )}\n    >\n      {showSuccess ? (\n        <Icon\n          size={'xs'}\n          state={'success'}\n          name={'check'}\n        />\n      ) : (\n        <Icon\n          name={'document'}\n          className={cn(documentIconVariants({ size }))}\n        />\n      )}\n\n      <div className={cn(fileContentContainerVariants({ size }))}>\n        <div className={styles['file-details']}>\n          <MiddleTruncator text={fileName} />\n          {showProgress && !showSuccess && (\n            <Text className={styles.description}>{progress}%</Text>\n          )}\n        </div>\n\n        {isError && (\n          <Text className={cn(descriptionVariants({ error: true }))}>\n            {failureMessage}\n          </Text>\n        )}\n\n        {showProgress && !showSuccess && (\n          <div className={styles['progress-bar-wrapper']}>\n            <ProgressBar\n              progress={progress}\n              type={'small'}\n            />\n          </div>\n        )}\n\n        {showSuccess && (\n          <Text className={styles.description}>{formatFileSize(fileSize)}</Text>\n        )}\n      </div>\n\n      <div className={styles['file-actions']}>\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      </div>\n    </div>\n  );\n};\n"],"names":["Icon"],"mappings":"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"}

package/dist/esm/components/FileUpload/index.js

@@ -18,17 +18,20 @@ const FileUpload = ({
   onFileClose
 }) => {
   const [file, setFile] = useState(null);
-  const handleFilesProcessed = useCallback((files) => {
-    const selectedFile = files[0];
-    const newFile = {
-      name: selectedFile.name,
-      size: selectedFile.size
-    };
-    setFile(newFile);
-    if (onFileSelect) {
-      onFileSelect(selectedFile);
-    }
-  }, [onFileSelect]);
+  const handleFilesProcessed = useCallback(
+    (files) => {
+      const selectedFile = files[0];
+      const newFile = {
+        name: selectedFile.name,
+        size: selectedFile.size
+      };
+      setFile(newFile);
+      if (onFileSelect) {
+        onFileSelect(selectedFile);
+      }
+    },
+    [onFileSelect]
+  );
   const {
     isDragging,
     isNotSupported,
@@ -61,10 +64,49 @@ const FileUpload = ({
   }, [onRetry]);
   const acceptedFileTypes = supportedFileTypes.join(",");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(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__ */ jsx(FileUploadItem, { fileName: file.name, fileSize: file.size, progress, showSuccess, showProgress, failureMessage, onRetry: handleRetryUpload, onRemove: handleRemoveFile, size, inline: true }) }),
-    /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, style: {
-      display: "none"
-    } })
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(
+          FileUploadItem,
+          {
+            fileName: file.name,
+            fileSize: file.size,
+            progress,
+            showSuccess,
+            showProgress,
+            failureMessage,
+            onRetry: handleRetryUpload,
+            onRemove: handleRemoveFile,
+            size,
+            inline: true
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        accept: acceptedFileTypes,
+        onChange: handleFileSelect,
+        style: { display: "none" }
+      }
+    )
   ] });
 };
 

package/dist/esm/components/FileUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","display"],"mappings":"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"}
+{"version":3,"file":"index.js","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":[],"mappings":"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"}

package/dist/esm/components/FileUpload/useDragAndDrop.js

@@ -63,43 +63,52 @@ const useDragAndDrop = ({
       document.removeEventListener("mouseleave", handleDragEnd);
     };
   }, []);
-  const processFiles = useCallback((files) => {
-    const validFiles = [];
-    let hasInvalidFile = false;
-    files.forEach((file) => {
-      if (isFiletypeSupported(file.name, supportedFileTypes)) {
-        validFiles.push(file);
-      } else {
-        hasInvalidFile = true;
+  const processFiles = 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 (hasInvalidFile) {
-      setIsNotSupported(true);
-      if (onFileFailure) {
-        onFileFailure();
+      if (validFiles.length > 0) {
+        setIsNotSupported(false);
+        onFilesProcessed(validFiles);
       }
-    }
-    if (validFiles.length > 0) {
-      setIsNotSupported(false);
-      onFilesProcessed(validFiles);
-    }
-  }, [onFilesProcessed, supportedFileTypes, onFileFailure]);
-  const handleDrop = 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 = useCallback((e) => {
-    if (e.target.files && e.target.files.length > 0) {
-      const files = Array.from(e.target.files);
-      processFiles(files);
-    }
-  }, [processFiles]);
+    },
+    [onFilesProcessed, supportedFileTypes, onFileFailure]
+  );
+  const handleDrop = 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 = useCallback(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        const files = Array.from(e.target.files);
+        processFiles(files);
+      }
+    },
+    [processFiles]
+  );
   const handleBrowseClick = useCallback(() => {
     if (fileInputRef.current) {
       fileInputRef.current.click();