sellmate-design-system-react 0.1.8 → 0.1.10

package/dist/components/SFilePicker/SFilePicker.js

@@ -1,9 +1,10 @@
 "use client";
 import { forwardRef, createContext, useState, useRef, useImperativeHandle, useEffect, useContext, useId } from 'react';
+import * as Ariakit from '@ariakit/react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import * as RPopover from '@radix-ui/react-popover';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as RPopover2 from '@radix-ui/react-popover';
 
 var twMerge = extendTailwindMerge({
   extend: {
@@ -2875,11 +2876,200 @@ PortalContainerContext.Provider;
 function usePortalContainer() {
   return useContext(PortalContainerContext) ?? void 0;
 }
+
+// src/components/STag/tag.config.ts
+var TAG_SIZE_CONFIG = {
+  xs: {
+    height: 20,
+    paddingX: 8,
+    gap: 4,
+    radius: 6,
+    iconSize: 12,
+    fontSize: 11,
+    fontWeight: 500,
+    lineHeight: 18
+  },
+  sm: {
+    height: 24,
+    paddingX: 8,
+    gap: 4,
+    radius: 6,
+    iconSize: 16,
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 20
+  },
+  md: {
+    height: 28,
+    paddingX: 12,
+    gap: 6,
+    radius: 8,
+    iconSize: 16,
+    fontSize: 14,
+    fontWeight: 700,
+    lineHeight: 24
+  }
+};
+var STag = forwardRef(function STag2({
+  shape = "square",
+  size = "sm",
+  color = "grey",
+  label = "",
+  icon,
+  iconLeft = true,
+  width,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const s = TAG_SIZE_CONFIG[size];
+  const contentColor = `var(--cmp-tag-${color}-content)`;
+  const iconNode = icon ? /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
+  const resolvedWidth = typeof width === "number" ? `${width}px` : width;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "aria-label": label || "tag",
+      className: cn(
+        "box-border inline-flex w-fit select-none items-center justify-center whitespace-nowrap",
+        className
+      ),
+      style: {
+        minHeight: s.height,
+        padding: `0 ${s.paddingX}px`,
+        gap: s.gap,
+        borderRadius: shape === "pill" ? 999 : s.radius,
+        fontSize: s.fontSize,
+        fontWeight: s.fontWeight,
+        lineHeight: `${s.lineHeight}px`,
+        background: `var(--cmp-tag-${color}-bg)`,
+        color: contentColor,
+        ...resolvedWidth != null ? { width: resolvedWidth } : {},
+        ...style
+      },
+      ...rest,
+      children: [
+        icon && iconLeft && iconNode,
+        label && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-0 items-center justify-center", children: label }),
+        icon && !iconLeft && iconNode
+      ]
+    }
+  );
+});
+var SIZE = {
+  xxs: { icon: 12, radius: "sm" },
+  xs: { icon: 16, radius: "sm" },
+  sm: { icon: 20, radius: "sm" },
+  md: { icon: 24, radius: "md" },
+  lg: { icon: 32, radius: "md" }
+};
+var TOOLTIP_HIDE_DELAY_MS = 100;
+function SGhostButton({
+  icon,
+  size = "sm",
+  intent = "default",
+  ariaLabel = "",
+  tooltipText,
+  disabled = false,
+  onClick,
+  className,
+  style
+}) {
+  const portalContainer = usePortalContainer();
+  const [open, setOpen] = useState(false);
+  const hideTimer = useRef(void 0);
+  const cancelHide = () => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
+  };
+  const openNow = () => {
+    cancelHide();
+    setOpen(true);
+  };
+  const startHide = () => {
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpen(false), TOOLTIP_HIDE_DELAY_MS);
+  };
+  const s = SIZE[size];
+  const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const btn = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      "aria-disabled": disabled ? "true" : void 0,
+      "aria-label": ariaLabel.trim() || void 0,
+      tabIndex: disabled ? -1 : void 0,
+      onClick: (e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      },
+      className: cn(
+        "group relative box-border inline-flex items-center justify-center border-none bg-transparent p-0 transition-shadow",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--cmp-ghostButton-action-hover-bg)]",
+        className
+      ),
+      style: {
+        width: `var(--cmp-ghostButton-${size}-size)`,
+        height: `var(--cmp-ghostButton-${size}-size)`,
+        borderRadius: `var(--cmp-ghostButton-radius-${s.radius})`,
+        ...style
+      },
+      children: [
+        !disabled && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover:opacity-5",
+            style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
+          }
+        ),
+        /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
+      ]
+    }
+  );
+  const text = (tooltipText ?? "").trim();
+  if (text === "") return btn;
+  return /* @__PURE__ */ jsxs(RPopover2.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover2.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "inline-flex",
+        onMouseEnter: openNow,
+        onMouseLeave: startHide,
+        onFocus: openNow,
+        onBlur: startHide,
+        children: btn
+      }
+    ) }),
+    /* @__PURE__ */ jsx(RPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+      RPopover2.Content,
+      {
+        side: "top",
+        sideOffset: 4,
+        className: cn("z-50", FLOATING_SLIDE_ANIM),
+        "aria-hidden": true,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onMouseEnter: cancelHide,
+        onMouseLeave: startHide,
+        children: /* @__PURE__ */ jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
+      }
+    ) })
+  ] });
+}
 var HIDE_DELAY_MS = 100;
 function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsx("div", { children: line }, i)) });
+  const singleLine = message.length === 1;
+  return /* @__PURE__ */ jsx(Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsx("div", { className: singleLine ? "leading-[24px]" : void 0, children: line }, i)) });
 }
 var STooltip = forwardRef(function STooltip2({
   content,
@@ -2947,10 +3137,10 @@ var STooltip = forwardRef(function STooltip2({
     fontWeight: tooltipType === "default" ? 500 : 700,
     ...style
   };
-  return /* @__PURE__ */ jsxs(RPopover.Root, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs(RPopover2.Root, { open, onOpenChange: setOpen, children: [
     isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsx(RPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(RPopover2.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
         "span",
         {
           className: "inline-flex",
@@ -2961,9 +3151,9 @@ var STooltip = forwardRef(function STooltip2({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsx(RPopover.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsx(RPopover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-      RPopover.Content,
+    ) : /* @__PURE__ */ jsx(RPopover2.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsx(RPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      RPopover2.Content,
       {
         side: placement,
         sideOffset: 8,
@@ -2982,15 +3172,21 @@ var STooltip = forwardRef(function STooltip2({
           /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[12px]", children: [
             /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: body }),
             useClose && /* @__PURE__ */ jsx(
-              RPopover.Close,
+              SGhostButton,
               {
-                "aria-label": "\uB2EB\uAE30",
-                className: "shrink-0 cursor-pointer opacity-70 hover:opacity-100",
-                children: /* @__PURE__ */ jsx(SIcon, { name: "close", size: 16, color: fg })
+                icon: "close",
+                size: "xs",
+                intent: tooltipType === "default" ? "inverse" : "default",
+                ariaLabel: "\uB2EB\uAE30",
+                className: "shrink-0",
+                onClick: () => {
+                  cancelHide();
+                  setOpen(false);
+                }
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(RPopover.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsx(RPopover2.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -3024,8 +3220,8 @@ function useFormField(field) {
   }, [ctx, name]);
 }
 var FIELD_SIZE = {
-  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 12 },
-  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 12 }
+  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 16 },
+  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 16 }
 };
 var ALIGN = {
   start: "flex-start",
@@ -3040,6 +3236,7 @@ var SField = forwardRef(function SField2({
   labelTooltip = "",
   labelTooltipProps,
   labelWidth,
+  labelHeight,
   size = "sm",
   addonLabel = "",
   addonAlign = "start",
@@ -3054,6 +3251,7 @@ var SField = forwardRef(function SField2({
   readOnly = false,
   width,
   multiline = false,
+  borderless = false,
   children,
   className,
   style,
@@ -3087,8 +3285,8 @@ var SField = forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
-  const borderColor = disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
-  const bgColor = disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
+  const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
+  const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
   const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
   return /* @__PURE__ */ jsx(
     "div",
@@ -3105,7 +3303,7 @@ var SField = forwardRef(function SField2({
           {
             className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
             style: {
-              height: s.height,
+              height: cssLen(labelHeight) ?? s.height,
               marginRight: s.fieldGap,
               width: cssLen(labelWidth),
               fontSize: s.fontSize,
@@ -3131,14 +3329,14 @@ var SField = forwardRef(function SField2({
             {
               className: cn(
                 "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
-                interactive && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
+                interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
                 disabled && "cursor-not-allowed"
               ),
               style: {
                 // @ts-expect-error CSS 변수
                 "--field-bc": borderColor,
                 // focused/hovered prop이 명시된 경우 강조를 즉시 반영
-                ...interactive && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
+                ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
                 ...multiline ? { minHeight: s.height } : { height: s.height },
                 "width": cssLen(width),
                 "borderRadius": s.radius,
@@ -3177,200 +3375,12 @@ var SField = forwardRef(function SField2({
     }
   );
 });
-
-// src/components/STag/tag.config.ts
-var TAG_SIZE_CONFIG = {
-  xs: {
-    height: 20,
-    paddingX: 8,
-    gap: 4,
-    radius: 6,
-    iconSize: 12,
-    fontSize: 11,
-    fontWeight: 500,
-    lineHeight: 18
-  },
-  sm: {
-    height: 24,
-    paddingX: 8,
-    gap: 4,
-    radius: 6,
-    iconSize: 16,
-    fontSize: 12,
-    fontWeight: 700,
-    lineHeight: 20
-  },
-  md: {
-    height: 28,
-    paddingX: 12,
-    gap: 6,
-    radius: 8,
-    iconSize: 16,
-    fontSize: 14,
-    fontWeight: 700,
-    lineHeight: 24
-  }
-};
-var STag = forwardRef(function STag2({
-  shape = "square",
-  size = "sm",
-  color = "grey",
-  label = "",
-  icon,
-  iconLeft = true,
-  width,
-  className,
-  style,
-  ...rest
-}, ref) {
-  const s = TAG_SIZE_CONFIG[size];
-  const contentColor = `var(--cmp-tag-${color}-content)`;
-  const iconNode = icon ? /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
-  const resolvedWidth = typeof width === "number" ? `${width}px` : width;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref,
-      "aria-label": label || "tag",
-      className: cn(
-        "box-border inline-flex w-fit select-none items-center justify-center whitespace-nowrap",
-        className
-      ),
-      style: {
-        minHeight: s.height,
-        padding: `0 ${s.paddingX}px`,
-        gap: s.gap,
-        borderRadius: shape === "pill" ? 999 : s.radius,
-        fontSize: s.fontSize,
-        fontWeight: s.fontWeight,
-        lineHeight: `${s.lineHeight}px`,
-        background: `var(--cmp-tag-${color}-bg)`,
-        color: contentColor,
-        ...resolvedWidth != null ? { width: resolvedWidth } : {},
-        ...style
-      },
-      ...rest,
-      children: [
-        icon && iconLeft && iconNode,
-        label && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-0 items-center justify-center", children: label }),
-        icon && !iconLeft && iconNode
-      ]
-    }
-  );
-});
-var SIZE = {
-  xxs: { icon: 12, radius: "sm" },
-  xs: { icon: 16, radius: "sm" },
-  sm: { icon: 20, radius: "sm" },
-  md: { icon: 24, radius: "md" },
-  lg: { icon: 32, radius: "md" }
-};
-var TOOLTIP_HIDE_DELAY_MS = 100;
-function SGhostButton({
-  icon,
-  size = "sm",
-  intent = "default",
-  ariaLabel = "",
-  tooltipText,
-  disabled = false,
-  onClick,
-  className,
-  style
-}) {
-  const portalContainer = usePortalContainer();
-  const [open, setOpen] = useState(false);
-  const hideTimer = useRef(void 0);
-  const cancelHide = () => {
-    if (hideTimer.current) {
-      clearTimeout(hideTimer.current);
-      hideTimer.current = void 0;
-    }
-  };
-  const openNow = () => {
-    cancelHide();
-    setOpen(true);
-  };
-  const startHide = () => {
-    cancelHide();
-    hideTimer.current = setTimeout(() => setOpen(false), TOOLTIP_HIDE_DELAY_MS);
-  };
-  const s = SIZE[size];
-  const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
-  const btn = /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      disabled,
-      "aria-disabled": disabled ? "true" : void 0,
-      "aria-label": ariaLabel.trim() || void 0,
-      tabIndex: disabled ? -1 : void 0,
-      onClick: (e) => {
-        if (disabled) {
-          e.preventDefault();
-          return;
-        }
-        onClick?.(e);
-      },
-      className: cn(
-        "group relative box-border inline-flex items-center justify-center border-none bg-transparent p-0 transition-shadow",
-        disabled ? "cursor-not-allowed" : "cursor-pointer",
-        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--cmp-ghostButton-action-hover-bg)]",
-        className
-      ),
-      style: {
-        width: `var(--cmp-ghostButton-${size}-size)`,
-        height: `var(--cmp-ghostButton-${size}-size)`,
-        borderRadius: `var(--cmp-ghostButton-radius-${s.radius})`,
-        ...style
-      },
-      children: [
-        !disabled && /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover:opacity-5",
-            style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
-          }
-        ),
-        /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
-      ]
-    }
-  );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return btn;
-  return /* @__PURE__ */ jsxs(RPopover.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "inline-flex",
-        onMouseEnter: openNow,
-        onMouseLeave: startHide,
-        onFocus: openNow,
-        onBlur: startHide,
-        children: btn
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RPopover.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-      RPopover.Content,
-      {
-        side: "top",
-        sideOffset: 4,
-        className: cn("z-50", FLOATING_SLIDE_ANIM),
-        "aria-hidden": true,
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        onMouseEnter: cancelHide,
-        onMouseLeave: startHide,
-        children: /* @__PURE__ */ jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
-      }
-    ) })
-  ] });
-}
 var SChip = forwardRef(function SChip2({
   name,
   value = "",
   error: errorProp = false,
   disabled = false,
-  editable = true,
+  editable = false,
   showRemove = true,
   placeholder = "",
   rules,
@@ -3523,6 +3533,7 @@ function SFilePicker({
   hovered = false,
   inline = false,
   multiple = false,
+  useMultipleListBox = false,
   accept,
   maxFileSize,
   maxTotalSize,
@@ -3548,10 +3559,13 @@ function SFilePicker({
   const autoId = useId();
   const resolvedName = name ?? autoId;
   const inputRef = useRef(null);
+  const contentBoxRef = useRef(null);
   const [ruleError, setRuleError] = useState("");
+  const [listOpen, setListOpen] = useState(false);
+  const portalContainer = usePortalContainer();
   const files = multiple ? Array.isArray(value) ? value : [] : value && !Array.isArray(value) ? value : null;
-  const hasSingle = !multiple && !!files;
-  const displayText = hasSingle ? files.name : placeholder;
+  const hasFiles = multiple ? files.length > 0 : !!files;
+  const displayText = !hasFiles ? placeholder : multiple ? files.map((f) => f.name).join(", ") : files.name;
   useFormField({
     name,
     validate: () => {
@@ -3602,10 +3616,12 @@ function SFilePicker({
     e.stopPropagation();
     if (disabled) return;
     onValueChange?.(multiple ? [] : null);
+    setListOpen(false);
   };
   const removeChip = (i) => {
     const next = files.filter((_, idx) => idx !== i);
     onValueChange?.(next);
+    if (next.length === 0) setListOpen(false);
   };
   const open = () => {
     if (!disabled) inputRef.current?.click();
@@ -3615,78 +3631,100 @@ function SFilePicker({
   const padX = size === "md" ? "var(--cmp-filepicker-md-paddingX)" : "var(--cmp-filepicker-sm-paddingX)";
   const iconSize = size === "md" ? 20 : 16;
   const gapCls = size === "md" ? "gap-[var(--cmp-filepicker-md-gap)]" : "gap-[var(--cmp-filepicker-sm-gap)]";
-  const content = /* @__PURE__ */ jsxs("div", { className: cn("flex h-full w-full items-center", gapCls), style: { padding: `0 ${padX}` }, children: [
+  const inlinePlaceholder = inline && !disabled && !hasFiles;
+  const showListbox = multiple && useMultipleListBox;
+  const filesArr = multiple ? files : [];
+  const contentInner = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: contentBoxRef,
+      className: cn("group/filepicker flex h-full w-full items-center", gapCls),
+      style: { padding: inline ? 0 : `0 ${padX}` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            className: "hidden",
+            disabled,
+            multiple,
+            accept,
+            name: resolvedName,
+            onChange,
+            "aria-label": placeholder
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: open,
+            "aria-label": placeholder,
+            className: cn(
+              "flex min-w-0 flex-1 items-center bg-transparent text-left",
+              gapCls,
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                SIcon,
+                {
+                  name: "attachFile",
+                  size: iconSize,
+                  color: disabled ? "var(--cmp-filepicker-icon-disabled)" : "var(--color-grey-65)"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "min-w-0 flex-1 truncate text-[12px]",
+                    inlinePlaceholder && "text-[color:var(--cmp-filepicker-text-placeholder)] transition-colors group-hover/filepicker:text-[color:var(--cmp-filepicker-text-default)]"
+                  ),
+                  style: inlinePlaceholder ? void 0 : {
+                    color: disabled ? "var(--cmp-filepicker-text-disabled)" : hasFiles ? "var(--cmp-filepicker-text-default)" : "var(--cmp-filepicker-text-placeholder)"
+                  },
+                  children: displayText
+                }
+              )
+            ]
+          }
+        ),
+        showListbox && hasFiles && !disabled && /* @__PURE__ */ jsx(
+          Ariakit.PopoverDisclosure,
+          {
+            render: /* @__PURE__ */ jsx(SGhostButton, { icon: "caretDown", size: "xxs", ariaLabel: "toggle file list" }),
+            className: cn("shrink-0 transition-transform duration-150", listOpen && "rotate-180")
+          }
+        ),
+        !disabled && hasFiles && /* @__PURE__ */ jsx(SGhostButton, { icon: "close", size: "xxs", ariaLabel: "clear", onClick: clear })
+      ]
+    }
+  );
+  const content = showListbox ? /* @__PURE__ */ jsxs(Ariakit.PopoverProvider, { open: listOpen, setOpen: setListOpen, placement: "bottom-start", children: [
+    contentInner,
     /* @__PURE__ */ jsx(
-      "input",
+      Ariakit.Popover,
       {
-        ref: inputRef,
-        type: "file",
-        className: "hidden",
-        disabled,
-        multiple,
-        accept,
-        name: resolvedName,
-        onChange,
-        "aria-label": placeholder
+        portal: true,
+        portalElement: portalContainer,
+        gutter: 4,
+        unmountOnHide: true,
+        getAnchorRect: () => contentBoxRef.current?.getBoundingClientRect() ?? null,
+        style: { minWidth: contentBoxRef.current?.offsetWidth },
+        className: "z-50 box-border flex flex-col items-stretch gap-[8px] rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] p-[8px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+        children: filesArr.map((f, i) => /* @__PURE__ */ jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i))
       }
-    ),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        disabled,
-        onClick: open,
-        "aria-label": placeholder,
-        className: cn(
-          "flex min-w-0 flex-1 items-center bg-transparent text-left",
-          gapCls,
-          disabled ? "cursor-not-allowed" : "cursor-pointer"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            SIcon,
-            {
-              name: "attachFile",
-              size: iconSize,
-              color: disabled ? "var(--cmp-filepicker-icon-disabled)" : "var(--color-grey-65)"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "min-w-0 flex-1 truncate text-[12px]",
-              style: {
-                color: disabled ? "var(--cmp-filepicker-text-disabled)" : hasSingle ? "var(--cmp-filepicker-text-default)" : "var(--cmp-filepicker-text-placeholder)"
-              },
-              children: displayText
-            }
-          )
-        ]
-      }
-    ),
-    !disabled && hasSingle && /* @__PURE__ */ jsx(SGhostButton, { icon: "close", size: "xxs", ariaLabel: "clear", onClick: clear })
-  ] });
-  const chips = multiple && files.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-[8px] flex flex-wrap gap-[8px]", children: files.map((f, i) => /* @__PURE__ */ jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i)) });
-  if (inline) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex flex-col", className), style, children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "box-border flex items-center rounded-[var(--cmp-filepicker-sm-radius)] border border-solid border-[color:var(--cmp-filepicker-border-default)] bg-[var(--cmp-filepicker-bg-default)]",
-          style: {
-            height: "var(--cmp-filepicker-sm-height)",
-            width: typeof width === "number" ? `${width}px` : width
-          },
-          children: content
-        }
-      ),
-      chips
-    ] });
-  }
+    )
+  ] }) : contentInner;
+  const chips = multiple && !useMultipleListBox && filesArr.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-[8px] flex flex-wrap gap-[8px]", children: filesArr.map((f, i) => /* @__PURE__ */ jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i)) });
   return /* @__PURE__ */ jsxs("div", { className, style, children: [
     /* @__PURE__ */ jsx(
       SField,
       {
+        borderless: inline,
         label,
         labelWidth,
         icon,