klun-ui 0.1.0 → 0.1.1

package/dist/{chunk-FTYQRXS5.cjs → chunk-2MTDM5CL.cjs}

@@ -6681,193 +6681,322 @@ var CounterInput = react.forwardRef(function CounterInput2({
   );
 });
 CounterInput.displayName = "CounterInput";
-var same = (a, b) => !!a && !!b && a.toDateString() === b.toDateString();
-var DatePicker = react.forwardRef(
-  function DatePicker2({ value, onChange, className, style, ...props }, ref) {
-    const { datePicker } = useLocale();
-    const initial = value ? new Date(value) : /* @__PURE__ */ new Date();
-    const [view, setView] = react.useState(
-      new Date(initial.getFullYear(), initial.getMonth(), 1)
-    );
-    const sel = value ? new Date(value) : null;
-    const y = view.getFullYear();
-    const m = view.getMonth();
-    const firstDay = (new Date(y, m, 1).getDay() + 6) % 7;
-    const daysInMonth = new Date(y, m + 1, 0).getDate();
-    const today = /* @__PURE__ */ new Date();
-    today.setHours(0, 0, 0, 0);
-    const cells = [];
-    for (let i = 0; i < firstDay; i++) cells.push(null);
-    for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-picker", className), style, ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-picker__header", children: [
+var Input = react.forwardRef(function Input2({
+  size: sizeProp,
+  leadingIcon,
+  trailingIcon,
+  leadingNode,
+  trailingNode,
+  error = false,
+  disabled = false,
+  readOnly = false,
+  loading = false,
+  clearable = false,
+  onClear,
+  className,
+  style,
+  ...props
+}, ref) {
+  const size = useSize(sizeProp);
+  const { input } = useLocale();
+  const innerRef = react.useRef(null);
+  const [hasValue, setHasValue] = react.useState(() => !!(props.value ?? props.defaultValue));
+  react.useEffect(() => {
+    if (props.value !== void 0) setHasValue(!!props.value);
+  }, [props.value]);
+  const setRef = (node) => {
+    innerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const showClear = clearable && hasValue && !disabled && !readOnly && !loading;
+  const clear = () => {
+    const node = innerRef.current;
+    if (node) {
+      node.value = "";
+      node.focus();
+    }
+    setHasValue(false);
+    onClear?.();
+    if (node) {
+      props.onChange?.({
+        ...{},
+        target: node,
+        currentTarget: node
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkTPGAXYFU_cjs.cx(
+        "klun-input",
+        `klun-input--${size}`,
+        error && "klun-input--error",
+        disabled && "klun-input--disabled",
+        readOnly && "klun-input--readonly",
+        className
+      ),
+      style,
+      children: [
+        leadingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__icon", children: leadingIcon }) : null,
+        leadingNode,
         /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: setRef,
+            className: "klun-input__field",
+            disabled,
+            readOnly,
+            ...props,
+            onChange: (e) => {
+              setHasValue(!!e.target.value);
+              props.onChange?.(e);
+            }
+          }
+        ),
+        showClear ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
-            className: "klun-date-picker__nav",
-            onClick: () => setView(new Date(y, m - 1, 1)),
-            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d: "M12 6l-4 4 4 4",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            ) })
+            className: "klun-input__clear",
+            onClick: clear,
+            "aria-label": input.clear,
+            children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-circle-fill" })
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-date-picker__title", children: fmt(datePicker.title, { month: datePicker.months[m], year: y }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        ) : null,
+        trailingNode,
+        loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__spinner", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "klun-input__spinner-svg", width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeDasharray: "44", strokeDashoffset: "31" })
+        ] }) }) : trailingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__icon", children: trailingIcon }) : null
+      ]
+    }
+  );
+});
+Input.displayName = "Input";
+var Popover = react.forwardRef(function Popover2({ trigger, children, align = "left", width = 280, className, ...props }, ref) {
+  const [open, setOpen] = react.useState(false);
+  const innerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) return;
+    const h = (e) => {
+      if (innerRef.current && !innerRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [open]);
+  const setRefs = (node) => {
+    innerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: setRefs, className: chunkTPGAXYFU_cjs.cx("klun-popover", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-popover__trigger", onClick: () => setOpen((o) => !o), children: trigger }),
+    open ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "dialog",
+        className: chunkTPGAXYFU_cjs.cx("klun-popover__panel", `klun-popover__panel--${align}`),
+        style: { width },
+        children: typeof children === "function" ? children(() => setOpen(false)) : children
+      }
+    ) : null
+  ] });
+});
+Popover.displayName = "Popover";
+var same = (a, b) => !!a && !!b && a.toDateString() === b.toDateString();
+var DEFAULT_FORMAT = {
+  year: "numeric",
+  month: "short",
+  day: "numeric"
+};
+var Calendar = react.forwardRef(function Calendar2({ value, onPick, className, style }, ref) {
+  const { datePicker } = useLocale();
+  const initial = value ? new Date(value) : /* @__PURE__ */ new Date();
+  const [view, setView] = react.useState(new Date(initial.getFullYear(), initial.getMonth(), 1));
+  const sel = value ? new Date(value) : null;
+  const y = view.getFullYear();
+  const m = view.getMonth();
+  const firstDay = (new Date(y, m, 1).getDay() + 6) % 7;
+  const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const cells = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-picker", className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-picker__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-date-picker__nav", onClick: () => setView(new Date(y, m - 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6l-4 4 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-date-picker__title", children: fmt(datePicker.title, { month: datePicker.months[m], year: y }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-date-picker__nav", onClick: () => setView(new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-picker__grid", children: [
+      datePicker.weekdaysShort.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-date-picker__weekday", children: d }, i)),
+      cells.map((date, i) => {
+        if (!date) return /* @__PURE__ */ jsxRuntime.jsx("span", {}, i);
+        return /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
-            className: "klun-date-picker__nav",
-            onClick: () => setView(new Date(y, m + 1, 1)),
-            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d: "M8 6l4 4-4 4",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            ) })
+            className: "klun-date-picker__day",
+            "data-selected": same(date, sel) || void 0,
+            "data-today": same(date, today) || void 0,
+            onClick: () => onPick(date),
+            children: date.getDate()
+          },
+          i
+        );
+      })
+    ] })
+  ] });
+});
+var DatePicker = react.forwardRef(
+  function DatePicker2({ value, onChange, inline, placeholder, format = DEFAULT_FORMAT, align = "left", disabled, className, style, ...props }, ref) {
+    if (inline) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Calendar, { ref, value, onPick: (d) => onChange?.(d), className, style });
+    }
+    const sel = value ? new Date(value) : null;
+    const label = sel ? sel.toLocaleDateString(void 0, format) : "";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-field", className), style, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        align,
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            readOnly: true,
+            disabled,
+            value: label,
+            placeholder: placeholder ?? "Select date",
+            leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-line" }),
+            trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-down-s-line" }),
+            style: { width: "100%", cursor: "pointer" }
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsxRuntime.jsx(
+          Calendar,
+          {
+            className: "klun-date-picker--bare",
+            value,
+            onPick: (d) => {
+              onChange?.(d);
+              close();
+            }
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-picker__grid", children: [
-        datePicker.weekdaysShort.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-date-picker__weekday", children: d }, i)),
-        cells.map((date, i) => {
-          if (!date) return /* @__PURE__ */ jsxRuntime.jsx("span", {}, i);
-          const isSel = same(date, sel);
-          const isToday = same(date, today);
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: "klun-date-picker__day",
-              "data-selected": isSel || void 0,
-              "data-today": isToday || void 0,
-              onClick: () => onChange?.(date),
-              children: date.getDate()
-            },
-            i
-          );
-        })
-      ] })
-    ] });
+      }
+    ) });
   }
 );
 DatePicker.displayName = "DatePicker";
 var norm = (d) => d && new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
-var DateRangePicker = react.forwardRef(
-  function DateRangePicker2({ start, end, onChange, className, style, ...props }, ref) {
-    const { datePicker } = useLocale();
-    const base = start ? new Date(start) : /* @__PURE__ */ new Date();
-    const [view, setView] = react.useState(
-      new Date(base.getFullYear(), base.getMonth(), 1)
-    );
-    const s = start ? new Date(start) : null;
-    const e = end ? new Date(end) : null;
-    const y = view.getFullYear();
-    const m = view.getMonth();
-    const firstDay = (new Date(y, m, 1).getDay() + 6) % 7;
-    const daysInMonth = new Date(y, m + 1, 0).getDate();
-    const cells = [];
-    for (let i = 0; i < firstDay; i++) cells.push(null);
-    for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
-    const pick = (d) => {
-      if (!s || s && e) return onChange?.({ start: d, end: null });
-      if (norm(d) < norm(s)) return onChange?.({ start: d, end: s });
-      onChange?.({ start: s, end: d });
-    };
-    const inRange = (d) => !!s && !!e && norm(d) > norm(s) && norm(d) < norm(e);
-    const isStart = (d) => !!s && norm(d) === norm(s);
-    const isEnd = (d) => !!e && norm(d) === norm(e);
-    const isEdge = (d) => isStart(d) || isEnd(d);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: chunkTPGAXYFU_cjs.cx("klun-date-range-picker", className),
-        style,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-range-picker__header", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: "klun-date-range-picker__nav",
-                onClick: () => setView(new Date(y, m - 1, 1)),
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    d: "M12 6l-4 4 4 4",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                ) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-date-range-picker__title", children: fmt(datePicker.title, { month: datePicker.months[m], year: y }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+var DEFAULT_FORMAT2 = { month: "short", day: "numeric" };
+var RangeCalendar = react.forwardRef(function RangeCalendar2({ start, end, onPick, className, style }, ref) {
+  const { datePicker } = useLocale();
+  const base = start ? new Date(start) : /* @__PURE__ */ new Date();
+  const [view, setView] = react.useState(new Date(base.getFullYear(), base.getMonth(), 1));
+  const s = start ? new Date(start) : null;
+  const e = end ? new Date(end) : null;
+  const y = view.getFullYear();
+  const m = view.getMonth();
+  const firstDay = (new Date(y, m, 1).getDay() + 6) % 7;
+  const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const cells = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
+  const pick = (d) => {
+    if (!s || s && e) return onPick({ start: d, end: null });
+    if (norm(d) < norm(s)) return onPick({ start: d, end: s });
+    onPick({ start: s, end: d });
+  };
+  const inRange = (d) => !!s && !!e && norm(d) > norm(s) && norm(d) < norm(e);
+  const isStart = (d) => !!s && norm(d) === norm(s);
+  const isEnd = (d) => !!e && norm(d) === norm(e);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-range-picker", className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-range-picker__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-date-range-picker__nav", onClick: () => setView(new Date(y, m - 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6l-4 4 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-date-range-picker__title", children: fmt(datePicker.title, { month: datePicker.months[m], year: y }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-date-range-picker__nav", onClick: () => setView(new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-range-picker__grid", children: [
+      datePicker.weekdaysShort.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-date-range-picker__weekday", children: d }, i)),
+      cells.map((date, i) => {
+        if (!date) return /* @__PURE__ */ jsxRuntime.jsx("span", {}, i);
+        const mid = inRange(date);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "klun-date-range-picker__cell",
+            "data-in-range": mid || void 0,
+            "data-range-edge": isStart(date) || isEnd(date) || void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
-                className: "klun-date-range-picker__nav",
-                onClick: () => setView(new Date(y, m + 1, 1)),
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    d: "M8 6l4 4-4 4",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                ) })
+                className: "klun-date-range-picker__day",
+                "data-range-start": isStart(date) || void 0,
+                "data-range-end": isEnd(date) || void 0,
+                "data-in-range": mid || void 0,
+                onClick: () => pick(date),
+                children: date.getDate()
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-date-range-picker__grid", children: [
-            datePicker.weekdaysShort.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-date-range-picker__weekday", children: d }, i)),
-            cells.map((date, i) => {
-              if (!date) return /* @__PURE__ */ jsxRuntime.jsx("span", {}, i);
-              const edge = isEdge(date);
-              const mid = inRange(date);
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "klun-date-range-picker__cell",
-                  "data-in-range": mid || void 0,
-                  "data-range-edge": edge || void 0,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: "klun-date-range-picker__day",
-                      "data-range-start": isStart(date) || void 0,
-                      "data-range-end": isEnd(date) || void 0,
-                      "data-in-range": mid || void 0,
-                      onClick: () => pick(date),
-                      children: date.getDate()
-                    }
-                  )
-                },
-                i
-              );
-            })
-          ] })
-        ]
+          },
+          i
+        );
+      })
+    ] })
+  ] });
+});
+var DateRangePicker = react.forwardRef(
+  function DateRangePicker2({ start, end, onChange, inline, placeholder, format = DEFAULT_FORMAT2, align = "left", disabled, className, style, ...props }, ref) {
+    if (inline) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        RangeCalendar,
+        {
+          ref,
+          start,
+          end,
+          onPick: (r) => onChange?.(r),
+          className,
+          style
+        }
+      );
+    }
+    const f = (d) => d ? new Date(d).toLocaleDateString(void 0, format) : "";
+    const label = start || end ? `${f(start)} \u2013 ${f(end)}` : "";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-date-range-field", className), style, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        align,
+        width: 300,
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            readOnly: true,
+            disabled,
+            value: label,
+            placeholder: placeholder ?? "Select range",
+            leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-2-line" }),
+            trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-down-s-line" }),
+            style: { width: "100%", cursor: "pointer" }
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsxRuntime.jsx(
+          RangeCalendar,
+          {
+            className: "klun-date-range-picker--bare",
+            start,
+            end,
+            onPick: (r) => {
+              onChange?.(r);
+              if (r.start && r.end) close();
+            }
+          }
+        )
       }
-    );
+    ) });
   }
 );
 DateRangePicker.displayName = "DateRangePicker";
@@ -7538,100 +7667,6 @@ var InlineSelect = react.forwardRef(
   }
 );
 InlineSelect.displayName = "InlineSelect";
-var Input = react.forwardRef(function Input2({
-  size: sizeProp,
-  leadingIcon,
-  trailingIcon,
-  leadingNode,
-  trailingNode,
-  error = false,
-  disabled = false,
-  readOnly = false,
-  loading = false,
-  clearable = false,
-  onClear,
-  className,
-  style,
-  ...props
-}, ref) {
-  const size = useSize(sizeProp);
-  const { input } = useLocale();
-  const innerRef = react.useRef(null);
-  const [hasValue, setHasValue] = react.useState(() => !!(props.value ?? props.defaultValue));
-  react.useEffect(() => {
-    if (props.value !== void 0) setHasValue(!!props.value);
-  }, [props.value]);
-  const setRef = (node) => {
-    innerRef.current = node;
-    if (typeof ref === "function") ref(node);
-    else if (ref) ref.current = node;
-  };
-  const showClear = clearable && hasValue && !disabled && !readOnly && !loading;
-  const clear = () => {
-    const node = innerRef.current;
-    if (node) {
-      node.value = "";
-      node.focus();
-    }
-    setHasValue(false);
-    onClear?.();
-    if (node) {
-      props.onChange?.({
-        ...{},
-        target: node,
-        currentTarget: node
-      });
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: chunkTPGAXYFU_cjs.cx(
-        "klun-input",
-        `klun-input--${size}`,
-        error && "klun-input--error",
-        disabled && "klun-input--disabled",
-        readOnly && "klun-input--readonly",
-        className
-      ),
-      style,
-      children: [
-        leadingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__icon", children: leadingIcon }) : null,
-        leadingNode,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref: setRef,
-            className: "klun-input__field",
-            disabled,
-            readOnly,
-            ...props,
-            onChange: (e) => {
-              setHasValue(!!e.target.value);
-              props.onChange?.(e);
-            }
-          }
-        ),
-        showClear ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "klun-input__clear",
-            onClick: clear,
-            "aria-label": input.clear,
-            children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-circle-fill" })
-          }
-        ) : null,
-        trailingNode,
-        loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__spinner", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "klun-input__spinner-svg", width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2.5" }),
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeDasharray: "44", strokeDashoffset: "31" })
-        ] }) }) : trailingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-input__icon", children: trailingIcon }) : null
-      ]
-    }
-  );
-});
-Input.displayName = "Input";
 var Label = react.forwardRef(function Label2({ children, required = false, sublabel, disabled = false, className, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
@@ -9975,36 +10010,6 @@ var Popconfirm = react.forwardRef(function Popconfirm2({
   ] });
 });
 Popconfirm.displayName = "Popconfirm";
-var Popover = react.forwardRef(function Popover2({ trigger, children, align = "left", width = 280, className, ...props }, ref) {
-  const [open, setOpen] = react.useState(false);
-  const innerRef = react.useRef(null);
-  react.useEffect(() => {
-    if (!open) return;
-    const h = (e) => {
-      if (innerRef.current && !innerRef.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", h);
-    return () => document.removeEventListener("mousedown", h);
-  }, [open]);
-  const setRefs = (node) => {
-    innerRef.current = node;
-    if (typeof ref === "function") ref(node);
-    else if (ref) ref.current = node;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref: setRefs, className: chunkTPGAXYFU_cjs.cx("klun-popover", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-popover__trigger", onClick: () => setOpen((o) => !o), children: trigger }),
-    open ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        role: "dialog",
-        className: chunkTPGAXYFU_cjs.cx("klun-popover__panel", `klun-popover__panel--${align}`),
-        style: { width },
-        children: typeof children === "function" ? children(() => setOpen(false)) : children
-      }
-    ) : null
-  ] });
-});
-Popover.displayName = "Popover";
 
 exports.Accordion = Accordion;
 exports.Alert = Alert;
@@ -10148,5 +10153,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-FTYQRXS5.cjs.map
-//# sourceMappingURL=chunk-FTYQRXS5.cjs.map
+//# sourceMappingURL=chunk-2MTDM5CL.cjs.map
+//# sourceMappingURL=chunk-2MTDM5CL.cjs.map