@punkbit/cui 0.0.251-rc.16 → 0.2.0

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

@@ -0,0 +1,203 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, Children, useEffect, createContext, useContext } from 'react';
+import { styled } from 'styled-components';
+import ReactSortableModule from 'react-sortablejs/dist/index.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+import { IconButton } from '../IconButton/index.js';
+
+const {
+  ReactSortable
+} = ReactSortableModule;
+const TabsContainer = styled.div.withConfig({
+  componentId: "sc-wbxbxb-0"
+})(["display:flex;position:relative;overflow:auto;overscroll-behavior:none;scrollbar-width:0;max-width:", ";&::-webkit-scrollbar{height:0;}"], ({
+  $count
+}) => `${$count * 200}px`);
+const TabsSortableContainer = styled(ReactSortable).withConfig({
+  componentId: "sc-wbxbxb-1"
+})(["display:flex;& > div{height:100%;outline:none;min-width:100px;width:clamp(100px,100%,200px);&.sortable-ghost{opacity:0;}}"]);
+const TabContext = createContext({
+  selectedIndex: void 0,
+  onClose: () => null
+});
+const useSelect = () => {
+  const result = useContext(TabContext);
+  if (!result) {
+    throw new Error("Context used outside of its Provider!");
+  }
+  return result;
+};
+const FileTabs = ({
+  selectedIndex,
+  children,
+  onReorderTab,
+  onClose: onCloseProp,
+  onSelect: onSelectProp,
+  list: listProp,
+  setList: setListProp,
+  onEnd,
+  direction,
+  group,
+  ...props
+}) => {
+  const ref = useRef(null);
+  const [list, setList] = useState(Children.map(children, (_, index) => ({
+    id: `tab-element-${index}`
+  })));
+  useEffect(() => {
+    setList(Children.map(children, (_, index) => ({
+      id: `tab-element-${index}`
+    })));
+  }, [children]);
+  const onClose = (index) => {
+    onCloseProp(index);
+    setList((list2) => {
+      list2.splice(index, 1);
+      return [...list2];
+    });
+  };
+  const onSelect = (index) => () => {
+    onSelectProp(index);
+  };
+  const value = {
+    selectedIndex,
+    onClose
+  };
+  const onWheel = (evt) => {
+    if (ref.current) {
+      ref.current.scrollLeft += evt.deltaY;
+    }
+  };
+  return /* @__PURE__ */ jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsx(TabsContainer, { ref, onWheel, role: "tablist", onScroll: (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, $count: (listProp ?? list).length, children: /* @__PURE__ */ jsx(TabsSortableContainer, { direction: direction ?? "horizontal", group: group ?? "tabbar", list: listProp ?? list, setList: setListProp ?? setList, onEnd: (evt, sortable, store) => {
+    const {
+      newDraggableIndex,
+      oldDraggableIndex
+    } = evt;
+    if (typeof newDraggableIndex === "number" && typeof oldDraggableIndex === "number" && oldDraggableIndex !== newDraggableIndex) {
+      onReorderTab(oldDraggableIndex, newDraggableIndex);
+    }
+    if (typeof onEnd === "function") {
+      onEnd(evt, sortable, store);
+    }
+  }, revertOnSpill: true, ...props, children: Children.map(children, (child, index) => /* @__PURE__ */ jsx("div", { tabIndex: index + 1, role: "tab", onClick: onSelect(index), children: child }, `tab-element-${index}`)) }) }) });
+};
+const TabElement = styled.div.withConfig({
+  componentId: "sc-wbxbxb-2"
+})(["display:grid;justify-content:flex-start;align-items:center;outline:none;max-width:100%;max-width:-webkit-fill-available;max-width:fill-available;max-width:stretch;border:none;cursor:pointer;height:100%;max-height:100%;box-sizing:border-box;", ` [data-type="close"]{display:none;}[data-indicator]{display:block;}&:hover{[data-type='close']{display:block;}[data-indicator]{display:none;}}`], ({
+  theme,
+  $active,
+  $preview,
+  $dismissable,
+  $fixedTabElement
+}) => `
+    width:${$fixedTabElement ? "auto" : "100%"};
+    grid-template-columns: 1fr ${$dismissable ? theme.click.tabs.fileTabs.icon.size.width : ""};
+    padding: ${theme.click.tabs.fileTabs.space.y} ${theme.click.tabs.fileTabs.space.x};
+    gap: ${theme.click.tabs.fileTabs.space.gap};
+    border-radius: ${theme.click.tabs.fileTabs.radii.all};
+    border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.default};
+    background: ${theme.click.tabs.fileTabs.color.background.default};
+    color: ${theme.click.tabs.fileTabs.color.text.default};
+    font: ${theme.click.tabs.fileTabs.typography.label.default};
+    svg,
+    [data-indicator] {
+      height: ${theme.click.tabs.fileTabs.icon.size.height};
+      width: ${theme.click.tabs.fileTabs.icon.size.width};
+    }
+    ${$active ? `
+          background: ${theme.click.tabs.fileTabs.color.background.active};
+          color: ${theme.click.tabs.fileTabs.color.text.active};
+          font: ${theme.click.tabs.fileTabs.typography.label.active};
+          border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.active};
+        ` : `
+          &:hover {
+            background: ${theme.click.tabs.fileTabs.color.background.hover};
+            color: ${theme.click.tabs.fileTabs.color.text.hover};
+            font: ${theme.click.tabs.fileTabs.typography.label.hover};
+            border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.hover};
+          }
+        `}
+    ${$preview === true ? "font-style: italic;" : ""}
+  `);
+const Indicator = styled.div.withConfig({
+  componentId: "sc-wbxbxb-3"
+})(["position:relative;&::after{position:absolute;left:0.25rem;top:0.25rem;content:'';width:0.5rem;height:0.5rem;", "}"], ({
+  theme,
+  $status
+}) => `
+      background: ${$status === "default" ? "transparent" : theme.click.alert.color.text[$status]};
+      border-radius: 50%;
+  `);
+const TabContent = styled.div.withConfig({
+  componentId: "sc-wbxbxb-4"
+})(["display:flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap;overflow:hidden;gap:", ";"], ({
+  theme
+}) => theme.click.tabs.fileTabs.space.gap);
+const TabContentText = styled.span.withConfig({
+  componentId: "sc-wbxbxb-5"
+})(["display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
+const EmptyButton = styled.button.withConfig({
+  componentId: "sc-wbxbxb-6"
+})(["padding:0;", ";&:hover{background:", ";}"], ({
+  theme
+}) => theme.click.tabs.fileTabs.color.closeButton.background.default, ({
+  theme
+}) => theme.click.tabs.fileTabs.color.closeButton.background.hover);
+const Tab = ({
+  text,
+  index,
+  icon,
+  onMouseDown: onMouseDownProp,
+  status = "default",
+  testId,
+  preview,
+  ...props
+}) => {
+  const {
+    selectedIndex,
+    onClose: onCloseProp
+  } = useSelect();
+  const onMouseDown = (e) => {
+    e.currentTarget.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center"
+    });
+    if (typeof onMouseDownProp === "function") {
+      onMouseDownProp(e);
+    }
+  };
+  const onClose = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onCloseProp(index);
+  };
+  return /* @__PURE__ */ jsxs(TabElement, { $active: selectedIndex === index, onMouseDown, "data-testid": testId ? `${testId}-${index}` : void 0, $preview: preview, $dismissable: true, ...props, children: [
+    /* @__PURE__ */ jsxs(TabContent, { children: [
+      typeof icon === "string" ? /* @__PURE__ */ jsx(SvgImage, { name: icon }) : icon,
+      /* @__PURE__ */ jsx(TabContentText, { children: text })
+    ] }),
+    /* @__PURE__ */ jsx(EmptyButton, { as: IconButton, icon: "cross", onClick: onClose, "data-type": "close", "data-testid": testId ? `${testId}-${index}-close` : void 0 }),
+    /* @__PURE__ */ jsx(Indicator, { $status: status, "data-indicator": status, "data-testid": testId ? `${testId}-${index}-status` : void 0 })
+  ] });
+};
+Tab.displayName = "FileTab";
+FileTabs.Tab = Tab;
+const FileTabElement = ({
+  icon,
+  children,
+  active = false,
+  preview,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(TabElement, { $active: active, $preview: preview, $dismissable: false, $fixedTabElement: true, ...props, children: [
+    typeof icon === "string" ? /* @__PURE__ */ jsx(SvgImage, { name: icon }) : icon,
+    children && /* @__PURE__ */ jsx(TabContentText, { children })
+  ] });
+};
+
+export { FileTabElement, FileTabs, TabContext };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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} from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport type { IconName } from '@/components/Icon/Icon.types';\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\nconst TabsContainer = styled.div<{ $count: number }>`\n  display: flex;\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: none;\n  scrollbar-width: 0;\n  max-width: ${({ $count }) => `${$count * 200}px`};\n  &::-webkit-scrollbar {\n    height: 0;\n  }\n`;\n\nconst TabsSortableContainer = styled(ReactSortable)`\n  display: flex;\n  & > div {\n    height: 100%;\n    outline: none;\n    min-width: 100px;\n    width: clamp(100px, 100%, 200px);\n    &.sortable-ghost {\n      opacity: 0;\n    }\n  }\n`;\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  ...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      <TabsContainer\n        ref={ref}\n        onWheel={onWheel}\n        role=\"tablist\"\n        onScroll={e => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        $count={(listProp ?? list).length}\n      >\n        <TabsSortableContainer\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        >\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        </TabsSortableContainer>\n      </TabsContainer>\n    </TabContext.Provider>\n  );\n};\n\nconst TabElement = styled.div<{\n  $active: boolean;\n  $preview?: boolean;\n  $dismissable: boolean;\n  $fixedTabElement?: boolean;\n}>`\n  display: grid;\n  justify-content: flex-start;\n  align-items: center;\n  outline: none;\n  max-width: 100%;\n  max-width: -webkit-fill-available;\n  max-width: fill-available;\n  max-width: stretch;\n  border: none;\n  cursor: pointer;\n  height: 100%;\n  max-height: 100%;\n  box-sizing: border-box;\n  ${({ theme, $active, $preview, $dismissable, $fixedTabElement }) => `\n    width:${$fixedTabElement ? 'auto' : '100%'};\n    grid-template-columns: 1fr ${\n      $dismissable ? theme.click.tabs.fileTabs.icon.size.width : ''\n    };\n    padding: ${theme.click.tabs.fileTabs.space.y} ${theme.click.tabs.fileTabs.space.x};\n    gap: ${theme.click.tabs.fileTabs.space.gap};\n    border-radius: ${theme.click.tabs.fileTabs.radii.all};\n    border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.default};\n    background: ${theme.click.tabs.fileTabs.color.background.default};\n    color: ${theme.click.tabs.fileTabs.color.text.default};\n    font: ${theme.click.tabs.fileTabs.typography.label.default};\n    svg,\n    [data-indicator] {\n      height: ${theme.click.tabs.fileTabs.icon.size.height};\n      width: ${theme.click.tabs.fileTabs.icon.size.width};\n    }\n    ${\n      $active\n        ? `\n          background: ${theme.click.tabs.fileTabs.color.background.active};\n          color: ${theme.click.tabs.fileTabs.color.text.active};\n          font: ${theme.click.tabs.fileTabs.typography.label.active};\n          border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.active};\n        `\n        : `\n          &:hover {\n            background: ${theme.click.tabs.fileTabs.color.background.hover};\n            color: ${theme.click.tabs.fileTabs.color.text.hover};\n            font: ${theme.click.tabs.fileTabs.typography.label.hover};\n            border-right: 1px solid ${theme.click.tabs.fileTabs.color.stroke.hover};\n          }\n        `\n    }\n    ${$preview === true ? 'font-style: italic;' : ''}\n  `}\n  [data-type=\"close\"] {\n    display: none;\n  }\n  [data-indicator] {\n    display: block;\n  }\n  &:hover {\n    [data-type='close'] {\n      display: block;\n    }\n    [data-indicator] {\n      display: none;\n    }\n  }\n`;\n\nconst Indicator = styled.div<{ $status: FileTabStatusType }>`\n  position: relative;\n  &::after {\n    position: absolute;\n    left: 0.25rem;\n    top: 0.25rem;\n    content: '';\n    width: 0.5rem;\n    height: 0.5rem;\n    ${({ theme, $status }) => `\n      background: ${\n        $status === 'default' ? 'transparent' : theme.click.alert.color.text[$status]\n      };\n      border-radius: 50%;\n  `}\n  }\n`;\n\nconst TabContent = styled.div`\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-wrap: nowrap;\n  overflow: hidden;\n  gap: ${({ theme }) => theme.click.tabs.fileTabs.space.gap};\n`;\n\nconst TabContentText = styled.span`\n  display: inline-block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n`;\n\nconst EmptyButton = styled.button`\n  padding: 0;\n  ${({ theme }) => theme.click.tabs.fileTabs.color.closeButton.background.default};\n  &:hover {\n    background: ${({ theme }) =>\n      theme.click.tabs.fileTabs.color.closeButton.background.hover};\n  }\n`;\n\nconst Tab = ({\n  text,\n  index,\n  icon,\n  onMouseDown: onMouseDownProp,\n  status = 'default',\n  testId,\n  preview,\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    <TabElement\n      $active={selectedIndex === index}\n      onMouseDown={onMouseDown}\n      data-testid={testId ? `${testId}-${index}` : undefined}\n      $preview={preview}\n      $dismissable\n      {...props}\n    >\n      <TabContent>\n        {typeof icon === 'string' ? <Icon name={icon as IconName} /> : icon}\n        <TabContentText>{text}</TabContentText>\n      </TabContent>\n      <EmptyButton\n        as={IconButton}\n        icon=\"cross\"\n        onClick={onClose}\n        data-type=\"close\"\n        data-testid={testId ? `${testId}-${index}-close` : undefined}\n      />\n      <Indicator\n        $status={status}\n        data-indicator={status}\n        data-testid={testId ? `${testId}-${index}-status` : undefined}\n      />\n    </TabElement>\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  ...props\n}: FileTabElementProps) => {\n  return (\n    <TabElement\n      $active={active}\n      $preview={preview}\n      $dismissable={false}\n      $fixedTabElement\n      {...props}\n    >\n      {typeof icon === 'string' ? <Icon name={icon as IconName} /> : icon}\n      {children && <TabContentText>{children}</TabContentText>}\n    </TabElement>\n  );\n};\n"],"names":["ReactSortable","ReactSortableModule","TabsContainer","styled","div","withConfig","componentId","$count","TabsSortableContainer","TabContext","createContext","selectedIndex","undefined","onClose","useSelect","result","useContext","Error","FileTabs","children","onReorderTab","onCloseProp","onSelect","onSelectProp","list","listProp","setList","setListProp","onEnd","direction","group","props","ref","useRef","useState","Children","map","_","index","id","useEffect","splice","value","onWheel","evt","current","scrollLeft","deltaY","e","preventDefault","stopPropagation","length","sortable","store","newDraggableIndex","oldDraggableIndex","child","TabElement","theme","$active","$preview","$dismissable","$fixedTabElement","click","tabs","fileTabs","icon","size","width","space","y","x","gap","radii","all","color","stroke","default","background","text","typography","label","height","active","hover","Indicator","$status","alert","TabContent","TabContentText","span","EmptyButton","button","closeButton","Tab","onMouseDown","onMouseDownProp","status","testId","preview","currentTarget","scrollIntoView","behavior","block","inline","Icon","IconButton","displayName","FileTabElement"],"mappings":"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"}

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

@@ -0,0 +1,68 @@
+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';
+
+const FilesList = styled.div.withConfig({
+  componentId: "sc-154dmlm-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"],
+  files,
+  onFileSelect,
+  onFileRetry,
+  onFileRemove,
+  onFileFailure
+}) => {
+  const handleFilesProcessed = useCallback((processedFiles) => {
+    processedFiles.forEach((file) => {
+      if (onFileSelect) {
+        onFileSelect(file);
+      }
+    });
+  }, [onFileSelect]);
+  const {
+    isDragging,
+    isNotSupported,
+    fileInputRef,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    handleFileSelect,
+    handleBrowseClick
+  } = useDragAndDrop({
+    onFilesProcessed: handleFilesProcessed,
+    supportedFileTypes,
+    onFileFailure,
+    multiple: true
+  });
+  const handleRemoveFile = useCallback((fileId) => {
+    if (onFileRemove) {
+      onFileRemove(fileId);
+    }
+  }, [onFileRemove]);
+  const handleRetryUpload = useCallback((fileId) => {
+    if (onFileRetry) {
+      onFileRetry(fileId);
+    }
+  }, [onFileRetry]);
+  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)) }),
+    /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, multiple: true, style: {
+      display: "none"
+    } })
+  ] });
+};
+
+export { FileMultiUpload };
+//# sourceMappingURL=FileMultiUpload.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,98 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { styled, css } from 'styled-components';
+import { Button } from '../Button/index.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+import { Title } from '../Title/index.js';
+import { Text } from '../Text/index.js';
+
+const UploadArea = styled.div.withConfig({
+  componentId: "sc-13vvh3p-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-13vvh3p-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-13vvh3p-2"
+})(["font:", ";color:", ";"], ({
+  theme
+}) => theme.click.fileUpload.typography.description.default, ({
+  theme
+}) => theme.click.fileUpload.color.description.default);
+const UploadIcon = styled(SvgImage).withConfig({
+  componentId: "sc-13vvh3p-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-13vvh3p-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 FileUploadArea = ({
+  title,
+  supportedFileTypes,
+  size = "sm",
+  isDragging,
+  isNotSupported,
+  hasFile = false,
+  isError = false,
+  multiple = false,
+  onDragEnter,
+  onDragLeave,
+  onDragOver,
+  onDrop,
+  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: [
+        "Files supported: ",
+        supportedFileTypes.join(", ")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { type: "secondary", onClick: (e) => {
+      e.stopPropagation();
+      onClick?.();
+    }, children: multiple ? "Browse files" : "Browse file" })
+  ] }) : children });
+};
+
+export { FileUploadArea };
+//# sourceMappingURL=FileUploadArea.js.map

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

@@ -0,0 +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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"}

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

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

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

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