@nexub/react 1.6.0 → 1.8.0

package/dist/chunk-BU5QD2FS.js

@@ -0,0 +1,148 @@
+'use client';
+import {
+  cn
+} from "./chunk-Q7G5WGYV.js";
+
+// src/components/Table/Table.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var CaptionIdContext = React.createContext(void 0);
+var Root = React.forwardRef(
+  ({ className, scrollLabel, ...props }, ref) => {
+    const wrapperRef = React.useRef(null);
+    const tableRef = React.useRef(null);
+    const captionId = React.useId();
+    const [overflow, setOverflow] = React.useState(null);
+    React.useEffect(() => {
+      const wrapper = wrapperRef.current;
+      if (!wrapper) return;
+      const measure = () => {
+        if (wrapper.scrollWidth > wrapper.clientWidth) {
+          const id = tableRef.current?.caption?.id || null;
+          setOverflow((prev) => prev && prev.captionId === id ? prev : { captionId: id });
+        } else {
+          setOverflow(null);
+        }
+      };
+      measure();
+      if (typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(measure);
+      ro.observe(wrapper);
+      if (tableRef.current) ro.observe(tableRef.current);
+      return () => ro.disconnect();
+    }, []);
+    const setRefs = (el) => {
+      tableRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    };
+    const label = scrollLabel ?? props["aria-label"];
+    const labelledBy = label ? void 0 : props["aria-labelledby"] ?? overflow?.captionId ?? void 0;
+    const named = Boolean(label || labelledBy);
+    return /* @__PURE__ */ jsx(CaptionIdContext.Provider, { value: captionId, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: wrapperRef,
+        className: "relative w-full overflow-auto",
+        ...overflow ? {
+          tabIndex: 0,
+          ...named ? { role: "region", "aria-label": label, "aria-labelledby": labelledBy } : {}
+        } : {},
+        children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            ref: setRefs,
+            className: cn("w-full caption-bottom text-sm tabular-nums", className),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
+);
+Root.displayName = "Table.Root";
+var Header = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+Header.displayName = "Table.Header";
+var Body = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+Body.displayName = "Table.Body";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-[var(--color-surface-container-low)] font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "Table.Footer";
+var Row = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "border-b border-[var(--color-outline-variant)] transition-colors hover:bg-[color-mix(in_srgb,var(--color-surface-container-low)_50%,transparent)] data-[state=selected]:bg-[var(--color-surface-container-low)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Row.displayName = "Table.Row";
+var Head = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      className: cn(
+        "h-10 px-4 text-start align-middle font-medium text-[var(--color-on-surface-muted)] [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Head.displayName = "Table.Head";
+var Cell = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn(
+        "p-4 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Cell.displayName = "Table.Cell";
+var Caption = React.forwardRef(({ className, id, ...props }, ref) => {
+  const contextId = React.useContext(CaptionIdContext);
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      ref,
+      id: id ?? contextId,
+      className: cn("mt-4 text-sm text-[var(--color-on-surface-muted)]", className),
+      ...props
+    }
+  );
+});
+Caption.displayName = "Table.Caption";
+var Table = {
+  Root,
+  Header,
+  Body,
+  Footer: TableFooter,
+  Row,
+  Head,
+  Cell,
+  Caption
+};
+
+export {
+  Table
+};

package/dist/{chunk-GRKCUQG4.js → chunk-DFCHCYNT.js}

@@ -1,13 +1,13 @@
 'use client';
 import {
   DropdownMenu
-} from "./chunk-NQPGELMP.js";
+} from "./chunk-A4QLUIFN.js";
 import {
   ButtonGroup
 } from "./chunk-WHTLXQB6.js";
 import {
   Button
-} from "./chunk-C6JRJ6JW.js";
+} from "./chunk-22BGPRJZ.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -19,6 +19,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var SplitButton = React.forwardRef(
   ({ menuLabel, menu, align = "end", variant, size, tone, disabled, loading, className, ...props }, ref) => {
     const shared = { variant, size, tone };
+    const busy = loading || props.status === "loading";
     return /* @__PURE__ */ jsxs(ButtonGroup, { attached: true, className, children: [
       /* @__PURE__ */ jsx(Button, { ref, ...shared, disabled, ...loading ? { loading: true } : {}, ...props }),
       /* @__PURE__ */ jsxs(DropdownMenu.Root, { modal: false, children: [
@@ -26,7 +27,7 @@ var SplitButton = React.forwardRef(
           Button,
           {
             ...shared,
-            disabled: disabled || loading,
+            disabled: disabled || busy,
             "aria-label": menuLabel,
             className: cn(
               "px-3",

package/dist/{chunk-PMWYLYM3.js → chunk-ENB7X3W4.js}

@@ -1,13 +1,13 @@
 'use client';
 import {
   inputWrapperVariants
-} from "./chunk-JHVYI5GK.js";
+} from "./chunk-F7ZA2VA2.js";
 import {
   disabledText
-} from "./chunk-7SXR4PGO.js";
+} from "./chunk-5W3AOOYS.js";
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-NSVXGOR3.js → chunk-ESMIBOF5.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-HXV5UA7K.js → chunk-ETWFHIAE.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-JHVYI5GK.js → chunk-F7ZA2VA2.js}

@@ -4,7 +4,7 @@ import {
   fieldDisabledWithin,
   fieldFocusWithin,
   fieldInvalid
-} from "./chunk-7SXR4PGO.js";
+} from "./chunk-5W3AOOYS.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-WXRQ42DR.js → chunk-FT2S7N64.js}

@@ -1,10 +1,10 @@
 'use client';
 import {
   avatarVariants
-} from "./chunk-2Y4WLNEZ.js";
+} from "./chunk-QUYOV2ZJ.js";
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-BNFGVFZ3.js → chunk-G4RLUGE3.js}

@@ -1,10 +1,10 @@
 'use client';
 import {
   HelperText
-} from "./chunk-WVBGQCYC.js";
+} from "./chunk-ZLW7IBXK.js";
 import {
   Label
-} from "./chunk-PREMZMLU.js";
+} from "./chunk-PGD246WD.js";
 import {
   FormError
 } from "./chunk-QVTVDL6Y.js";

package/dist/{chunk-SZ2WPWXJ.js → chunk-GG5HDX7J.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-FJUVYRNT.js";
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 
 // src/components/Autocomplete/Autocomplete.tsx
 import * as React from "react";

package/dist/{chunk-O74XEHLA.js → chunk-GSA7NBEG.js}

@@ -3,8 +3,9 @@ import {
   useIsomorphicLayoutEffect
 } from "./chunk-NHUQLIHL.js";
 import {
+  useLocale,
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -13,7 +14,11 @@ import {
 import * as React from "react";
 import * as RadixToast from "@radix-ui/react-toast";
 import { jsx } from "react/jsx-runtime";
-var Provider2 = RadixToast.Provider;
+function Provider2({ swipeDirection, ...props }) {
+  const { dir } = useLocale();
+  return /* @__PURE__ */ jsx(RadixToast.Provider, { swipeDirection: swipeDirection ?? (dir === "rtl" ? "left" : "right"), ...props });
+}
+Provider2.displayName = "Toast.Provider";
 var Viewport2 = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     RadixToast.Viewport,
@@ -37,6 +42,8 @@ var Root2 = React.forwardRef(
         // Snackbar: the inverse surface stands out from any page, light or dark.
         "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-shape-container bg-[var(--color-inverse-surface)] py-3 ps-4 pe-2 text-[var(--color-inverse-on-surface)] shadow-elevation-2",
         "duration-spatial-default ease-spatial-default data-[state=closed]:duration-effects-fast",
+        // Follow the finger (Radix's signed swipe offsets), snap back on cancel, leave from where it was let go.
+        "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
         // Enter/exit slide from the right edge, where the viewport sits.
         "nx-motion [--nx-x:calc(100%+1rem)] rtl:[--nx-x:calc(-100%-1rem)]",
         className
@@ -169,6 +176,7 @@ var GAP = 8;
 function Toaster({ expand = false, visibleToasts = 3 }) {
   const toasts = useToastStore();
   const messages = useNexubMessages();
+  const { dir } = useLocale();
   const [closed, setClosed] = React2.useState(() => /* @__PURE__ */ new Set());
   const [hovered, setHovered] = React2.useState(false);
   const [focused, setFocused] = React2.useState(false);
@@ -237,7 +245,7 @@ function Toaster({ expand = false, visibleToasts = 3 }) {
       setFocused(false);
     }
   }, [order.length]);
-  return /* @__PURE__ */ jsxs(RadixToast2.Provider, { swipeDirection: "right", children: [
+  return /* @__PURE__ */ jsxs(RadixToast2.Provider, { swipeDirection: dir === "rtl" ? "left" : "right", children: [
     toasts.map((t) => {
       const i = order.indexOf(t.id);
       const action = t.action ?? (t.undo && { label: t.undo.label ?? messages.undo, onClick: t.undo.onUndo });

package/dist/{chunk-IGLOYOCH.js → chunk-HSM7RXUF.js}

@@ -1,15 +1,16 @@
 'use client';
 import {
   floatingSurface
-} from "./chunk-FLZD7HQY.js";
+} from "./chunk-5FWJXSXT.js";
 import {
   field,
   fieldFocusVisible
-} from "./chunk-7SXR4PGO.js";
+} from "./chunk-5W3AOOYS.js";
 import {
   useIntlLocale,
+  useLocale,
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -21,9 +22,44 @@ import { DayPicker } from "react-day-picker";
 import { format } from "date-fns";
 import { CalendarDays, ChevronLeft, ChevronRight } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
-function formatDate(date, locale) {
+function formatDate(date, locale, dateLocale) {
+  if (dateLocale) return format(date, "PP", { locale: dateLocale });
   return locale ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date) : format(date, "PP");
 }
+function CalendarChevron({ orientation, ...rest }) {
+  const { dir } = useLocale();
+  const flip = dir === "rtl";
+  if (orientation === "left" || orientation === "right") {
+    const Icon = orientation === "left" !== flip ? ChevronLeft : ChevronRight;
+    return /* @__PURE__ */ jsx(Icon, { size: "xs", "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", ...rest });
+}
+function useCalendarLocale(localeProp) {
+  const { dir, dateLocale } = useLocale();
+  const messages = useNexubMessages();
+  const intlLocale = useIntlLocale();
+  const locale = localeProp ?? dateLocale;
+  const labels = React.useMemo(() => {
+    const day = (date, modifiers, withSelected) => {
+      let label = format(date, "PPPP", locale ? { locale } : void 0);
+      if (modifiers?.today) label = messages.todayDate(label);
+      if (withSelected && modifiers?.selected) label = messages.selectedDate(label);
+      return label;
+    };
+    return {
+      labelPrevious: () => messages.previousMonth,
+      labelNext: () => messages.nextMonth,
+      labelNav: () => messages.calendarNavigation,
+      labelDayButton: (date, modifiers) => day(date, modifiers, true),
+      labelGridcell: (date, modifiers) => day(date, modifiers, false)
+    };
+  }, [messages, locale]);
+  return {
+    dayPickerProps: { locale, dir, labels, components: { Chevron: CalendarChevron } },
+    format: (date) => formatDate(date, intlLocale, locale)
+  };
+}
 var calendarClassNames = {
   months: "flex flex-col sm:flex-row gap-4",
   month: "flex flex-col gap-4",
@@ -60,13 +96,14 @@ var DatePicker = React.forwardRef(
     maxDate,
     className,
     id,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    locale: localeProp
   }, ref) {
     const [open, setOpen] = React.useState(false);
     const messages = useNexubMessages();
     const placeholder = placeholderProp ?? messages.pickDate;
-    const locale = useIntlLocale();
-    const display = value ? formatDate(value, locale) : placeholder;
+    const calendar = useCalendarLocale(localeProp);
+    const display = value ? calendar.format(value) : placeholder;
     return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
         "button",
@@ -116,9 +153,7 @@ var DatePicker = React.forwardRef(
               showOutsideDays: true,
               className: "relative p-3",
               classNames: calendarClassNames,
-              components: {
-                Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { size: "xs", "aria-hidden": "true" }) : orientation === "right" ? /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: "xs", "aria-hidden": "true", ...rest })
-              }
+              ...calendar.dayPickerProps
             }
           )
         }
@@ -129,6 +164,6 @@ var DatePicker = React.forwardRef(
 DatePicker.displayName = "DatePicker";
 
 export {
-  formatDate,
+  useCalendarLocale,
   DatePicker
 };

package/dist/{chunk-FIDUY6SS.js → chunk-IDIS7Z6H.js}

@@ -5,10 +5,10 @@ import {
 import {
   overlaySurface,
   scrim
-} from "./chunk-FLZD7HQY.js";
+} from "./chunk-5FWJXSXT.js";
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-TRA6A5C5.js → chunk-JVOSMXD5.js}

@@ -2,10 +2,10 @@
 import {
   disabledText,
   pressable
-} from "./chunk-7SXR4PGO.js";
+} from "./chunk-5W3AOOYS.js";
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-3FPJIXG7.js → chunk-KRHD7VI6.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-DEIBF3P7.js";
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-DGQJRTO6.js → chunk-L4BSKMLK.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-7VJABRKB.js → chunk-NORCPKRD.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   floatingSurface
-} from "./chunk-FLZD7HQY.js";
+} from "./chunk-5FWJXSXT.js";
 import {
   glassSurfaceClass
 } from "./chunk-DEIBF3P7.js";

package/dist/{chunk-CQWYZPPJ.js → chunk-NYORXEPS.js}

@@ -3,7 +3,7 @@ import {
   disabledContainer,
   disabledText,
   pressable
-} from "./chunk-7SXR4PGO.js";
+} from "./chunk-5W3AOOYS.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-3MT23LNM.js → chunk-O6J6HXVT.js}

@@ -7,17 +7,17 @@ import {
 } from "./chunk-JLUCMNVS.js";
 import {
   IconButton
-} from "./chunk-CQWYZPPJ.js";
+} from "./chunk-NYORXEPS.js";
 import {
   fieldDisabledWithin,
   fieldFocusWithin
-} from "./chunk-7SXR4PGO.js";
+} from "./chunk-5W3AOOYS.js";
 import {
   glassSurfaceClass
 } from "./chunk-DEIBF3P7.js";
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";

package/dist/{chunk-UTJJ5HFX.js → chunk-OS4NOWEI.js}

@@ -1,7 +1,8 @@
 'use client';
 import {
+  useLocale,
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";
@@ -10,6 +11,10 @@ import {
 import * as React from "react";
 import { Upload, X } from "@nexub/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
+function formatFileSize(bytes, locale) {
+  const [value, unit] = bytes < 1024 ? [bytes, "byte"] : bytes < 1024 * 1024 ? [bytes / 1024, "kilobyte"] : [bytes / (1024 * 1024), "megabyte"];
+  return new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: 1 }).format(value);
+}
 var FileUploadContext = React.createContext(null);
 function useFileUpload() {
   const ctx = React.useContext(FileUploadContext);
@@ -59,53 +64,52 @@ var Dropzone = React.forwardRef(
       const dropped = Array.from(e.dataTransfer.files);
       addFiles(dropped);
     }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        role: "button",
-        tabIndex: 0,
-        "aria-label": messages.uploadFiles,
-        onClick: () => inputRef.current?.click(),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
-        },
-        onDragOver: (e) => {
-          e.preventDefault();
-          setIsDragging(true);
-        },
-        onDragLeave: () => setIsDragging(false),
-        onDrop: handleDrop,
-        className: cn(
-          // Hover/press = the state layer; focus = the global ring.
-          "nx-state-layer flex cursor-pointer flex-col items-center justify-center gap-2 rounded-shape-container border-2 border-dashed p-8 text-center text-[var(--color-on-surface)] transition-colors",
-          isDragging ? "border-[var(--color-primary)] bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)]" : "border-[var(--color-outline)] hover:border-[var(--color-primary)]",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(Upload, { size: "lg", className: "text-[var(--color-on-surface-muted)]", "aria-hidden": "true" }),
-          children ?? /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--color-on-surface-muted)]", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--color-primary)]", children: messages.clickToUpload }),
-            " ",
-            messages.orDragAndDrop
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "file",
-              className: "sr-only",
-              multiple: true,
-              accept: accept?.join(","),
-              onChange: (e) => {
-                if (e.target.files) addFiles(Array.from(e.target.files));
-                e.target.value = "";
+    return (
+      // A <label> around the native file input: click, Enter and Space open the
+      // picker natively, the visible text is the accessible name, and the
+      // focus ring follows the input's keyboard focus onto the drop zone.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          onDragOver: (e) => {
+            e.preventDefault();
+            setIsDragging(true);
+          },
+          onDragLeave: () => setIsDragging(false),
+          onDrop: handleDrop,
+          className: cn(
+            // Hover/press = the state layer.
+            "nx-state-layer rounded-shape-container border-2 border-dashed text-center text-[var(--color-on-surface)] transition-colors",
+            "has-[input:focus-visible]:outline has-[input:focus-visible]:outline-[3px] has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-[var(--color-primary)]",
+            isDragging ? "border-[var(--color-primary)] bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)]" : "border-[var(--color-outline)] hover:border-[var(--color-primary)]",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer flex-col items-center justify-center gap-2 p-8", children: [
+            /* @__PURE__ */ jsx(Upload, { size: "lg", className: "text-[var(--color-on-surface-muted)]", "aria-hidden": "true" }),
+            children ?? /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--color-on-surface-muted)]", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--color-primary)]", children: messages.clickToUpload }),
+              " ",
+              messages.orDragAndDrop
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "file",
+                className: "sr-only",
+                multiple: true,
+                accept: accept?.join(","),
+                onChange: (e) => {
+                  if (e.target.files) addFiles(Array.from(e.target.files));
+                  e.target.value = "";
+                }
               }
-            }
-          )
-        ]
-      }
+            )
+          ] })
+        }
+      )
     );
   }
 );
@@ -121,6 +125,7 @@ List.displayName = "FileUpload.List";
 var Item = React.forwardRef(({ className, index, ...props }, ref) => {
   const { files, removeFile } = useFileUpload();
   const messages = useNexubMessages();
+  const { locale } = useLocale();
   const file = files[index];
   if (!file) return null;
   return /* @__PURE__ */ jsxs(
@@ -135,10 +140,7 @@ var Item = React.forwardRef(({ className, index, ...props }, ref) => {
       children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--color-on-surface)]", children: file.name }),
-          /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--color-on-surface-muted)]", children: [
-            (file.size / 1024).toFixed(1),
-            " KB"
-          ] })
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-on-surface-muted)]", children: formatFileSize(file.size, locale) })
         ] }),
         /* @__PURE__ */ jsx(
           "button",

package/dist/{chunk-O626NJEM.js → chunk-OTZBGMYH.js}

@@ -1,10 +1,10 @@
 'use client';
 import {
   Input
-} from "./chunk-JHVYI5GK.js";
+} from "./chunk-F7ZA2VA2.js";
 import {
   useNexubMessages
-} from "./chunk-743Y5MY3.js";
+} from "./chunk-3MSIO7KM.js";
 import {
   cn
 } from "./chunk-Q7G5WGYV.js";