@clickhouse/click-ui 0.7.0 → 0.8.0

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

@@ -1,17 +1,11 @@
+import "./FileMultiUpload.css";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
-import { styled } from 'styled-components';
 import { FileUploadArea } from './FileUploadArea.js';
 import { FileUploadItem } from './FileUploadItem.js';
 import { useDragAndDrop } from './useDragAndDrop.js';
+import styles from './FileMultiUpload.module.css.js';
 
-const FilesList = styled.div.withConfig({
-  componentId: "sc-1w9rsfj-0"
-})(["display:flex;flex-direction:column;gap:", ";width:100%;margin-top:", ";"], ({
-  theme
-}) => theme.click.fileUpload.sm.space.gap, ({
-  theme
-}) => theme.click.fileUpload.md.space.gap);
 const FileMultiUpload = ({
   title,
   supportedFileTypes = [".txt", ".sql"],
@@ -57,7 +51,7 @@ const FileMultiUpload = ({
   const acceptedFileTypes = supportedFileTypes.join(",");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(FileUploadArea, { title, supportedFileTypes, size: "md", isDragging, isNotSupported, hasFile: false, multiple: true, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleBrowseClick }),
-    files.length > 0 && /* @__PURE__ */ jsx(FilesList, { children: files.map((file) => /* @__PURE__ */ jsx(FileUploadItem, { fileName: file.name, fileSize: file.size, progress: file.progress, showSuccess: file.status === "success", showProgress: file.status === "uploading", failureMessage: file.errorMessage || "Upload failed", onRetry: () => handleRetryUpload(file.id), onRemove: () => handleRemoveFile(file.id), size: "sm", inline: false }, file.id)) }),
+    files.length > 0 && /* @__PURE__ */ jsx("div", { className: styles["files-list"], children: files.map((file) => /* @__PURE__ */ jsx(FileUploadItem, { fileName: file.name, fileSize: file.size, progress: file.progress, showSuccess: file.status === "success", showProgress: file.status === "uploading", failureMessage: file.errorMessage || "Upload failed", onRetry: () => handleRetryUpload(file.id), onRemove: () => handleRemoveFile(file.id), size: "sm", inline: false }, file.id)) }),
     /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, multiple: true, style: {
       display: "none"
     } })

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

@@ -1 +1 @@
-{"version":3,"file":"FileMultiUpload.js","sources":["../../../../src/components/FileUpload/FileMultiUpload.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { styled } from 'styled-components';\nimport { FileUploadArea } from './FileUploadArea';\nimport { FileUploadItem } from './FileUploadItem';\nimport { useDragAndDrop } from './useDragAndDrop';\n\nexport interface FileUploadItem {\n  id: string;\n  name: string;\n  size: number;\n  status: 'uploading' | 'success' | 'error';\n  progress: number;\n  errorMessage?: string;\n}\n\nexport interface FileMultiUploadProps {\n  title: string;\n  supportedFileTypes?: string[];\n  files: FileUploadItem[];\n  onFileSelect?: (file: File) => void;\n  onFileRetry?: (fileId: string) => void;\n  onFileRemove?: (fileId: string) => void;\n  onFileFailure?: () => void;\n}\n\nconst FilesList = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${({ theme }) => theme.click.fileUpload.sm.space.gap};\n  width: 100%;\n  margin-top: ${({ theme }) => theme.click.fileUpload.md.space.gap};\n`;\n\nexport const FileMultiUpload = ({\n  title,\n  supportedFileTypes = ['.txt', '.sql'],\n  files,\n  onFileSelect,\n  onFileRetry,\n  onFileRemove,\n  onFileFailure,\n}: FileMultiUploadProps) => {\n  const handleFilesProcessed = useCallback(\n    (processedFiles: File[]) => {\n      processedFiles.forEach(file => {\n        if (onFileSelect) {\n          onFileSelect(file);\n        }\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: true,\n  });\n\n  const handleRemoveFile = useCallback(\n    (fileId: string) => {\n      if (onFileRemove) {\n        onFileRemove(fileId);\n      }\n    },\n    [onFileRemove]\n  );\n\n  const handleRetryUpload = useCallback(\n    (fileId: string) => {\n      if (onFileRetry) {\n        onFileRetry(fileId);\n      }\n    },\n    [onFileRetry]\n  );\n\n  const acceptedFileTypes = supportedFileTypes.join(',');\n\n  return (\n    <>\n      <FileUploadArea\n        title={title}\n        supportedFileTypes={supportedFileTypes}\n        size=\"md\"\n        isDragging={isDragging}\n        isNotSupported={isNotSupported}\n        hasFile={false}\n        multiple={true}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onClick={handleBrowseClick}\n      />\n\n      {files.length > 0 && (\n        <FilesList>\n          {files.map(file => (\n            <FileUploadItem\n              key={file.id}\n              fileName={file.name}\n              fileSize={file.size}\n              progress={file.progress}\n              showSuccess={file.status === 'success'}\n              showProgress={file.status === 'uploading'}\n              failureMessage={file.errorMessage || 'Upload failed'}\n              onRetry={() => handleRetryUpload(file.id)}\n              onRemove={() => handleRemoveFile(file.id)}\n              size=\"sm\"\n              inline={false}\n            />\n          ))}\n        </FilesList>\n      )}\n\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        accept={acceptedFileTypes}\n        onChange={handleFileSelect}\n        multiple\n        style={{ display: 'none' }}\n      />\n    </>\n  );\n};\n"],"names":["FilesList","styled","div","withConfig","componentId","theme","click","fileUpload","sm","space","gap","md","FileMultiUpload","title","supportedFileTypes","files","onFileSelect","onFileRetry","onFileRemove","onFileFailure","handleFilesProcessed","useCallback","processedFiles","forEach","file","isDragging","isNotSupported","fileInputRef","handleDragEnter","handleDragLeave","handleDragOver","handleDrop","handleFileSelect","handleBrowseClick","useDragAndDrop","onFilesProcessed","multiple","handleRemoveFile","fileId","handleRetryUpload","acceptedFileTypes","join","length","map","name","size","progress","status","errorMessage","id","display"],"mappings":"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"}
+{"version":3,"file":"FileMultiUpload.js","sources":["../../../../src/components/FileUpload/FileMultiUpload.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { FileUploadArea } from './FileUploadArea';\nimport { FileUploadItem } from './FileUploadItem';\nimport { useDragAndDrop } from './useDragAndDrop';\nimport styles from './FileMultiUpload.module.css';\n\nexport interface FileUploadItem {\n  id: string;\n  name: string;\n  size: number;\n  status: 'uploading' | 'success' | 'error';\n  progress: number;\n  errorMessage?: string;\n}\n\nexport interface FileMultiUploadProps {\n  title: string;\n  supportedFileTypes?: string[];\n  files: FileUploadItem[];\n  onFileSelect?: (file: File) => void;\n  onFileRetry?: (fileId: string) => void;\n  onFileRemove?: (fileId: string) => void;\n  onFileFailure?: () => void;\n}\n\nexport const FileMultiUpload = ({\n  title,\n  supportedFileTypes = ['.txt', '.sql'],\n  files,\n  onFileSelect,\n  onFileRetry,\n  onFileRemove,\n  onFileFailure,\n}: FileMultiUploadProps) => {\n  const handleFilesProcessed = useCallback(\n    (processedFiles: File[]) => {\n      processedFiles.forEach(file => {\n        if (onFileSelect) {\n          onFileSelect(file);\n        }\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: true,\n  });\n\n  const handleRemoveFile = useCallback(\n    (fileId: string) => {\n      if (onFileRemove) {\n        onFileRemove(fileId);\n      }\n    },\n    [onFileRemove]\n  );\n\n  const handleRetryUpload = useCallback(\n    (fileId: string) => {\n      if (onFileRetry) {\n        onFileRetry(fileId);\n      }\n    },\n    [onFileRetry]\n  );\n\n  const acceptedFileTypes = supportedFileTypes.join(',');\n\n  return (\n    <>\n      <FileUploadArea\n        title={title}\n        supportedFileTypes={supportedFileTypes}\n        size=\"md\"\n        isDragging={isDragging}\n        isNotSupported={isNotSupported}\n        hasFile={false}\n        multiple={true}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onClick={handleBrowseClick}\n      />\n\n      {files.length > 0 && (\n        <div className={styles['files-list']}>\n          {files.map(file => (\n            <FileUploadItem\n              key={file.id}\n              fileName={file.name}\n              fileSize={file.size}\n              progress={file.progress}\n              showSuccess={file.status === 'success'}\n              showProgress={file.status === 'uploading'}\n              failureMessage={file.errorMessage || 'Upload failed'}\n              onRetry={() => handleRetryUpload(file.id)}\n              onRemove={() => handleRemoveFile(file.id)}\n              size=\"sm\"\n              inline={false}\n            />\n          ))}\n        </div>\n      )}\n\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        accept={acceptedFileTypes}\n        onChange={handleFileSelect}\n        multiple\n        style={{ display: 'none' }}\n      />\n    </>\n  );\n};\n"],"names":["FileMultiUpload","title","supportedFileTypes","files","onFileSelect","onFileRetry","onFileRemove","onFileFailure","handleFilesProcessed","useCallback","processedFiles","forEach","file","isDragging","isNotSupported","fileInputRef","handleDragEnter","handleDragLeave","handleDragOver","handleDrop","handleFileSelect","handleBrowseClick","useDragAndDrop","onFilesProcessed","multiple","handleRemoveFile","fileId","handleRetryUpload","acceptedFileTypes","join","length","styles","map","name","size","progress","status","errorMessage","id","display"],"mappings":"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"}

package/dist/esm/components/FileUpload/FileMultiUpload.module.css.js

@@ -0,0 +1,6 @@
+const styles = {
+	"files-list": "files-list__Of0Ps"
+};
+
+export { styles as default };
+//# sourceMappingURL=FileMultiUpload.module.css.js.map

package/dist/esm/components/FileUpload/FileMultiUpload.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileMultiUpload.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/components/FileUpload/FileUpload.stories-common.css

@@ -0,0 +1,14 @@
+.wrapper__LM6zP {
+  width: 100%;
+}
+
+/* 768px == --breakpoint-sizes-md (media queries can't consume a CSS var). */
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (min-width: 768px) {
+  .wrapper__LM6zP {
+    width: 100%;
+    max-width: 1024px; /* --breakpoint-sizes-lg */
+    margin: 0 auto;
+  }
+}

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

@@ -0,0 +1,130 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+.upload-area__3SxAA {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  align-items: center;
+  border: 1px solid var(--click-fileUpload-color-stroke-default);
+  background-color: var(--click-fileUpload-color-background-default);
+  transition: var(--click-fileUpload-transitions-all);
+  /* stylelint-disable-next-line container-name-pattern, value-keyword-case -- preserve original container-name from styled-components */
+  container-name: uploadArea;
+  container-type: inline-size;
+}
+
+/* border-radius: hasFile ? sm : md */
+.upload-area_radius_sm__DW4eQ {
+  border-radius: var(--click-fileUpload-sm-radii-all);
+}
+
+.upload-area_radius_md__k9cZA {
+  border-radius: var(--click-fileUpload-md-radii-all);
+}
+
+/* padding: hasFile || size === 'sm' ? sm : md */
+.upload-area_padding_sm__ci1xq {
+  padding: var(--click-fileUpload-sm-space-y) var(--click-fileUpload-sm-space-x);
+}
+
+.upload-area_padding_md__SflJQ {
+  padding: var(--click-fileUpload-md-space-y) var(--click-fileUpload-md-space-x);
+}
+
+/* min-height: size === 'sm' ? calc : auto */
+.upload-area_min-height_sm__JmKFU {
+  min-height: calc(var(--click-fileUpload-sm-space-y) * 2 + var(--sizes-8));
+}
+
+.upload-area_min-height_md__7BUe3 {
+  min-height: auto;
+}
+
+/* flex-direction: hasFile ? row : size === 'sm' ? row : column */
+.upload-area_direction_row__dPIPY {
+  flex-direction: row;
+}
+
+.upload-area_direction_column__Yd-Y9 {
+  flex-direction: column;
+}
+
+/* justify-content: hasFile ? space-between : size === 'sm' ? space-between : center */
+.upload-area_justify_space-between__8kSQQ {
+  justify-content: space-between;
+}
+
+.upload-area_justify_center__vW-59 {
+  justify-content: center;
+}
+
+/* gap: size === 'sm' ? sm : md */
+.upload-area_gap_sm__fRrTo {
+  gap: var(--click-fileUpload-sm-space-gap);
+}
+
+.upload-area_gap_md__gndXo {
+  gap: var(--click-fileUpload-md-space-gap);
+}
+
+/* cursor: hasFile ? default : pointer */
+.upload-area_cursor_default__Yrr8K {
+  cursor: default;
+}
+
+.upload-area_cursor_pointer__nnHd9 {
+  cursor: pointer;
+}
+
+/* !hasFile: dashed border */
+.upload-area_dashed_true__-dB8w {
+  border-style: dashed;
+  border-color: var(--click-fileUpload-color-stroke-default);
+}
+
+/* !hasFile && isDragging */
+.upload-area_dragging_true__wzFjV {
+  border-color: var(--click-fileUpload-color-stroke-active);
+  background-color: var(--click-fileUpload-color-background-active);
+}
+
+/* isError */
+.upload-area_error_true__gIe8y {
+  border-color: transparent;
+  background-color: var(--click-fileUpload-color-background-error);
+}
+
+.title__1rLes {
+  color: var(--click-fileUpload-color-title-default);
+  font: var(--click-fileUpload-typography-title-default);
+}
+
+.title_not-supported_true__o7ZXZ {
+  color: var(--click-fileUpload-color-title-error);
+}
+
+.description__QyVSQ {
+  color: var(--click-fileUpload-color-description-default);
+  font: var(--click-fileUpload-typography-description-default);
+}
+
+.upload-icon__CeL3E svg {
+  width: var(--click-fileUpload-md-icon-size-width);
+  height: var(--click-fileUpload-md-icon-size-height);
+  color: var(--click-fileUpload-md-color-icon-default);
+}
+
+.upload-text__4oGA- {
+  text-align: left;
+}
+
+.upload-text_centered_true__brhHN {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.upload-text_grow_true__9MNMX {
+  flex: 1;
+}

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

@@ -1,67 +1,71 @@
+import "./FileUploadArea.css";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { styled, css } from 'styled-components';
-import { Button } from '../Button/index.js';
+import { cn } from '../../lib/cva.js';
+import styles from './FileUploadArea.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 import { Title } from '../Title/index.js';
 import { Text } from '../Text/index.js';
+import { Button } from '../Button/index.js';
+import { cva } from 'class-variance-authority';
 
-const UploadArea = styled.div.withConfig({
-  componentId: "sc-14xz07d-0"
-})(["container-type:inline-size;container-name:uploadArea;box-sizing:border-box;width:100%;background-color:", ";border:", ";border-radius:", ";padding:", ";min-height:", ";display:flex;flex-direction:", ";align-items:center;justify-content:", ";gap:", ";cursor:", ";transition:", ";", " ", ""], ({
-  theme
-}) => theme.click.fileUpload.color.background.default, ({
-  theme
-}) => `1px solid ${theme.click.fileUpload.color.stroke.default}`, ({
-  theme,
-  $hasFile
-}) => $hasFile ? `${theme.click.fileUpload.sm.radii.all}` : `${theme.click.fileUpload.md.radii.all}`, ({
-  theme,
-  $hasFile,
-  $size
-}) => $hasFile || $size === "sm" ? `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}` : `${theme.click.fileUpload.md.space.y} ${theme.click.fileUpload.md.space.x}`, ({
-  theme,
-  $size
-}) => $size === "sm" ? `calc(${theme.click.fileUpload.sm.space.y} * 2 + ${theme.sizes[8]})` : "auto", (props) => props.$hasFile ? "row" : props.$size === "sm" ? "row" : "column", (props) => props.$hasFile ? "space-between" : props.$size === "sm" ? "space-between" : "center", ({
-  theme,
-  $size
-}) => $size === "sm" ? theme.click.fileUpload.sm.space.gap : theme.click.fileUpload.md.space.gap, (props) => props.$hasFile ? "default" : "pointer", ({
-  theme
-}) => theme.click.fileUpload.transitions.all, (props) => !props.$hasFile && css(["border-style:dashed;border-color:", ";", ""], ({
-  theme
-}) => theme.click.fileUpload.color.stroke.default, props.$isDragging && css(["background-color:", ";border-color:", ";"], ({
-  theme
-}) => theme.click.fileUpload.color.background.active, ({
-  theme
-}) => theme.click.fileUpload.color.stroke.active)), (props) => props.$isError && css(["background-color:", ";border-color:transparent;"], ({
-  theme
-}) => theme.click.fileUpload.color.background.error));
-const FileUploadTitle = styled(Title).withConfig({
-  componentId: "sc-14xz07d-1"
-})(["font:", ";color:", ";"], ({
-  theme
-}) => theme.click.fileUpload.typography.title.default, ({
-  theme,
-  $isNotSupported
-}) => $isNotSupported ? theme.click.fileUpload.color.title.error : theme.click.fileUpload.color.title.default);
-const FileUploadDescription = styled(Text).withConfig({
-  componentId: "sc-14xz07d-2"
-})(["font:", ";color:", ";"], ({
-  theme
-}) => theme.click.fileUpload.typography.description.default, ({
-  theme
-}) => theme.click.fileUpload.color.description.default);
-const UploadIcon = styled(SvgImage).withConfig({
-  componentId: "sc-14xz07d-3"
-})(["svg{width:", ";height:", ";color:", ";}"], ({
-  theme
-}) => theme.click.fileUpload.md.icon.size.width, ({
-  theme
-}) => theme.click.fileUpload.md.icon.size.height, ({
-  theme
-}) => theme.click.fileUpload.md.color.icon.default);
-const UploadText = styled.div.withConfig({
-  componentId: "sc-14xz07d-4"
-})(["text-align:", ";", " ", ""], (props) => props.$hasFile || props.$size === "sm" ? "left" : "center", (props) => (props.$hasFile || props.$size === "sm") && css(["flex:1;"]), (props) => !props.$hasFile && props.$size === "md" && css(["display:flex;flex-direction:column;align-items:center;width:100%;"]));
+const uploadAreaVariants = cva(styles["upload-area"], {
+  variants: {
+    radius: {
+      sm: styles["upload-area_radius_sm"],
+      md: styles["upload-area_radius_md"]
+    },
+    padding: {
+      sm: styles["upload-area_padding_sm"],
+      md: styles["upload-area_padding_md"]
+    },
+    minHeight: {
+      sm: styles["upload-area_min-height_sm"],
+      md: styles["upload-area_min-height_md"]
+    },
+    direction: {
+      row: styles["upload-area_direction_row"],
+      column: styles["upload-area_direction_column"]
+    },
+    justify: {
+      "space-between": styles["upload-area_justify_space-between"],
+      center: styles["upload-area_justify_center"]
+    },
+    gap: {
+      sm: styles["upload-area_gap_sm"],
+      md: styles["upload-area_gap_md"]
+    },
+    cursor: {
+      default: styles["upload-area_cursor_default"],
+      pointer: styles["upload-area_cursor_pointer"]
+    },
+    dashed: {
+      true: styles["upload-area_dashed_true"]
+    },
+    dragging: {
+      true: styles["upload-area_dragging_true"]
+    },
+    error: {
+      true: styles["upload-area_error_true"]
+    }
+  }
+});
+const titleVariants = cva(styles.title, {
+  variants: {
+    notSupported: {
+      true: styles["title_not-supported_true"]
+    }
+  }
+});
+const uploadTextVariants = cva(styles["upload-text"], {
+  variants: {
+    centered: {
+      true: styles["upload-text_centered_true"]
+    },
+    grow: {
+      true: styles["upload-text_grow_true"]
+    }
+  }
+});
 const FileUploadArea = ({
   title,
   supportedFileTypes,
@@ -78,11 +82,30 @@ const FileUploadArea = ({
   onClick,
   children
 }) => {
-  return /* @__PURE__ */ jsx(UploadArea, { $isDragging: isDragging, $size: size, $hasFile: hasFile, $isError: isError, onDragEnter, onDragLeave, onDragOver, onDrop, onClick: !hasFile ? onClick : void 0, children: !hasFile ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(UploadIcon, { name: "upload" }),
-    /* @__PURE__ */ jsxs(UploadText, { $size: size, $hasFile: false, children: [
-      isNotSupported ? /* @__PURE__ */ jsx(FileUploadTitle, { $isNotSupported: true, type: "h1", children: "Unsupported file type" }) : /* @__PURE__ */ jsx(FileUploadTitle, { $isNotSupported: isNotSupported, type: "h1", children: title }),
-      /* @__PURE__ */ jsxs(FileUploadDescription, { 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(", ")
       ] })

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 { styled, css } from 'styled-components';\nimport { Text } from '@/components/Text';\nimport { Title } from '@/components/Title';\nimport { Icon } from '@/components/Icon';\nimport { Button } from '@/components/Button';\n\nconst UploadArea = styled.div<{\n  $isDragging: boolean;\n  $size: 'sm' | 'md';\n  $hasFile: boolean;\n  $isError?: boolean;\n}>`\n  container-type: inline-size;\n  container-name: uploadArea;\n  box-sizing: border-box;\n  width: 100%;\n  background-color: ${({ theme }) => theme.click.fileUpload.color.background.default};\n  border: ${({ theme }) => `1px solid ${theme.click.fileUpload.color.stroke.default}`};\n  border-radius: ${({ theme, $hasFile }) =>\n    $hasFile\n      ? `${theme.click.fileUpload.sm.radii.all}`\n      : `${theme.click.fileUpload.md.radii.all}`};\n  padding: ${({ theme, $hasFile, $size }) =>\n    $hasFile || $size === 'sm'\n      ? `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}`\n      : `${theme.click.fileUpload.md.space.y} ${theme.click.fileUpload.md.space.x}`};\n  min-height: ${({ theme, $size }) =>\n    $size === 'sm'\n      ? `calc(${theme.click.fileUpload.sm.space.y} * 2 + ${theme.sizes[8]})`\n      : 'auto'};\n  display: flex;\n  flex-direction: ${props =>\n    props.$hasFile ? 'row' : props.$size === 'sm' ? 'row' : 'column'};\n  align-items: center;\n  justify-content: ${props =>\n    props.$hasFile ? 'space-between' : props.$size === 'sm' ? 'space-between' : 'center'};\n  gap: ${({ theme, $size }) =>\n    $size === 'sm'\n      ? theme.click.fileUpload.sm.space.gap\n      : theme.click.fileUpload.md.space.gap};\n  cursor: ${props => (props.$hasFile ? 'default' : 'pointer')};\n  transition: ${({ theme }) => theme.click.fileUpload.transitions.all};\n\n  ${props =>\n    !props.$hasFile &&\n    css`\n      border-style: dashed;\n      border-color: ${({ theme }) => theme.click.fileUpload.color.stroke.default};\n\n      ${props.$isDragging &&\n      css`\n        background-color: ${({ theme }) =>\n          theme.click.fileUpload.color.background.active};\n        border-color: ${({ theme }) => theme.click.fileUpload.color.stroke.active};\n      `}\n    `}\n\n  ${props =>\n    props.$isError &&\n    css`\n      background-color: ${({ theme }) => theme.click.fileUpload.color.background.error};\n      border-color: transparent;\n    `}\n`;\n\nconst FileUploadTitle = styled(Title)<{ $isNotSupported: boolean }>`\n  font: ${({ theme }) => theme.click.fileUpload.typography.title.default};\n  color: ${({ theme, $isNotSupported }) =>\n    $isNotSupported\n      ? theme.click.fileUpload.color.title.error\n      : theme.click.fileUpload.color.title.default};\n`;\n\nconst FileUploadDescription = styled(Text)`\n  font: ${({ theme }) => theme.click.fileUpload.typography.description.default};\n  color: ${({ theme }) => theme.click.fileUpload.color.description.default};\n`;\n\nconst UploadIcon = styled(Icon)`\n  svg {\n    width: ${({ theme }) => theme.click.fileUpload.md.icon.size.width};\n    height: ${({ theme }) => theme.click.fileUpload.md.icon.size.height};\n    color: ${({ theme }) => theme.click.fileUpload.md.color.icon.default};\n  }\n`;\n\nconst UploadText = styled.div<{ $size: 'sm' | 'md'; $hasFile: boolean }>`\n  text-align: ${props => (props.$hasFile || props.$size === 'sm' ? 'left' : 'center')};\n  ${props =>\n    (props.$hasFile || props.$size === 'sm') &&\n    css`\n      flex: 1;\n    `}\n\n  ${props =>\n    !props.$hasFile &&\n    props.$size === 'md' &&\n    css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      width: 100%;\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  return (\n    <UploadArea\n      $isDragging={isDragging}\n      $size={size}\n      $hasFile={hasFile}\n      $isError={isError}\n      onDragEnter={onDragEnter}\n      onDragLeave={onDragLeave}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onClick={!hasFile ? onClick : undefined}\n    >\n      {!hasFile ? (\n        <>\n          <UploadIcon name=\"upload\" />\n          <UploadText\n            $size={size}\n            $hasFile={false}\n          >\n            {isNotSupported ? (\n              <FileUploadTitle\n                $isNotSupported\n                type=\"h1\"\n              >\n                Unsupported file type\n              </FileUploadTitle>\n            ) : (\n              <FileUploadTitle\n                $isNotSupported={isNotSupported}\n                type=\"h1\"\n              >\n                {title}\n              </FileUploadTitle>\n            )}\n            <FileUploadDescription>\n              Files supported: {supportedFileTypes.join(', ')}\n            </FileUploadDescription>\n          </UploadText>\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    </UploadArea>\n  );\n};\n"],"names":["UploadArea","styled","div","withConfig","componentId","theme","click","fileUpload","color","background","default","stroke","$hasFile","sm","radii","all","md","$size","space","y","x","sizes","props","gap","transitions","css","$isDragging","active","$isError","error","FileUploadTitle","Title","typography","title","$isNotSupported","FileUploadDescription","Text","description","UploadIcon","Icon","icon","size","width","height","UploadText","FileUploadArea","supportedFileTypes","isDragging","isNotSupported","hasFile","isError","multiple","onDragEnter","onDragLeave","onDragOver","onDrop","onClick","children","undefined","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":["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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"}

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

@@ -0,0 +1,32 @@
+const title = "title__1rLes";
+const description = "description__QyVSQ";
+const styles = {
+	"upload-area": "upload-area__3SxAA",
+	"upload-area_radius_sm": "upload-area_radius_sm__DW4eQ",
+	"upload-area_radius_md": "upload-area_radius_md__k9cZA",
+	"upload-area_padding_sm": "upload-area_padding_sm__ci1xq",
+	"upload-area_padding_md": "upload-area_padding_md__SflJQ",
+	"upload-area_min-height_sm": "upload-area_min-height_sm__JmKFU",
+	"upload-area_min-height_md": "upload-area_min-height_md__7BUe3",
+	"upload-area_direction_row": "upload-area_direction_row__dPIPY",
+	"upload-area_direction_column": "upload-area_direction_column__Yd-Y9",
+	"upload-area_justify_space-between": "upload-area_justify_space-between__8kSQQ",
+	"upload-area_justify_center": "upload-area_justify_center__vW-59",
+	"upload-area_gap_sm": "upload-area_gap_sm__fRrTo",
+	"upload-area_gap_md": "upload-area_gap_md__gndXo",
+	"upload-area_cursor_default": "upload-area_cursor_default__Yrr8K",
+	"upload-area_cursor_pointer": "upload-area_cursor_pointer__nnHd9",
+	"upload-area_dashed_true": "upload-area_dashed_true__-dB8w",
+	"upload-area_dragging_true": "upload-area_dragging_true__wzFjV",
+	"upload-area_error_true": "upload-area_error_true__gIe8y",
+	title: title,
+	"title_not-supported_true": "title_not-supported_true__o7ZXZ",
+	description: description,
+	"upload-icon": "upload-icon__CeL3E",
+	"upload-text": "upload-text__4oGA-",
+	"upload-text_centered_true": "upload-text_centered_true__brhHN",
+	"upload-text_grow_true": "upload-text_grow_true__9MNMX"
+};
+
+export { styles as default, description, title };
+//# sourceMappingURL=FileUploadArea.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadArea.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,82 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
+.file-item-container__86J-i {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-fileUpload-sm-space-gap);
+}
+
+.file-item-container_inline_false__QqJXZ {
+  padding: var(--click-fileUpload-sm-space-y) var(--click-fileUpload-sm-space-x);
+  border: 1px solid var(--click-fileUpload-color-stroke-default);
+  border-radius: var(--click-fileUpload-sm-radii-all);
+  background-color: var(--click-fileUpload-color-background-default);
+}
+
+.file-item-container_inline_false__QqJXZ.file-item-container_error_true__uRfbn {
+  border-color: transparent;
+  background-color: var(--click-fileUpload-color-background-error);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.document-icon__CX1O5 {
+}
+
+.document-icon_size_sm__sEIPl svg {
+  width: var(--click-fileUpload-sm-icon-size-width);
+  height: var(--click-fileUpload-sm-icon-size-height);
+  color: var(--click-fileUpload-sm-color-icon-default);
+}
+
+.document-icon_size_md__dqfzB svg {
+  width: var(--click-fileUpload-md-icon-size-width);
+  height: var(--click-fileUpload-md-icon-size-height);
+  color: var(--click-fileUpload-md-color-icon-default);
+}
+
+.description__sjgXO {
+  color: var(--click-fileUpload-color-description-default);
+  font: var(--click-fileUpload-typography-description-default);
+}
+
+.description_error_true__wbkov {
+  color: var(--click-fileUpload-color-title-error);
+}
+
+.file-details__aAMdx {
+  display: flex;
+  min-width: 0;
+  gap: var(--click-fileUpload-md-space-gap);
+  border: none;
+}
+
+.file-actions__OUaMv {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  gap: 0;
+}
+
+.file-content-container__40JkR {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.file-content-container_size_sm__8od-v {
+  min-height: 24px;
+}
+
+.file-content-container_size_md__U6Hwr {
+  min-height: auto;
+}
+
+.progress-bar-wrapper__q0i9x {
+  margin-top: var(--click-fileUpload-md-space-gap);
+  margin-bottom: 9px;
+}