@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/FileTabs/FileTabs.tsx"],"sourcesContent":["import {\n  HTMLAttributes,\n  createContext,\n  useContext,\n  ReactElement,\n  Children,\n  useState,\n  MouseEvent,\n  useEffect,\n  ReactNode,\n  WheelEvent,\n  useRef,\n  CSSProperties,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Icon } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport styles from './FileTabs.module.css';\n\n// TODO: Check if react-sortablejs has ESM version\nimport ReactSortableModule from 'react-sortablejs/dist/index.js';\nimport type {\n  ItemInterface,\n  Sortable,\n  Store,\n  ReactSortableProps,\n} from 'react-sortablejs';\nconst { ReactSortable } = ReactSortableModule;\n\nexport type FileTabStatusType =\n  | 'default'\n  | 'success'\n  | 'neutral'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\ninterface ContextProps {\n  selectedIndex?: number;\n  onClose: (index: number) => void;\n}\n\nexport const TabContext = createContext<ContextProps>({\n  selectedIndex: undefined,\n  onClose: () => null,\n});\n\nexport interface FileTabProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Callback when the tab is closed */\n  onClose?: () => void;\n  /** Index of the tab in the list */\n  index: number;\n  /** Status indicator for the tab */\n  status?: FileTabStatusType;\n  /** Icon to display in the tab */\n  icon?: IconName | ReactNode;\n  /** Text to display in the tab */\n  text: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Whether the tab is in preview mode (italic text) */\n  preview?: boolean;\n}\nexport interface FileTabsProps extends Omit<\n  ReactSortableProps<ItemInterface>,\n  'onSelect' | 'list' | 'setList'\n> {\n  /** Index of the currently selected tab */\n  selectedIndex?: number;\n  /** The tab elements to render */\n  children: ReactElement<FileTabProps> | ReactElement<FileTabProps>[];\n  /** Callback when a tab is reordered via drag and drop */\n  onReorderTab: (sourcePosition: number, destinationPosition: number) => void;\n  /** Callback when a tab is closed */\n  onClose: (index: number) => void;\n  /** Callback when a tab is selected */\n  onSelect: (index: number) => void;\n  /** List of items for sortable functionality */\n  list?: ItemInterface[];\n  /** Setter for the sortable list */\n  setList?: (newState: ItemInterface[], sortable: Sortable | null, store: Store) => void;\n}\n\nconst useSelect = () => {\n  const result = useContext(TabContext);\n  if (!result) {\n    throw new Error('Context used outside of its Provider!');\n  }\n  return result;\n};\n\nexport const FileTabs = ({\n  selectedIndex,\n  children,\n  onReorderTab,\n  onClose: onCloseProp,\n  onSelect: onSelectProp,\n  list: listProp,\n  setList: setListProp,\n  onEnd,\n  direction,\n  group,\n  className,\n  ...props\n}: FileTabsProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [list, setList] = useState<ItemInterface[]>(\n    Children.map(children, (_, index) => ({\n      id: `tab-element-${index}`,\n    }))\n  );\n  useEffect(() => {\n    setList(\n      Children.map(children, (_, index) => ({\n        id: `tab-element-${index}`,\n      }))\n    );\n  }, [children]);\n\n  const onClose = (index: number) => {\n    onCloseProp(index);\n    setList(list => {\n      list.splice(index, 1);\n      return [...list];\n    });\n  };\n\n  const onSelect = (index: number) => () => {\n    onSelectProp(index);\n  };\n\n  const value = {\n    selectedIndex,\n    onClose,\n  };\n\n  const onWheel = (evt: WheelEvent<HTMLDivElement>) => {\n    if (ref.current) {\n      ref.current.scrollLeft += evt.deltaY;\n    }\n  };\n  return (\n    <TabContext.Provider value={value}>\n      <div\n        ref={ref}\n        onWheel={onWheel}\n        role=\"tablist\"\n        onScroll={e => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={styles.tabs}\n        style={\n          {\n            '--file-tabs-count-width': `${(listProp ?? list).length * 200}px`,\n          } as CSSProperties\n        }\n      >\n        <ReactSortable\n          direction={direction ?? 'horizontal'}\n          group={group ?? 'tabbar'}\n          list={listProp ?? list}\n          setList={setListProp ?? setList}\n          onEnd={(evt, sortable, store) => {\n            const { newDraggableIndex, oldDraggableIndex } = evt;\n            if (\n              typeof newDraggableIndex === 'number' &&\n              typeof oldDraggableIndex === 'number' &&\n              oldDraggableIndex !== newDraggableIndex\n            ) {\n              onReorderTab(oldDraggableIndex, newDraggableIndex);\n            }\n            if (typeof onEnd === 'function') {\n              onEnd(evt, sortable, store);\n            }\n          }}\n          revertOnSpill\n          {...props}\n          className={cn(styles['tabs-sortable'], className)}\n        >\n          {Children.map(children, (child, index) => (\n            <div\n              tabIndex={index + 1}\n              role=\"tab\"\n              onClick={onSelect(index)}\n              key={`tab-element-${index}`}\n            >\n              {child}\n            </div>\n          ))}\n        </ReactSortable>\n      </div>\n    </TabContext.Provider>\n  );\n};\n\nconst tabVariants = cva(styles.tab, {\n  variants: {\n    active: {\n      true: styles.tab_active,\n      false: styles.tab_inactive,\n    },\n    fixed: {\n      true: styles.tab_fixed,\n      false: styles['tab_full-width'],\n    },\n    preview: {\n      true: styles.tab_preview,\n      false: '',\n    },\n    dismissable: {\n      true: styles.tab_dismissable,\n      false: '',\n    },\n  },\n  defaultVariants: {\n    fixed: false,\n    preview: false,\n    dismissable: false,\n  },\n});\n\nconst Tab = ({\n  text,\n  index,\n  icon,\n  onMouseDown: onMouseDownProp,\n  status = 'default',\n  testId,\n  preview,\n  className,\n  ...props\n}: FileTabProps) => {\n  const { selectedIndex, onClose: onCloseProp } = useSelect();\n  const onMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n    e.currentTarget.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n    if (typeof onMouseDownProp === 'function') {\n      onMouseDownProp(e);\n    }\n  };\n\n  const onClose = (e: MouseEvent<HTMLButtonElement>): void => {\n    e.preventDefault();\n    e.stopPropagation();\n    onCloseProp(index);\n  };\n\n  return (\n    <div\n      onMouseDown={onMouseDown}\n      data-testid={testId ? `${testId}-${index}` : undefined}\n      {...props}\n      className={cn(\n        tabVariants({\n          active: selectedIndex === index,\n          preview,\n          dismissable: true,\n        }),\n        className\n      )}\n    >\n      <div className={styles['tab-content']}>\n        {typeof icon === 'string' ? <Icon name={icon as IconName} /> : icon}\n        <span className={styles['tab-content-text']}>{text}</span>\n      </div>\n      <IconButton\n        className={styles['empty-button']}\n        htmlType=\"button\"\n        icon=\"cross\"\n        onClick={onClose}\n        data-type=\"close\"\n        data-testid={testId ? `${testId}-${index}-close` : undefined}\n      />\n      <div\n        className={styles.indicator}\n        data-indicator={status}\n        data-testid={testId ? `${testId}-${index}-status` : undefined}\n      />\n    </div>\n  );\n};\n\nTab.displayName = 'FileTab';\n\nFileTabs.Tab = Tab;\n\ninterface FileTabElementProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: IconName | ReactNode;\n  active?: boolean;\n  preview?: boolean;\n}\nexport const FileTabElement = ({\n  icon,\n  children,\n  active = false,\n  preview,\n  className,\n  ...props\n}: FileTabElementProps) => {\n  return (\n    <div\n      {...props}\n      className={cn(tabVariants({ active, preview, fixed: true }), className)}\n    >\n      {typeof icon === 'string' ? <Icon name={icon as IconName} /> : icon}\n      {children && <span className={styles['tab-content-text']}>{children}</span>}\n    </div>\n  );\n};\n"],"names":["ReactSortable","ReactSortableModule","TabContext","createContext","selectedIndex","undefined","onClose","useSelect","result","useContext","Error","FileTabs","children","onReorderTab","onCloseProp","onSelect","onSelectProp","list","listProp","setList","setListProp","onEnd","direction","group","className","props","ref","useRef","useState","Children","map","_","index","id","useEffect","splice","value","onWheel","evt","current","scrollLeft","deltaY","jsx","e","preventDefault","stopPropagation","styles","tabs","length","sortable","store","newDraggableIndex","oldDraggableIndex","cn","child","tabVariants","cva","tab","variants","active","true","tab_active","false","tab_inactive","fixed","tab_fixed","preview","tab_preview","dismissable","tab_dismissable","defaultVariants","Tab","text","icon","onMouseDown","onMouseDownProp","status","testId","currentTarget","scrollIntoView","behavior","block","inline","jsxs","Icon","IconButton","indicator","displayName","FileTabElement"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/FileTabs/FileTabs.tsx"],"sourcesContent":["import {\n  HTMLAttributes,\n  createContext,\n  useContext,\n  ReactElement,\n  Children,\n  useState,\n  MouseEvent,\n  useEffect,\n  ReactNode,\n  WheelEvent,\n  useRef,\n  CSSProperties,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Icon } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport styles from './FileTabs.module.css';\n\n// TODO: Check if react-sortablejs has ESM version\nimport ReactSortableModule from 'react-sortablejs/dist/index.js';\nimport type {\n  ItemInterface,\n  Sortable,\n  Store,\n  ReactSortableProps,\n} from 'react-sortablejs';\nconst { ReactSortable } = ReactSortableModule;\n\nexport type FileTabStatusType =\n  | 'default'\n  | 'success'\n  | 'neutral'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\ninterface ContextProps {\n  selectedIndex?: number;\n  onClose: (index: number) => void;\n}\n\nexport const TabContext = createContext<ContextProps>({\n  selectedIndex: undefined,\n  onClose: () => null,\n});\n\nexport interface FileTabProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Callback when the tab is closed */\n  onClose?: () => void;\n  /** Index of the tab in the list */\n  index: number;\n  /** Status indicator for the tab */\n  status?: FileTabStatusType;\n  /** Icon to display in the tab */\n  icon?: IconName | ReactNode;\n  /** Text to display in the tab */\n  text: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Whether the tab is in preview mode (italic text) */\n  preview?: boolean;\n}\nexport interface FileTabsProps extends Omit<\n  ReactSortableProps<ItemInterface>,\n  'onSelect' | 'list' | 'setList'\n> {\n  /** Index of the currently selected tab */\n  selectedIndex?: number;\n  /** The tab elements to render */\n  children: ReactElement<FileTabProps> | ReactElement<FileTabProps>[];\n  /** Callback when a tab is reordered via drag and drop */\n  onReorderTab: (sourcePosition: number, destinationPosition: number) => void;\n  /** Callback when a tab is closed */\n  onClose: (index: number) => void;\n  /** Callback when a tab is selected */\n  onSelect: (index: number) => void;\n  /** List of items for sortable functionality */\n  list?: ItemInterface[];\n  /** Setter for the sortable list */\n  setList?: (newState: ItemInterface[], sortable: Sortable | null, store: Store) => void;\n}\n\nconst useSelect = () => {\n  const result = useContext(TabContext);\n  if (!result) {\n    throw new Error('Context used outside of its Provider!');\n  }\n  return result;\n};\n\nexport const FileTabs = ({\n  selectedIndex,\n  children,\n  onReorderTab,\n  onClose: onCloseProp,\n  onSelect: onSelectProp,\n  list: listProp,\n  setList: setListProp,\n  onEnd,\n  direction,\n  group,\n  className,\n  ...props\n}: FileTabsProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [list, setList] = useState<ItemInterface[]>(\n    Children.map(children, (_, index) => ({\n      id: `tab-element-${index}`,\n    }))\n  );\n  useEffect(() => {\n    setList(\n      Children.map(children, (_, index) => ({\n        id: `tab-element-${index}`,\n      }))\n    );\n  }, [children]);\n\n  const onClose = (index: number) => {\n    onCloseProp(index);\n    setList(list => {\n      list.splice(index, 1);\n      return [...list];\n    });\n  };\n\n  const onSelect = (index: number) => () => {\n    onSelectProp(index);\n  };\n\n  const value = {\n    selectedIndex,\n    onClose,\n  };\n\n  const onWheel = (evt: WheelEvent<HTMLDivElement>) => {\n    if (ref.current) {\n      ref.current.scrollLeft += evt.deltaY;\n    }\n  };\n  return (\n    <TabContext.Provider value={value}>\n      <div\n        ref={ref}\n        onWheel={onWheel}\n        role=\"tablist\"\n        onScroll={e => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={styles.tabs}\n        style={\n          {\n            '--file-tabs-count-width': `${(listProp ?? list).length * 200}px`,\n          } as CSSProperties\n        }\n      >\n        <ReactSortable\n          direction={direction ?? 'horizontal'}\n          group={group ?? 'tabbar'}\n          list={listProp ?? list}\n          setList={setListProp ?? setList}\n          onEnd={(evt, sortable, store) => {\n            const { newDraggableIndex, oldDraggableIndex } = evt;\n            if (\n              typeof newDraggableIndex === 'number' &&\n              typeof oldDraggableIndex === 'number' &&\n              oldDraggableIndex !== newDraggableIndex\n            ) {\n              onReorderTab(oldDraggableIndex, newDraggableIndex);\n            }\n            if (typeof onEnd === 'function') {\n              onEnd(evt, sortable, store);\n            }\n          }}\n          revertOnSpill\n          {...props}\n          className={cn(styles['tabs-sortable'], className)}\n        >\n          {Children.map(children, (child, index) => (\n            <div\n              tabIndex={index + 1}\n              role=\"tab\"\n              onClick={onSelect(index)}\n              key={`tab-element-${index}`}\n            >\n              {child}\n            </div>\n          ))}\n        </ReactSortable>\n      </div>\n    </TabContext.Provider>\n  );\n};\n\nconst tabVariants = cva(styles.tab, {\n  variants: {\n    active: {\n      true: styles.tab_active,\n      false: styles.tab_inactive,\n    },\n    fixed: {\n      true: styles.tab_fixed,\n      false: styles['tab_full-width'],\n    },\n    preview: {\n      true: styles.tab_preview,\n      false: '',\n    },\n    dismissable: {\n      true: styles.tab_dismissable,\n      false: '',\n    },\n  },\n  defaultVariants: {\n    fixed: false,\n    preview: false,\n    dismissable: false,\n  },\n});\n\nconst Tab = ({\n  text,\n  index,\n  icon,\n  onMouseDown: onMouseDownProp,\n  status = 'default',\n  testId,\n  preview,\n  className,\n  ...props\n}: FileTabProps) => {\n  const { selectedIndex, onClose: onCloseProp } = useSelect();\n  const onMouseDown = (e: MouseEvent<HTMLDivElement>) => {\n    e.currentTarget.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    });\n    if (typeof onMouseDownProp === 'function') {\n      onMouseDownProp(e);\n    }\n  };\n\n  const onClose = (e: MouseEvent<HTMLButtonElement>): void => {\n    e.preventDefault();\n    e.stopPropagation();\n    onCloseProp(index);\n  };\n\n  return (\n    <div\n      onMouseDown={onMouseDown}\n      data-testid={testId ? `${testId}-${index}` : undefined}\n      {...props}\n      className={cn(\n        tabVariants({\n          active: selectedIndex === index,\n          preview,\n          dismissable: true,\n        }),\n        className\n      )}\n    >\n      <div className={styles['tab-content']}>\n        {typeof icon === 'string' ? <Icon name={icon as IconName} /> : icon}\n        <span className={styles['tab-content-text']}>{text}</span>\n      </div>\n      <IconButton\n        className={styles['empty-button']}\n        htmlType=\"button\"\n        icon=\"cross\"\n        onClick={onClose}\n        data-type=\"close\"\n        data-testid={testId ? `${testId}-${index}-close` : undefined}\n      />\n      <div\n        className={styles.indicator}\n        data-indicator={status}\n        data-testid={testId ? `${testId}-${index}-status` : undefined}\n      />\n    </div>\n  );\n};\n\nTab.displayName = 'FileTab';\n\nFileTabs.Tab = Tab;\n\ninterface FileTabElementProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: IconName | ReactNode;\n  active?: boolean;\n  preview?: boolean;\n}\nexport const FileTabElement = ({\n  icon,\n  children,\n  active = false,\n  preview,\n  className,\n  ...props\n}: FileTabElementProps) => {\n  return (\n    <div\n      {...props}\n      className={cn(tabVariants({ active, preview, fixed: true }), className)}\n    >\n      {typeof icon === 'string' ? <Icon name={icon as IconName} /> : icon}\n      {children && <span className={styles['tab-content-text']}>{children}</span>}\n    </div>\n  );\n};\n"],"names":["ReactSortableModule","createContext","useContext","useRef","useState","Children","useEffect","list","jsx","styles","cn","cva","jsxs","Icon","IconButton"],"mappings":"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"}

package/dist/cjs/components/FileUpload/FileMultiUpload.cjs

@@ -19,13 +19,16 @@ const FileMultiUpload = ({
   onFileRemove,
   onFileFailure
 }) => {
-  const handleFilesProcessed = react.useCallback((processedFiles) => {
-    processedFiles.forEach((file) => {
-      if (onFileSelect) {
-        onFileSelect(file);
-      }
-    });
-  }, [onFileSelect]);
+  const handleFilesProcessed = react.useCallback(
+    (processedFiles) => {
+      processedFiles.forEach((file) => {
+        if (onFileSelect) {
+          onFileSelect(file);
+        }
+      });
+    },
+    [onFileSelect]
+  );
   const {
     isDragging,
     isNotSupported,
@@ -42,23 +45,68 @@ const FileMultiUpload = ({
     onFileFailure,
     multiple: true
   });
-  const handleRemoveFile = react.useCallback((fileId) => {
-    if (onFileRemove) {
-      onFileRemove(fileId);
-    }
-  }, [onFileRemove]);
-  const handleRetryUpload = react.useCallback((fileId) => {
-    if (onFileRetry) {
-      onFileRetry(fileId);
-    }
-  }, [onFileRetry]);
+  const handleRemoveFile = react.useCallback(
+    (fileId) => {
+      if (onFileRemove) {
+        onFileRemove(fileId);
+      }
+    },
+    [onFileRemove]
+  );
+  const handleRetryUpload = react.useCallback(
+    (fileId) => {
+      if (onFileRetry) {
+        onFileRetry(fileId);
+      }
+    },
+    [onFileRetry]
+  );
   const acceptedFileTypes = supportedFileTypes.join(",");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FileUploadArea.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__ */ jsxRuntime.jsx("div", { className: FileMultiUpload_module.default["files-list"], children: files.map((file) => /* @__PURE__ */ jsxRuntime.jsx(FileUploadItem.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__ */ jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, multiple: true, style: {
-      display: "none"
-    } })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FileUploadArea.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__ */ jsxRuntime.jsx("div", { className: FileMultiUpload_module.default["files-list"], children: files.map((file) => /* @__PURE__ */ jsxRuntime.jsx(
+      FileUploadItem.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__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        accept: acceptedFileTypes,
+        onChange: handleFileSelect,
+        multiple: true,
+        style: { display: "none" }
+      }
+    )
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"FileMultiUpload.cjs","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","jsxs","Fragment","jsx","FileUploadArea","length","styles","map","FileUploadItem","name","size","progress","status","errorMessage","id","display"],"mappings":"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"}
+{"version":3,"file":"FileMultiUpload.cjs","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":["useCallback","useDragAndDrop","jsxs","Fragment","jsx","FileUploadArea","styles","FileUploadItem"],"mappings":"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"}

package/dist/cjs/components/FileUpload/FileMultiUpload.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) */
 .files-list__Of0Ps {
   display: flex;
   width: 100%;
@@ -6,3 +6,4 @@
   flex-direction: column;
   gap: var(--click-fileUpload-sm-space-gap);
 }
+}

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

@@ -1,4 +1,4 @@
-.wrapper__LM6zP {
+@layer clickui {.wrapper__LM6zP {
   width: 100%;
 }
 
@@ -12,3 +12,4 @@
     margin: 0 auto;
   }
 }
+}

package/dist/cjs/components/FileUpload/FileUploadArea.cjs

@@ -87,38 +87,82 @@ const FileUploadArea = ({
   children
 }) => {
   const isCompact = hasFile || size === "sm";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "upload", className: FileUploadArea_module.default["upload-icon"] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(uploadTextVariants({
-      centered: !hasFile && size === "md",
-      grow: hasFile || size === "sm"
-    })), children: [
-      isNotSupported ? /* @__PURE__ */ jsxRuntime.jsx(Title.Title, { type: "h1", className: cva.cn(titleVariants({
-        notSupported: true
-      })), children: "Unsupported file type" }) : /* @__PURE__ */ jsxRuntime.jsx(Title.Title, { type: "h1", className: cva.cn(titleVariants({
-        notSupported: isNotSupported
-      })), children: title }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { className: FileUploadArea_module.default.description, children: [
-        "Files supported: ",
-        supportedFileTypes.join(", ")
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "secondary", onClick: (e) => {
-      e.stopPropagation();
-      onClick?.();
-    }, children: multiple ? "Browse files" : "Browse file" })
-  ] }) : children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cva.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: "upload",
+            className: FileUploadArea_module.default["upload-icon"]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cva.cn(
+              uploadTextVariants({
+                centered: !hasFile && size === "md",
+                grow: hasFile || size === "sm"
+              })
+            ),
+            children: [
+              isNotSupported ? /* @__PURE__ */ jsxRuntime.jsx(
+                Title.Title,
+                {
+                  type: "h1",
+                  className: cva.cn(titleVariants({ notSupported: true })),
+                  children: "Unsupported file type"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                Title.Title,
+                {
+                  type: "h1",
+                  className: cva.cn(titleVariants({ notSupported: isNotSupported })),
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { className: FileUploadArea_module.default.description, children: [
+                "Files supported: ",
+                supportedFileTypes.join(", ")
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            type: "secondary",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClick?.();
+            },
+            children: multiple ? "Browse files" : "Browse file"
+          }
+        )
+      ] }) : children
+    }
+  );
 };
 
 exports.FileUploadArea = FileUploadArea;

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadArea.cjs","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","jsx","cn","undefined","jsxs","Fragment","Icon","Title","Text","description","join","Button","e","stopPropagation"],"mappings":";;;;;;;;;;;;;AAQA,MAAMA,kBAAAA,GAAqBC,0BAAAA,CAAIC,6BAAAA,CAAO,aAAa,CAAA,EAAG;AAAA,EACpDC,QAAAA,EAAU;AAAA,IACRC,MAAAA,EAAQ;AAAA,MACNC,EAAAA,EAAIH,8BAAO,uBAAuB,CAAA;AAAA,MAClCI,EAAAA,EAAIJ,8BAAO,uBAAuB;AAAA,KACpC;AAAA,IACAK,OAAAA,EAAS;AAAA,MACPF,EAAAA,EAAIH,8BAAO,wBAAwB,CAAA;AAAA,MACnCI,EAAAA,EAAIJ,8BAAO,wBAAwB;AAAA,KACrC;AAAA,IACAM,SAAAA,EAAW;AAAA,MACTH,EAAAA,EAAIH,8BAAO,2BAA2B,CAAA;AAAA,MACtCI,EAAAA,EAAIJ,8BAAO,2BAA2B;AAAA,KACxC;AAAA,IACAO,SAAAA,EAAW;AAAA,MACTC,GAAAA,EAAKR,8BAAO,2BAA2B,CAAA;AAAA,MACvCS,MAAAA,EAAQT,8BAAO,8BAA8B;AAAA,KAC/C;AAAA,IACAU,OAAAA,EAAS;AAAA,MACP,eAAA,EAAiBV,8BAAO,mCAAmC,CAAA;AAAA,MAC3DW,MAAAA,EAAQX,8BAAO,4BAA4B;AAAA,KAC7C;AAAA,IACAY,GAAAA,EAAK;AAAA,MACHT,EAAAA,EAAIH,8BAAO,oBAAoB,CAAA;AAAA,MAC/BI,EAAAA,EAAIJ,8BAAO,oBAAoB;AAAA,KACjC;AAAA,IACAa,MAAAA,EAAQ;AAAA,MACNC,OAAAA,EAASd,8BAAO,4BAA4B,CAAA;AAAA,MAC5Ce,OAAAA,EAASf,8BAAO,4BAA4B;AAAA,KAC9C;AAAA,IACAgB,MAAAA,EAAQ;AAAA,MACNC,IAAAA,EAAMjB,8BAAO,yBAAyB;AAAA,KACxC;AAAA,IACAkB,QAAAA,EAAU;AAAA,MACRD,IAAAA,EAAMjB,8BAAO,2BAA2B;AAAA,KAC1C;AAAA,IACAmB,KAAAA,EAAO;AAAA,MACLF,IAAAA,EAAMjB,8BAAO,wBAAwB;AAAA;AACvC;AAEJ,CAAC,CAAA;AAED,MAAMoB,aAAAA,GAAgBrB,0BAAAA,CAAIC,6BAAAA,CAAOqB,KAAAA,EAAO;AAAA,EACtCpB,QAAAA,EAAU;AAAA,IACRqB,YAAAA,EAAc;AAAA,MACZL,IAAAA,EAAMjB,8BAAO,0BAA0B;AAAA;AACzC;AAEJ,CAAC,CAAA;AAED,MAAMuB,kBAAAA,GAAqBxB,0BAAAA,CAAIC,6BAAAA,CAAO,aAAa,CAAA,EAAG;AAAA,EACpDC,QAAAA,EAAU;AAAA,IACRuB,QAAAA,EAAU;AAAA,MACRP,IAAAA,EAAMjB,8BAAO,2BAA2B;AAAA,KAC1C;AAAA,IACAyB,IAAAA,EAAM;AAAA,MACJR,IAAAA,EAAMjB,8BAAO,uBAAuB;AAAA;AACtC;AAEJ,CAAC,CAAA;AAmBM,MAAM0B,iBAA0CA,CAAC;AAAA,EACtDL,KAAAA;AAAAA,EACAM,kBAAAA;AAAAA,EACAC,IAAAA,GAAO,IAAA;AAAA,EACPC,UAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA,GAAU,KAAA;AAAA,EACVC,OAAAA,GAAU,KAAA;AAAA,EACVC,QAAAA,GAAW,KAAA;AAAA,EACXC,WAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC;AACF,CAAA,KAAM;AACJ,EAAA,MAAMC,SAAAA,GAAYT,WAAWH,IAAAA,KAAS,IAAA;AAEtC,EAAA,uBACEa,cAAA,CAAC,KAAA,EAAA,EACC,SAAA,EAAWC,MAAAA,CACT5C,kBAAAA,CAAmB;AAAA,IACjBI,MAAAA,EAAQ6B,UAAU,IAAA,GAAO,IAAA;AAAA,IACzB1B,OAAAA,EAASmC,YAAY,IAAA,GAAO,IAAA;AAAA,IAC5BlC,SAAAA,EAAWsB,IAAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,IAClCrB,SAAAA,EAAWwB,OAAAA,IAAWH,IAAAA,KAAS,IAAA,GAAO,KAAA,GAAQ,QAAA;AAAA,IAC9ClB,OAAAA,EAASqB,OAAAA,IAAWH,IAAAA,KAAS,IAAA,GAAO,eAAA,GAAkB,QAAA;AAAA,IACtDhB,GAAAA,EAAKgB,IAAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,IAC5Bf,MAAAA,EAAQkB,UAAU,SAAA,GAAY,SAAA;AAAA,IAC9Bf,QAAQ,CAACe,OAAAA;AAAAA,IACTb,QAAAA,EAAU,CAACa,OAAAA,IAAWF,UAAAA;AAAAA,IACtBV,KAAAA,EAAOa;AAAAA,GACR,CACH,CAAA,EACA,WAAA,EACA,aACA,UAAA,EACA,MAAA,EACA,OAAA,EAAS,CAACD,OAAAA,GAAUO,OAAAA,GAAUK,MAAAA,EAE7B,QAAA,EAAA,CAACZ,0BACAa,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAJ,cAAA,CAACK,aACC,IAAA,EAAK,QAAA,EACL,SAAA,EAAW9C,6BAAAA,CAAO,aAAa,CAAA,EAAE,CAAA;AAAA,oBAEnC4C,eAAA,CAAC,KAAA,EAAA,EACC,SAAA,EAAWF,MAAAA,CACTnB,kBAAAA,CAAmB;AAAA,MACjBC,QAAAA,EAAU,CAACO,OAAAA,IAAWH,IAAAA,KAAS,IAAA;AAAA,MAC/BH,IAAAA,EAAMM,WAAWH,IAAAA,KAAS;AAAA,KAC3B,CACH,CAAA,EAECE,QAAAA,EAAAA;AAAAA,MAAAA,cAAAA,kCACEiB,WAAA,EAAA,EACC,IAAA,EAAK,IAAA,EACL,SAAA,EAAWL,OAAGtB,aAAAA,CAAc;AAAA,QAAEE,YAAAA,EAAc;AAAA,OAAM,CAAC,CAAA,EAAE,QAAA,EAAA,uBAAA,EAGvD,CAAA,mBAEAmB,cAAA,CAACM,WAAA,EAAA,EACC,IAAA,EAAK,IAAA,EACL,SAAA,EAAWL,MAAAA,CAAGtB,aAAAA,CAAc;AAAA,QAAEE,YAAAA,EAAcQ;AAAAA,OAAgB,CAAC,CAAA,EAE5DT,QAAAA,EAAAA,KAAAA,EACH,CAAA;AAAA,sBAEFuB,eAAA,CAACI,SAAA,EAAA,EAAK,SAAA,EAAWhD,6BAAAA,CAAOiD,WAAAA,EAAY,QAAA,EAAA;AAAA,QAAA,mBAAA;AAAA,QAChBtB,kBAAAA,CAAmBuB,KAAK,IAAI;AAAA,OAAA,EAChD;AAAA,KAAA,EACF,CAAA;AAAA,oBACAT,cAAA,CAACU,aAAA,EAAA,EACC,IAAA,EAAM,WAAA,EACN,SAASC,CAAAA,CAAAA,KAAK;AACZA,MAAAA,CAAAA,CAAEC,eAAAA,EAAgB;AAClBf,MAAAA,OAAAA,IAAU;AAAA,IACZ,CAAA,EAECL,QAAAA,EAAAA,QAAAA,GAAW,cAAA,GAAiB,aAAA,EAC/B;AAAA,GAAA,EACF,IAEAM,QAAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FileUploadArea.cjs","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":["cva","styles","jsx","cn","jsxs","Fragment","Icon","Title","Text","Button"],"mappings":"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"}

package/dist/cjs/components/FileUpload/FileUploadArea.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) */
 .upload-area__3SxAA {
   display: flex;
   box-sizing: border-box;
@@ -128,3 +128,4 @@
 .upload-text_grow_true__9MNMX {
   flex: 1;
 }
+}

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

@@ -60,34 +60,71 @@ const FileUploadItem = ({
   inline = false
 }) => {
   const isError = !showSuccess && !showProgress;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(fileItemContainerVariants({
-    inline: inline ? void 0 : false,
-    error: !inline && isError
-  })), children: [
-    showSuccess ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "xs", state: "success", name: "check" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "document", className: cva.cn(documentIconVariants({
-      size
-    })) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(fileContentContainerVariants({
-      size
-    })), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FileUploadItem_module.default["file-details"], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(MiddleTruncator.MiddleTruncator, { text: fileName }),
-        showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { className: FileUploadItem_module.default.description, children: [
-          progress,
-          "%"
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cva.cn(
+        fileItemContainerVariants({
+          inline: inline ? void 0 : false,
+          error: !inline && isError
+        })
+      ),
+      children: [
+        showSuccess ? /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            size: "xs",
+            state: "success",
+            name: "check"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: "document",
+            className: cva.cn(documentIconVariants({ size }))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(fileContentContainerVariants({ size })), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FileUploadItem_module.default["file-details"], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(MiddleTruncator.MiddleTruncator, { text: fileName }),
+            showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { className: FileUploadItem_module.default.description, children: [
+              progress,
+              "%"
+            ] })
+          ] }),
+          isError && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: cva.cn(descriptionVariants({ error: true })), children: failureMessage }),
+          showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsx("div", { className: FileUploadItem_module.default["progress-bar-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx(
+            ProgressBar.ProgressBar,
+            {
+              progress,
+              type: "small"
+            }
+          ) }),
+          showSuccess && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: FileUploadItem_module.default.description, children: file.formatFileSize(fileSize) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FileUploadItem_module.default["file-actions"], 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
+            }
+          )
         ] })
-      ] }),
-      isError && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: cva.cn(descriptionVariants({
-        error: true
-      })), children: failureMessage }),
-      showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsx("div", { className: FileUploadItem_module.default["progress-bar-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar.ProgressBar, { progress, type: "small" }) }),
-      showSuccess && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: FileUploadItem_module.default.description, children: file.formatFileSize(fileSize) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FileUploadItem_module.default["file-actions"], 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;

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadItem.cjs","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","jsxs","cn","undefined","jsx","Icon","MiddleTruncator","Text","ProgressBar","formatFileSize","IconButton"],"mappings":"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"}
+{"version":3,"file":"FileUploadItem.cjs","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":["cva","styles","jsxs","cn","jsx","Icon","MiddleTruncator","Text","ProgressBar","formatFileSize","IconButton"],"mappings":"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"}

package/dist/cjs/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;
 }
+}