@seekbuddy/dsh-ui 0.0.0-stage → 0.2.0-beta.1

package/dist/chunks/chunk-UAEFKTV3.js

@@ -0,0 +1,144 @@
+import {
+  clampTime,
+  minutesToTime,
+  parseIsoTime,
+  timeToMinutes
+} from "./chunk-RZOP2PFC.js";
+
+// src/seekbuddy/date/TimePicker.tsx
+import clsx from "clsx";
+import { useEffect, useId, useRef } from "react";
+
+// .build/css/seekbuddy/date/TimePicker.module.mjs
+var id = "@seekbuddy/dsh-ui/seekbuddy/date/TimePicker.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id);
+  element.textContent = ".A5-U5q_picker{--time-row:32px;--time-rows:7;color:var(--dsw-alias-label-primary);grid-template-columns:repeat(2,minmax(64px,auto));display:inline-grid}.A5-U5q_column{gap:4px;min-width:0;display:grid}.A5-U5q_column+.A5-U5q_column{border-left:.5px solid var(--dsw-alias-border-l1)}.A5-U5q_heading{color:var(--dsw-alias-label-tertiary);font:var(--dsw-font-xxs-12);text-align:center;padding:0 8px}.A5-U5q_list{max-height:calc(var(--time-row) * var(--time-rows));margin:0;padding:0 8px;list-style:none;overflow-y:auto}.A5-U5q_list:focus-visible{border-radius:var(--dsw-radius-sm);outline-offset:-2px;outline-style:solid}.A5-U5q_option{height:var(--time-row);border-radius:var(--dsw-radius-sm);cursor:pointer;font:var(--dsw-font-xs-13);font-variant-numeric:tabular-nums;user-select:none;justify-content:center;align-items:center;display:flex}.A5-U5q_option:hover:not(.A5-U5q_disabled):not(.A5-U5q_selected){background:var(--dsw-alias-interactive-bg-hover)}.A5-U5q_selected{color:var(--dsw-alias-label-primary-foreground);background:var(--dsw-alias-button-primary-fill)}.A5-U5q_selected:hover{background:var(--dsw-alias-button-primary-hover)}.A5-U5q_placeholder{background:var(--dsw-alias-bg-multi-select)}.A5-U5q_list:focus-visible [data-active]{box-shadow:inset 0 0 0 1px var(--dsw-alias-state-business-primary)}.A5-U5q_disabled{color:var(--dsw-alias-label-dimmed);cursor:not-allowed;text-decoration:line-through}";
+  document.head.appendChild(element);
+}
+var TimePicker_module_default = { "column": "A5-U5q_column", "selected": "A5-U5q_selected", "heading": "A5-U5q_heading", "option": "A5-U5q_option", "list": "A5-U5q_list", "placeholder": "A5-U5q_placeholder", "disabled": "A5-U5q_disabled", "picker": "A5-U5q_picker" };
+
+// src/seekbuddy/date/TimePicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var pad2 = (value) => String(value).padStart(2, "0");
+function TimePicker({
+  value,
+  onChange,
+  minuteStep = 1,
+  min,
+  max,
+  labels,
+  autoFocus = false,
+  className
+}) {
+  const idBase = useId();
+  const optionRefs = useRef(/* @__PURE__ */ new Map());
+  const hoursRef = useRef(null);
+  const pendingAutoFocus = useRef(autoFocus);
+  const parsed = value === null ? { h: 0, min: 0 } : parseIsoTime(value);
+  const lower = min === void 0 ? 0 : timeToMinutes(min);
+  const upper = max === void 0 ? 1439 : timeToMinutes(max);
+  const inWindow = (minutes2) => minutes2 >= lower && minutes2 <= upper;
+  const hours = Array.from({ length: 24 }, (_, hour) => hour);
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, index) => index * minuteStep);
+  const emit = (h, m) => {
+    const next = clampTime(minutesToTime(h * 60 + m), min, max);
+    if (next !== value) onChange(next);
+  };
+  const columns = [
+    {
+      kind: "hours",
+      label: labels.hours,
+      options: hours,
+      cursor: parsed.h,
+      isDisabled: (hour) => !minutes.some((minute) => inWindow(hour * 60 + minute)),
+      pick: (hour) => emit(hour, parsed.min)
+    },
+    {
+      kind: "minutes",
+      label: labels.minutes,
+      options: minutes,
+      cursor: parsed.min,
+      isDisabled: (minute) => !inWindow(parsed.h * 60 + minute),
+      pick: (minute) => emit(parsed.h, minute)
+    }
+  ];
+  const optionId = (kind, option) => `${idBase}-${kind}-${option}`;
+  useEffect(() => {
+    for (const column of columns) {
+      const node = optionRefs.current.get(optionId(column.kind, column.cursor));
+      if (node !== void 0 && typeof node.scrollIntoView === "function") node.scrollIntoView({ block: "center" });
+    }
+    if (pendingAutoFocus.current) {
+      pendingAutoFocus.current = false;
+      hoursRef.current?.focus();
+    }
+  });
+  const onKeyDown = (column) => (event) => {
+    const enabled = column.options.filter((option) => !column.isDisabled(option));
+    if (enabled.length === 0) return;
+    let target;
+    if (event.key === "Home") target = enabled[0];
+    else if (event.key === "End") target = enabled[enabled.length - 1];
+    else if (event.key === "ArrowDown") target = enabled.find((option) => option > column.cursor);
+    else if (event.key === "ArrowUp") {
+      for (const option of enabled) if (option < column.cursor) target = option;
+    } else return;
+    event.preventDefault();
+    if (target !== void 0 && (target !== column.cursor || value === null)) column.pick(target);
+  };
+  return /* @__PURE__ */ jsx("div", { className: clsx(TimePicker_module_default.picker, className), children: columns.map((column) => {
+    const headingId = `${idBase}-${column.kind}-heading`;
+    return /* @__PURE__ */ jsxs("div", { className: TimePicker_module_default.column, children: [
+      /* @__PURE__ */ jsx("div", { id: headingId, className: TimePicker_module_default.heading, children: column.label }),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ref: column.kind === "hours" ? hoursRef : void 0,
+          role: "listbox",
+          "aria-labelledby": headingId,
+          "aria-activedescendant": optionId(column.kind, column.cursor),
+          tabIndex: 0,
+          className: TimePicker_module_default.list,
+          onKeyDown: onKeyDown(column),
+          children: column.options.map((option) => {
+            const id2 = optionId(column.kind, option);
+            const disabled = column.isDisabled(option);
+            const active = column.cursor === option;
+            const selected = active && value !== null;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                id: id2,
+                ref: (node) => {
+                  if (node === null) optionRefs.current.delete(id2);
+                  else optionRefs.current.set(id2, node);
+                },
+                role: "option",
+                "aria-selected": selected,
+                "aria-disabled": disabled || void 0,
+                "data-active": active || void 0,
+                className: clsx(
+                  TimePicker_module_default.option,
+                  selected && TimePicker_module_default.selected,
+                  active && !selected && TimePicker_module_default.placeholder,
+                  disabled && TimePicker_module_default.disabled
+                ),
+                onClick: () => {
+                  if (!disabled) column.pick(option);
+                },
+                children: pad2(option)
+              },
+              option
+            );
+          })
+        }
+      )
+    ] }, column.kind);
+  }) });
+}
+
+export {
+  TimePicker
+};

package/dist/chunks/chunk-UGEORMLD.js

@@ -0,0 +1,89 @@
+import {
+  Calendar
+} from "./chunk-XL33IPCV.js";
+import {
+  formatDateMedium,
+  isOutsideBounds,
+  monthOf,
+  todayIso
+} from "./chunk-RZOP2PFC.js";
+
+// src/seekbuddy/date/DatePicker.tsx
+import clsx from "clsx";
+import { Button } from "@seekbuddy/dsh-ui";
+import { useState } from "react";
+
+// .build/css/seekbuddy/date/DatePicker.module.mjs
+var id = "@seekbuddy/dsh-ui/seekbuddy/date/DatePicker.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id);
+  element.textContent = "._41R-kq_picker{color:var(--dsw-alias-label-primary);gap:12px;display:inline-grid}._41R-kq_footer{border-top:.5px solid var(--dsw-alias-border-l1);justify-content:space-between;align-items:center;gap:12px;min-height:28px;padding-top:12px;display:flex}._41R-kq_summary{min-width:0;color:var(--dsw-alias-label-secondary);font:var(--dsw-font-xs-13);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._41R-kq_empty{color:var(--dsw-alias-label-tertiary)}._41R-kq_today{color:var(--dsw-alias-state-business-primary);flex:none}._41R-kq_today:focus-visible{outline-offset:1px;outline-style:solid}";
+  document.head.appendChild(element);
+}
+var DatePicker_module_default = { "picker": "_41R-kq_picker", "summary": "_41R-kq_summary", "today": "_41R-kq_today", "footer": "_41R-kq_footer", "empty": "_41R-kq_empty" };
+
+// src/seekbuddy/date/DatePicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DatePicker({
+  value,
+  onChange,
+  labels,
+  formatSelected,
+  month,
+  onMonthChange,
+  min,
+  max,
+  isDateDisabled,
+  locale,
+  today: todayProp,
+  className,
+  ...calendar
+}) {
+  const [todayFallback] = useState(() => todayProp ?? todayIso());
+  const today = todayProp ?? todayFallback;
+  const [monthState, setMonthState] = useState(() => monthOf(value ?? today));
+  const [seenValue, setSeenValue] = useState(value);
+  if (value !== seenValue) {
+    setSeenValue(value);
+    if (value !== null && monthOf(value) !== monthState) setMonthState(monthOf(value));
+  }
+  const visibleMonth = month ?? monthState;
+  const showMonth = (next) => {
+    if (month === void 0) setMonthState(next);
+    onMonthChange?.(next);
+  };
+  const todayDisabled = isOutsideBounds(today, min, max) || (isDateDisabled?.(today) ?? false);
+  const pickToday = () => {
+    if (monthOf(today) !== visibleMonth) showMonth(monthOf(today));
+    onChange(today);
+  };
+  const format = formatSelected ?? ((date) => formatDateMedium(locale, date));
+  return /* @__PURE__ */ jsxs("div", { className: clsx(DatePicker_module_default.picker, className), children: [
+    /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        ...calendar,
+        mode: "single",
+        value,
+        onChange,
+        month: visibleMonth,
+        onMonthChange: showMonth,
+        min,
+        max,
+        isDateDisabled,
+        locale,
+        today,
+        labels
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: DatePicker_module_default.footer, children: [
+      /* @__PURE__ */ jsx("span", { className: clsx(DatePicker_module_default.summary, value === null && DatePicker_module_default.empty), children: value === null ? labels.empty : format(value) }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", className: DatePicker_module_default.today, disabled: todayDisabled, onClick: pickToday, children: labels.today })
+    ] })
+  ] });
+}
+
+export {
+  DatePicker
+};

package/dist/chunks/chunk-W6FLI3AK.js

@@ -0,0 +1,112 @@
+// src/seekbuddy/Tabs.tsx
+import clsx from "clsx";
+import { useId, useRef } from "react";
+
+// .build/css/seekbuddy/Tabs.module.mjs
+var id = "@seekbuddy/dsh-ui/seekbuddy/Tabs.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id);
+  element.textContent = '.XNMLKW_tabs{min-width:0;display:grid}.XNMLKW_tablist{min-height:41px;box-shadow:inset 0 -1px 0 var(--dsw-alias-border-l1);align-items:flex-end;gap:20px;display:flex;overflow-x:auto}.XNMLKW_tab{min-height:41px;color:var(--dsw-alias-label-tertiary);cursor:pointer;font:var(--dsw-font-xxs-12);white-space:nowrap;background:0 0;border:0;flex:none;align-items:center;gap:7px;padding:0 1px;font-weight:500;display:inline-flex;position:relative}.XNMLKW_md .XNMLKW_tab{font:var(--dsw-font-s-14);font-weight:500}.XNMLKW_lg .XNMLKW_tab{min-height:44px;font:var(--dsw-font-base-16);font-weight:500}.XNMLKW_bold .XNMLKW_tab{font:var(--dsw-font-xxs-strong-12)}.XNMLKW_bold.XNMLKW_md .XNMLKW_tab{font:var(--dsw-font-s-strong-14)}.XNMLKW_bold.XNMLKW_lg .XNMLKW_tab{font:var(--dsw-font-base-strong-16)}.XNMLKW_tab:hover:not(:disabled),.XNMLKW_active{color:var(--dsw-alias-label-primary)}.XNMLKW_active:after{content:"";background:var(--dsw-alias-state-business-primary);height:2px;position:absolute;bottom:0;left:0;right:0}.XNMLKW_tab:disabled{cursor:not-allowed;opacity:.5}.XNMLKW_tab:focus-visible{border-radius:var(--dsw-radius-xs);outline-offset:2px;outline-style:solid}.XNMLKW_count{border-radius:var(--dsw-radius-sm);min-width:20px;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-active);font:var(--dsw-font-xxxs-11);text-align:center;padding:1px 6px;font-weight:500}.XNMLKW_panel{min-width:0;color:var(--dsw-alias-label-primary);padding-top:16px}.XNMLKW_panel:focus-visible{border-radius:var(--dsw-radius-xs);outline-offset:2px;outline-style:solid}';
+  document.head.appendChild(element);
+}
+var Tabs_module_default = { "count": "XNMLKW_count", "tablist": "XNMLKW_tablist", "active": "XNMLKW_active", "md": "XNMLKW_md", "bold": "XNMLKW_bold", "lg": "XNMLKW_lg", "tabs": "XNMLKW_tabs", "tab": "XNMLKW_tab", "panel": "XNMLKW_panel" };
+
+// src/seekbuddy/Tabs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var NEXT_KEYS = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown"]);
+var PREVIOUS_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+function Tabs({
+  label,
+  items,
+  activeKey,
+  onChange,
+  panelId,
+  size = "sm",
+  bold = false,
+  className
+}) {
+  const generatedId = useId();
+  const buttons = useRef(/* @__PURE__ */ new Map());
+  const withPanels = items.some((item) => item.children !== void 0);
+  const idBase = panelId === void 0 || withPanels ? generatedId : panelId;
+  const tabId = (key) => `${idBase}-tab-${key}`;
+  const ownPanelId = (key) => `${idBase}-panel-${key}`;
+  const enabled = items.filter((item) => item.disabled !== true);
+  const selected = enabled.some((item) => item.key === activeKey) ? activeKey : enabled[0]?.key;
+  const active = items.find((item) => item.key === selected);
+  const move = (event) => {
+    if (enabled.length === 0) return;
+    const current = Math.max(
+      0,
+      enabled.findIndex((item) => item.key === selected)
+    );
+    let next;
+    if (NEXT_KEYS.has(event.key)) next = (current + 1) % enabled.length;
+    else if (PREVIOUS_KEYS.has(event.key)) next = (current - 1 + enabled.length) % enabled.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = enabled.length - 1;
+    else return;
+    event.preventDefault();
+    const target = enabled[next];
+    if (target === void 0) return;
+    onChange(target.key);
+    buttons.current.get(target.key)?.focus();
+  };
+  const tablist = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(Tabs_module_default.tablist, Tabs_module_default[size], bold && Tabs_module_default.bold, !withPanels && className),
+      role: "tablist",
+      "aria-label": label,
+      onKeyDown: move,
+      children: items.map((item) => {
+        const isActive = item.key === selected;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (node) => {
+              if (node === null) buttons.current.delete(item.key);
+              else buttons.current.set(item.key, node);
+            },
+            type: "button",
+            role: "tab",
+            id: tabId(item.key),
+            "aria-selected": isActive,
+            "aria-controls": withPanels ? ownPanelId(item.key) : panelId,
+            tabIndex: isActive ? 0 : -1,
+            disabled: item.disabled,
+            className: clsx(Tabs_module_default.tab, isActive && Tabs_module_default.active),
+            onClick: () => {
+              if (!isActive) onChange(item.key);
+            },
+            children: [
+              item.label,
+              item.count !== void 0 && /* @__PURE__ */ jsx("span", { className: Tabs_module_default.count, children: item.count })
+            ]
+          },
+          item.key
+        );
+      })
+    }
+  );
+  if (!withPanels) return tablist;
+  return /* @__PURE__ */ jsxs("div", { className: clsx(Tabs_module_default.tabs, className), children: [
+    tablist,
+    active !== void 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: ownPanelId(active.key),
+        "aria-labelledby": tabId(active.key),
+        tabIndex: 0,
+        className: Tabs_module_default.panel,
+        children: active.children
+      }
+    )
+  ] });
+}
+
+export {
+  Tabs
+};

package/dist/chunks/chunk-WX46TSKP.js

@@ -0,0 +1,328 @@
+// src/seekbuddy/Upload.tsx
+import clsx from "clsx";
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { Button } from "@seekbuddy/dsh-ui";
+import {
+  IconCloseOutlineRegular,
+  IconPaperclipOutlineRegular,
+  IconRefreshOutlineRegular
+} from "@seekbuddy/dsh-ui/icons";
+
+// .build/css/seekbuddy/Upload.module.mjs
+var id = "@seekbuddy/dsh-ui/seekbuddy/Upload.module.css";
+if (typeof document !== "undefined" && !document.querySelector('style[data-dsh-ui-primitives="' + id + '"]')) {
+  const element = document.createElement("style");
+  element.setAttribute("data-dsh-ui-primitives", id);
+  element.textContent = "._8vfhUq_upload{flex-direction:column;gap:8px;display:flex}._8vfhUq_input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden}._8vfhUq_trigger{flex-wrap:wrap;align-items:center;gap:12px;display:flex;position:relative}._8vfhUq_hint{color:var(--dsw-alias-label-tertiary);font:var(--dsw-font-xs-13)}._8vfhUq_dropzone{box-sizing:border-box;border:1px dashed var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-lg);text-align:center;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:24px;display:flex;position:relative}._8vfhUq_dropzone:hover:not(._8vfhUq_disabled){background:var(--dsw-alias-interactive-bg-hover)}._8vfhUq_dropzone:focus-visible{outline-offset:2px;outline-style:solid}._8vfhUq_dropIcon{color:var(--dsw-alias-label-tertiary);margin-bottom:4px;display:inline-flex}._8vfhUq_dropTitle{color:var(--dsw-alias-label-primary);font:var(--dsw-font-s-strong-14)}._8vfhUq_dragging{border-color:var(--dsw-alias-state-business-primary)}._8vfhUq_dragging ._8vfhUq_dropIcon,._8vfhUq_dragging ._8vfhUq_dropTitle{color:var(--dsw-alias-state-business-primary)}._8vfhUq_disabled{color:var(--dsw-alias-label-dimmed);cursor:not-allowed}._8vfhUq_disabled ._8vfhUq_dropIcon,._8vfhUq_disabled ._8vfhUq_dropTitle,._8vfhUq_disabled ._8vfhUq_hint{color:var(--dsw-alias-label-dimmed)}._8vfhUq_list{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}._8vfhUq_item{border-radius:var(--dsw-radius-sm);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:6px 8px;display:grid}._8vfhUq_item:hover{background:var(--dsw-alias-interactive-bg-hover)}._8vfhUq_fileIcon{color:var(--dsw-alias-label-tertiary);display:inline-flex}._8vfhUq_name{color:var(--dsw-alias-label-primary);text-overflow:ellipsis;white-space:nowrap;font:var(--dsw-font-xs-13);text-align:left;overflow:hidden}._8vfhUq_nameButton{cursor:pointer;background:0 0;border:0;padding:0}._8vfhUq_nameButton:hover{text-decoration:underline}._8vfhUq_nameButton:focus-visible{outline-offset:2px;border-radius:var(--dsw-radius-xs);outline-style:solid}._8vfhUq_actions{gap:2px;display:flex}._8vfhUq_action{width:28px;min-width:28px;padding:0}._8vfhUq_meta{color:var(--dsw-alias-label-tertiary);font:var(--dsw-font-xxs-12);grid-column:2;gap:8px;display:flex}._8vfhUq_error ._8vfhUq_fileIcon,._8vfhUq_error ._8vfhUq_name,._8vfhUq_error ._8vfhUq_status{color:var(--dsw-alias-state-error-primary)}._8vfhUq_track{corner-shape:round;background:var(--dsw-alias-interactive-bg-active);border-radius:999px;grid-column:2/-1;height:2px;margin-top:4px;display:block;overflow:hidden}._8vfhUq_fill{background:var(--dsw-alias-state-business-primary);height:100%;display:block}";
+  document.head.appendChild(element);
+}
+var Upload_module_default = { "dropzone": "_8vfhUq_dropzone", "track": "_8vfhUq_track", "meta": "_8vfhUq_meta", "dropIcon": "_8vfhUq_dropIcon", "name": "_8vfhUq_name", "actions": "_8vfhUq_actions", "hint": "_8vfhUq_hint", "list": "_8vfhUq_list", "item": "_8vfhUq_item", "upload": "_8vfhUq_upload", "dropTitle": "_8vfhUq_dropTitle", "nameButton": "_8vfhUq_nameButton", "disabled": "_8vfhUq_disabled", "error": "_8vfhUq_error", "dragging": "_8vfhUq_dragging", "status": "_8vfhUq_status", "fill": "_8vfhUq_fill", "input": "_8vfhUq_input", "fileIcon": "_8vfhUq_fileIcon", "trigger": "_8vfhUq_trigger", "action": "_8vfhUq_action" };
+
+// src/seekbuddy/Upload.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Upload({
+  layout = "button",
+  accept,
+  multiple = false,
+  maxCount,
+  maxSize,
+  disabled = false,
+  items,
+  defaultItems,
+  beforeUpload,
+  upload,
+  onChange,
+  onReject,
+  onRemove,
+  onPreview,
+  showList = true,
+  labels,
+  className
+}) {
+  const [ownItems, setOwnItems] = useState(() => defaultItems ?? []);
+  const list = items ?? ownItems;
+  const latest = useRef(list);
+  latest.current = list;
+  const controllers = useRef(/* @__PURE__ */ new Map());
+  const mounted = useRef(true);
+  const sequence = useRef(0);
+  const input = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const dragDepth = useRef(0);
+  const prefix = useId();
+  useEffect(() => {
+    mounted.current = true;
+    const active = controllers.current;
+    return () => {
+      mounted.current = false;
+      for (const controller of active.values()) controller.abort();
+      active.clear();
+    };
+  }, []);
+  const commit = (next) => {
+    latest.current = next;
+    if (items === void 0) setOwnItems(next);
+    onChange?.(next);
+  };
+  const patch = (uid, change) => {
+    if (!mounted.current) return;
+    const index = latest.current.findIndex((item) => item.uid === uid);
+    if (index === -1) return;
+    const next = latest.current.slice();
+    next[index] = { ...next[index], ...change };
+    commit(next);
+  };
+  const start = (uid, file) => {
+    controllers.current.get(uid)?.abort();
+    const controller = new AbortController();
+    controllers.current.set(uid, controller);
+    patch(uid, { status: "uploading", percent: 0, error: void 0 });
+    upload(file, {
+      onProgress: (percent) => {
+        if (!controller.signal.aborted) patch(uid, { percent: Math.min(100, Math.max(0, Math.round(percent))) });
+      },
+      signal: controller.signal
+    }).then(
+      (response) => {
+        if (!controller.signal.aborted) patch(uid, { status: "done", percent: 100, response });
+      },
+      (reason) => {
+        if (!controller.signal.aborted) patch(uid, { status: "error", error: errorMessage(reason) });
+      }
+    );
+  };
+  const add = async (picked) => {
+    if (disabled) return;
+    const candidates = multiple ? picked : picked.slice(0, 1);
+    const rejections = [];
+    let accepted = [];
+    for (const file of candidates) {
+      if (accept !== void 0 && !matchesAccept(file, accept)) rejections.push({ file, reason: "accept" });
+      else if (maxSize !== void 0 && file.size > maxSize) rejections.push({ file, reason: "size" });
+      else accepted.push(file);
+    }
+    if (maxCount !== void 0) {
+      const room = maxCount === 1 ? 1 : Math.max(0, maxCount - latest.current.length);
+      for (const file of accepted.slice(room)) rejections.push({ file, reason: "count" });
+      accepted = accepted.slice(0, room);
+    }
+    if (rejections.length > 0) onReject?.(rejections);
+    if (beforeUpload !== void 0) {
+      const checks = await Promise.all(
+        accepted.map((file) => Promise.resolve(beforeUpload(file, accepted)).catch(() => false))
+      );
+      accepted = accepted.filter((_, index) => checks[index]);
+    }
+    if (accepted.length === 0 || !mounted.current) return;
+    const fresh = accepted.map((file) => {
+      sequence.current += 1;
+      return {
+        uid: `${prefix}-${sequence.current}`,
+        name: file.name,
+        size: file.size,
+        status: "uploading",
+        percent: 0,
+        file
+      };
+    });
+    if (maxCount === 1) {
+      for (const item of latest.current) controllers.current.get(item.uid)?.abort();
+      commit(fresh);
+    } else {
+      commit([...latest.current, ...fresh]);
+    }
+    for (const item of fresh) start(item.uid, item.file);
+  };
+  const remove = async (item) => {
+    if (onRemove !== void 0 && !await onRemove(item)) return;
+    controllers.current.get(item.uid)?.abort();
+    controllers.current.delete(item.uid);
+    commit(latest.current.filter((entry) => entry.uid !== item.uid));
+  };
+  const open = () => {
+    if (!disabled) input.current?.click();
+  };
+  const onInputChange = (event) => {
+    const files = [...event.target.files ?? []];
+    event.target.value = "";
+    void add(files);
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      open();
+    }
+  };
+  const onDragEnter = (event) => {
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    dragDepth.current += 1;
+    setDragging(true);
+  };
+  const onDragLeave = (event) => {
+    if (!hasFiles(event)) return;
+    dragDepth.current = Math.max(0, dragDepth.current - 1);
+    if (dragDepth.current === 0) setDragging(false);
+  };
+  const onDragOver = (event) => {
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+  };
+  const onDrop = (event) => {
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    dragDepth.current = 0;
+    setDragging(false);
+    void add([...event.dataTransfer.files]);
+  };
+  const picker = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: input,
+      className: Upload_module_default.input,
+      type: "file",
+      tabIndex: -1,
+      accept,
+      multiple,
+      disabled,
+      onClick: (event) => event.stopPropagation(),
+      onChange: onInputChange
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: clsx(Upload_module_default.upload, className), children: [
+    layout === "dragger" ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(Upload_module_default.dropzone, dragging && Upload_module_default.dragging, disabled && Upload_module_default.disabled),
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled || void 0,
+        onClick: open,
+        onKeyDown,
+        onDragEnter,
+        onDragLeave,
+        onDragOver,
+        onDrop,
+        children: [
+          picker,
+          /* @__PURE__ */ jsx("span", { className: Upload_module_default.dropIcon, "aria-hidden": "true", children: /* @__PURE__ */ jsx(UploadGlyph, {}) }),
+          /* @__PURE__ */ jsx("span", { className: Upload_module_default.dropTitle, children: labels.trigger }),
+          labels.hint === void 0 ? null : /* @__PURE__ */ jsx("span", { className: Upload_module_default.hint, children: labels.hint })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: Upload_module_default.trigger, children: [
+      picker,
+      /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(UploadGlyph, {}), disabled, onClick: open, children: labels.trigger }),
+      labels.hint === void 0 ? null : /* @__PURE__ */ jsx("span", { className: Upload_module_default.hint, children: labels.hint })
+    ] }),
+    showList && list.length > 0 ? /* @__PURE__ */ jsx("ul", { className: Upload_module_default.list, "aria-label": labels.list, children: list.map((item) => /* @__PURE__ */ jsxs("li", { className: clsx(Upload_module_default.item, Upload_module_default[item.status]), "data-status": item.status, children: [
+      /* @__PURE__ */ jsx("span", { className: Upload_module_default.fileIcon, "aria-hidden": "true", children: /* @__PURE__ */ jsx(IconPaperclipOutlineRegular, {}) }),
+      onPreview === void 0 ? /* @__PURE__ */ jsx("span", { className: Upload_module_default.name, children: item.name }) : /* @__PURE__ */ jsx("button", { type: "button", className: clsx(Upload_module_default.name, Upload_module_default.nameButton), onClick: () => onPreview(item), children: item.name }),
+      /* @__PURE__ */ jsxs("span", { className: Upload_module_default.actions, children: [
+        item.status === "error" && item.file !== void 0 ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: Upload_module_default.action,
+            "aria-label": labels.retry,
+            disabled,
+            icon: /* @__PURE__ */ jsx(IconRefreshOutlineRegular, {}),
+            onClick: () => start(item.uid, item.file)
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: Upload_module_default.action,
+            "aria-label": labels.remove,
+            disabled,
+            icon: /* @__PURE__ */ jsx(IconCloseOutlineRegular, {}),
+            onClick: () => void remove(item)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: Upload_module_default.meta, children: [
+        /* @__PURE__ */ jsx("span", { children: formatBytes(item.size) }),
+        /* @__PURE__ */ jsx("span", { className: Upload_module_default.status, role: "status", children: statusText(item, labels) })
+      ] }),
+      item.status === "uploading" ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: Upload_module_default.track,
+          role: "progressbar",
+          "aria-label": labels.uploading,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": item.percent,
+          children: /* @__PURE__ */ jsx("span", { className: Upload_module_default.fill, style: { width: `${item.percent}%` } })
+        }
+      ) : null
+    ] }, item.uid)) }) : null
+  ] });
+}
+function statusText(item, labels) {
+  if (item.status === "uploading") return `${labels.uploading} ${item.percent}%`;
+  if (item.status === "error") return item.error === void 0 || item.error === "" ? labels.error : item.error;
+  return labels.done;
+}
+function errorMessage(reason) {
+  return reason instanceof Error ? reason.message : typeof reason === "string" ? reason : "";
+}
+function matchesAccept(file, accept) {
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept.split(",").map((rule) => rule.trim().toLowerCase()).filter((rule) => rule !== "").some((rule) => {
+    if (rule.startsWith(".")) return name.endsWith(rule);
+    if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+    return type === rule;
+  });
+}
+function hasFiles(event) {
+  return [...event.dataTransfer?.types ?? []].includes("Files");
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value.toFixed(1).replace(/\.0$/, "")} ${units[unit]}`;
+}
+function UploadGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 15V4" }),
+        /* @__PURE__ */ jsx("path", { d: "M7.5 8.5 12 4l4.5 4.5" })
+      ]
+    }
+  );
+}
+
+export {
+  Upload
+};