@clickhouse/click-ui 0.8.0 → 1.0.0-rc2

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

@@ -1,23 +1,46 @@
 import "./EllipsisContent.css";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
 import { mergeRefs } from '../../utils/mergeRefs.js';
 import { cn } from '../../lib/cva.js';
+import { Tooltip } from '../Tooltip/index.js';
 import styles from './EllipsisContent.module.css.js';
 
-const _EllipsisContent = ({
+const EllipsisContentComponent = ({
   component,
   className,
   ...props
 }, ref) => {
   const Component = component ?? "div";
-  return /* @__PURE__ */ jsx(Component, { ref: mergeRefs([ref, (node) => {
-    if (node && node.scrollWidth > node.clientWidth) {
-      node.title = node.innerText;
+  const [tooltipContent, setTooltipContent] = useState(null);
+  const content = /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: mergeRefs([
+        ref,
+        (node) => {
+          if (node) {
+            setTooltipContent(
+              node.scrollWidth > node.clientWidth ? node.innerText : null
+            );
+          }
+        }
+      ]),
+      ...props,
+      className: cn(styles["ellipsis-content"], className)
     }
-  }]), ...props, className: cn(styles["ellipsis-content"], className) });
+  );
+  if (!tooltipContent) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: content }),
+    /* @__PURE__ */ jsx(Tooltip.Content, { children: tooltipContent })
+  ] });
 };
-const EllipsisContent = forwardRef(_EllipsisContent);
+const EllipsisContent = forwardRef(
+  EllipsisContentComponent
+);
 
 export { EllipsisContent };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/EllipsisContent/EllipsisContent.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { cn } from '@/lib/cva';\nimport styles from './EllipsisContent.module.css';\n\nexport interface EllipsisContentProps<T extends ElementType = 'div'> {\n  component?: T;\n}\n\ntype EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>\n) => ReactNode;\n\nconst _EllipsisContent = <T extends ElementType = 'div'>(\n  {\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> &\n    EllipsisContentProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n  return (\n    <Component\n      ref={mergeRefs([\n        ref,\n        node => {\n          if (node && node.scrollWidth > node.clientWidth) {\n            node.title = node.innerText;\n          }\n        },\n      ])}\n      {...props}\n      className={cn(styles['ellipsis-content'], className)}\n    />\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(_EllipsisContent);\n"],"names":["_EllipsisContent","component","className","props","ref","Component","mergeRefs","node","scrollWidth","clientWidth","title","innerText","cn","styles","EllipsisContent","forwardRef"],"mappings":";;;;;;AAmBA,MAAMA,mBAAmB,CACvB;AAAA,EACEC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AAE4C,CAAA,EACjDC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,KAAA;AAC/B,EAAA,2BACG,SAAA,EAAA,EACC,GAAA,EAAKK,SAAAA,CAAU,CACbF,KACAG,CAAAA,IAAAA,KAAQ;AACN,IAAA,IAAIA,IAAAA,IAAQA,IAAAA,CAAKC,WAAAA,GAAcD,IAAAA,CAAKE,WAAAA,EAAa;AAC/CF,MAAAA,IAAAA,CAAKG,QAAQH,IAAAA,CAAKI,SAAAA;AAAAA,IACpB;AAAA,EACF,CAAC,CACF,CAAA,KACGR,KAAAA,EACJ,SAAA,EAAWS,EAAAA,CAAGC,MAAAA,CAAO,kBAAkB,CAAA,EAAGX,SAAS,CAAA,EAAE,CAAA;AAG3D,CAAA;AAEO,MAAMY,eAAAA,GAAgDC,WAAWf,gBAAgB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/EllipsisContent/EllipsisContent.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n  useState,\n} from 'react';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { cn } from '@/lib/cva';\nimport { Tooltip } from '@/components/Tooltip';\nimport styles from './EllipsisContent.module.css';\n\nexport interface EllipsisContentProps<T extends ElementType = 'div'> {\n  component?: T;\n}\n\ntype EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>\n) => ReactNode;\n\nconst EllipsisContentComponent = <T extends ElementType = 'div'>(\n  {\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> &\n    EllipsisContentProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n  const [tooltipContent, setTooltipContent] = useState<string | null>(null);\n\n  const content = (\n    <Component\n      ref={mergeRefs([\n        ref,\n        node => {\n          if (node) {\n            setTooltipContent(\n              node.scrollWidth > node.clientWidth ? node.innerText : null\n            );\n          }\n        },\n      ])}\n      {...props}\n      className={cn(styles['ellipsis-content'], className)}\n    />\n  );\n\n  if (!tooltipContent) {\n    return content;\n  }\n\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>{content}</Tooltip.Trigger>\n      <Tooltip.Content>{tooltipContent}</Tooltip.Content>\n    </Tooltip>\n  );\n};\n\nexport const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(\n  EllipsisContentComponent\n);\n"],"names":[],"mappings":";;;;;;;AAqBA,MAAM,2BAA2B,CAC/B;AAAA,EACE,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,SAAA,IAAa,KAAA;AAC/B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAwB,IAAI,CAAA;AAExE,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAK,SAAA,CAAU;AAAA,QACb,GAAA;AAAA,QACA,CAAA,IAAA,KAAQ;AACN,UAAA,IAAI,IAAA,EAAM;AACR,YAAA,iBAAA;AAAA,cACE,IAAA,CAAK,WAAA,GAAc,IAAA,CAAK,WAAA,GAAc,KAAK,SAAA,GAAY;AAAA,aACzD;AAAA,UACF;AAAA,QACF;AAAA,OACD,CAAA;AAAA,MACA,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,kBAAkB,GAAG,SAAS;AAAA;AAAA,GACrD;AAGF,EAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,IAAA,OAAO,OAAA;AAAA,EACT;AAEA,EAAA,4BACG,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,CAAQ,OAAA,EAAR,EAAgB,OAAA,EAAO,MAAE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAClC,GAAA,CAAC,OAAA,CAAQ,OAAA,EAAR,EAAiB,QAAA,EAAA,cAAA,EAAe;AAAA,GAAA,EACnC,CAAA;AAEJ,CAAA;AAEO,MAAM,eAAA,GAAgD,UAAA;AAAA,EAC3D;AACF;;;;"}

package/dist/esm/components/EmptyButton/EmptyButton.css

@@ -1,4 +1,4 @@
-/* Kept at zero specificity via :where() so that downstream styled-components
+@layer clickui {/* Kept at zero specificity via :where() so that downstream styled-components
    overrides on a styled(EmptyButton) (e.g. CrossButton overriding background and
    padding, the Popover/CodeBlock close/copy buttons overriding color and padding)
    win without needing a specificity hack — EmptyButton is a CSS Module, whose
@@ -19,3 +19,4 @@
 :where(.empty-button__1ynA8):disabled {
   cursor: not-allowed;
 }
+}

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

@@ -4,10 +4,14 @@ import { forwardRef } from 'react';
 import { cn } from '../../lib/cva.js';
 import styles from './EmptyButton.module.css.js';
 
-const EmptyButton = forwardRef(({
-  className,
-  ...props
-}, ref) => /* @__PURE__ */ jsx("button", { ref, ...props, className: cn(styles["empty-button"], className) }));
+const EmptyButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ref,
+    ...props,
+    className: cn(styles["empty-button"], className)
+  }
+));
 EmptyButton.displayName = "EmptyButton";
 
 export { EmptyButton };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/EmptyButton/EmptyButton.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './EmptyButton.module.css';\n\nexport const EmptyButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    {...props}\n    className={cn(styles['empty-button'], className)}\n  />\n));\n\nEmptyButton.displayName = 'EmptyButton';\n"],"names":["EmptyButton","forwardRef","className","props","ref","cn","styles","displayName"],"mappings":";;;;;AAIO,MAAMA,WAAAA,GAAcC,WAGzB,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,qBAC1B,GAAA,CAAC,QAAA,EAAA,EACC,GAAA,KACID,KAAAA,EACJ,SAAA,EAAWE,EAAAA,CAAGC,MAAAA,CAAO,cAAc,CAAA,EAAGJ,SAAS,IAElD;AAEDF,WAAAA,CAAYO,WAAAA,GAAc,aAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/EmptyButton/EmptyButton.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './EmptyButton.module.css';\n\nexport const EmptyButton = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    {...props}\n    className={cn(styles['empty-button'], className)}\n  />\n));\n\nEmptyButton.displayName = 'EmptyButton';\n"],"names":[],"mappings":";;;;;AAIO,MAAM,WAAA,GAAc,WAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1B,GAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,cAAc,GAAG,SAAS;AAAA;AACjD,CACD;AAED,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}

package/dist/esm/components/FileTabs/FileTabs.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileTabs) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileTabs) */
 .tabs__jY99b {
   display: flex;
   position: relative;
@@ -165,3 +165,4 @@
 .empty-button__czm-t:hover {
   background: var(--click-tabs-fileTabs-color-closeButton-background-hover);
 }
+}

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

@@ -8,9 +8,7 @@ import { Icon as SvgImage } from '../Icon/index.js';
 import { IconButton } from '../IconButton/index.js';
 import { cva } from 'class-variance-authority';
 
-const {
-  ReactSortable
-} = ReactSortableModule;
+const { ReactSortable } = ReactSortableModule;
 const TabContext = createContext({
   selectedIndex: void 0,
   onClose: () => null
@@ -37,13 +35,17 @@ const FileTabs = ({
   ...props
 }) => {
   const ref = useRef(null);
-  const [list, setList] = useState(Children.map(children, (_, index) => ({
-    id: `tab-element-${index}`
-  })));
-  useEffect(() => {
-    setList(Children.map(children, (_, index) => ({
+  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);
@@ -64,23 +66,53 @@ const FileTabs = ({
       ref.current.scrollLeft += evt.deltaY;
     }
   };
-  return /* @__PURE__ */ jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, onWheel, role: "tablist", onScroll: (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, className: styles.tabs, style: {
-    "--file-tabs-count-width": `${(listProp ?? list).length * 200}px`
-  }, children: /* @__PURE__ */ jsx(ReactSortable, { 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);
+  return /* @__PURE__ */ jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      onWheel,
+      role: "tablist",
+      onScroll: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      className: styles.tabs,
+      style: {
+        "--file-tabs-count-width": `${(listProp ?? list).length * 200}px`
+      },
+      children: /* @__PURE__ */ jsx(
+        ReactSortable,
+        {
+          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,
+          className: cn(styles["tabs-sortable"], className),
+          children: Children.map(children, (child, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              tabIndex: index + 1,
+              role: "tab",
+              onClick: onSelect(index),
+              children: child
+            },
+            `tab-element-${index}`
+          ))
+        }
+      )
     }
-    if (typeof onEnd === "function") {
-      onEnd(evt, sortable, store);
-    }
-  }, revertOnSpill: true, ...props, className: cn(styles["tabs-sortable"], className), children: Children.map(children, (child, index) => /* @__PURE__ */ jsx("div", { tabIndex: index + 1, role: "tab", onClick: onSelect(index), children: child }, `tab-element-${index}`)) }) }) });
+  ) });
 };
 const tabVariants = cva(styles.tab, {
   variants: {
@@ -118,10 +150,7 @@ const Tab = ({
   className,
   ...props
 }) => {
-  const {
-    selectedIndex,
-    onClose: onCloseProp
-  } = useSelect();
+  const { selectedIndex, onClose: onCloseProp } = useSelect();
   const onMouseDown = (e) => {
     e.currentTarget.scrollIntoView({
       behavior: "smooth",
@@ -137,18 +166,47 @@ const Tab = ({
     e.stopPropagation();
     onCloseProp(index);
   };
-  return /* @__PURE__ */ jsxs("div", { onMouseDown, "data-testid": testId ? `${testId}-${index}` : void 0, ...props, className: cn(tabVariants({
-    active: selectedIndex === index,
-    preview,
-    dismissable: true
-  }), className), children: [
-    /* @__PURE__ */ jsxs("div", { className: styles["tab-content"], children: [
-      typeof icon === "string" ? /* @__PURE__ */ jsx(SvgImage, { name: icon }) : icon,
-      /* @__PURE__ */ jsx("span", { className: styles["tab-content-text"], children: text })
-    ] }),
-    /* @__PURE__ */ jsx(IconButton, { className: styles["empty-button"], htmlType: "button", icon: "cross", onClick: onClose, "data-type": "close", "data-testid": testId ? `${testId}-${index}-close` : void 0 }),
-    /* @__PURE__ */ jsx("div", { className: styles.indicator, "data-indicator": status, "data-testid": testId ? `${testId}-${index}-status` : void 0 })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseDown,
+      "data-testid": testId ? `${testId}-${index}` : void 0,
+      ...props,
+      className: cn(
+        tabVariants({
+          active: selectedIndex === index,
+          preview,
+          dismissable: true
+        }),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles["tab-content"], children: [
+          typeof icon === "string" ? /* @__PURE__ */ jsx(SvgImage, { name: icon }) : icon,
+          /* @__PURE__ */ jsx("span", { className: styles["tab-content-text"], children: text })
+        ] }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: styles["empty-button"],
+            htmlType: "button",
+            icon: "cross",
+            onClick: onClose,
+            "data-type": "close",
+            "data-testid": testId ? `${testId}-${index}-close` : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.indicator,
+            "data-indicator": status,
+            "data-testid": testId ? `${testId}-${index}-status` : void 0
+          }
+        )
+      ]
+    }
+  );
 };
 Tab.displayName = "FileTab";
 FileTabs.Tab = Tab;
@@ -160,14 +218,17 @@ const FileTabElement = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs("div", { ...props, className: cn(tabVariants({
-    active,
-    preview,
-    fixed: true
-  }), className), children: [
-    typeof icon === "string" ? /* @__PURE__ */ jsx(SvgImage, { name: icon }) : icon,
-    children && /* @__PURE__ */ jsx("span", { className: styles["tab-content-text"], children })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: cn(tabVariants({ active, preview, fixed: true }), className),
+      children: [
+        typeof icon === "string" ? /* @__PURE__ */ jsx(SvgImage, { name: icon }) : icon,
+        children && /* @__PURE__ */ jsx("span", { className: styles["tab-content-text"], children })
+      ]
+    }
+  );
 };
 
 export { FileTabElement, FileTabs, TabContext };

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

@@ -1 +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  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","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","Icon","indicator","displayName","FileTabElement"],"mappings":"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"}
+{"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  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":["list","Icon"],"mappings":"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"}

package/dist/esm/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/esm/components/FileUpload/FileMultiUpload.js

@@ -15,13 +15,16 @@ const FileMultiUpload = ({
   onFileRemove,
   onFileFailure
 }) => {
-  const handleFilesProcessed = useCallback((processedFiles) => {
-    processedFiles.forEach((file) => {
-      if (onFileSelect) {
-        onFileSelect(file);
-      }
-    });
-  }, [onFileSelect]);
+  const handleFilesProcessed = useCallback(
+    (processedFiles) => {
+      processedFiles.forEach((file) => {
+        if (onFileSelect) {
+          onFileSelect(file);
+        }
+      });
+    },
+    [onFileSelect]
+  );
   const {
     isDragging,
     isNotSupported,
@@ -38,23 +41,68 @@ const FileMultiUpload = ({
     onFileFailure,
     multiple: true
   });
-  const handleRemoveFile = useCallback((fileId) => {
-    if (onFileRemove) {
-      onFileRemove(fileId);
-    }
-  }, [onFileRemove]);
-  const handleRetryUpload = useCallback((fileId) => {
-    if (onFileRetry) {
-      onFileRetry(fileId);
-    }
-  }, [onFileRetry]);
+  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("div", { className: styles["files-list"], children: files.map((file) => /* @__PURE__ */ jsx(FileUploadItem, { fileName: file.name, fileSize: file.size, progress: file.progress, showSuccess: file.status === "success", showProgress: file.status === "uploading", failureMessage: file.errorMessage || "Upload failed", onRetry: () => handleRetryUpload(file.id), onRemove: () => handleRemoveFile(file.id), size: "sm", inline: false }, file.id)) }),
-    /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, multiple: true, style: {
-      display: "none"
-    } })
+    /* @__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("div", { className: styles["files-list"], children: files.map((file) => /* @__PURE__ */ jsx(
+      FileUploadItem,
+      {
+        fileName: file.name,
+        fileSize: file.size,
+        progress: file.progress,
+        showSuccess: file.status === "success",
+        showProgress: file.status === "uploading",
+        failureMessage: file.errorMessage || "Upload failed",
+        onRetry: () => handleRetryUpload(file.id),
+        onRemove: () => handleRemoveFile(file.id),
+        size: "sm",
+        inline: false
+      },
+      file.id
+    )) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        accept: acceptedFileTypes,
+        onChange: handleFileSelect,
+        multiple: true,
+        style: { display: "none" }
+      }
+    )
   ] });
 };
 

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

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

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