@mari-ui/components 0.0.0-stage → 0.1.0

package/dist/chunk-P7Z5BREP.js

@@ -0,0 +1,935 @@
+"use client";
+
+import {
+  SelectPanel,
+  foldForSearch,
+  optionDomId
+} from "./chunk-YZ7MDC6B.js";
+import {
+  ClearButton,
+  PasswordToggle,
+  clearIconOf
+} from "./chunk-KSPM2Z3T.js";
+import {
+  FIELD_BASE_CLASS,
+  FIELD_DISABLED_CLASS,
+  FIELD_MOBILE_TEXT_CLASS,
+  clearNativeValue,
+  getShapeClasses,
+  getSizeClasses,
+  getTextareaSizeClasses,
+  getVariantClasses,
+  isClearable
+} from "./chunk-DUCIAQGR.js";
+import {
+  FieldContext,
+  useFieldControl,
+  useFieldGroup,
+  useFieldSkeleton
+} from "./chunk-LBQMEHK6.js";
+import {
+  touchTargetClass
+} from "./chunk-FFXRFQSU.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/input/Input.tsx
+import React, { forwardRef, useState as useState2 } from "react";
+import { InputMask } from "@react-input/mask";
+import { cn, useControllableState } from "@mari-ui/core";
+
+// src/input/mention/useMention.tsx
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+
+// src/input/mention/caret.ts
+var MIRROR_PROPS = [
+  "boxSizing",
+  "width",
+  "height",
+  "overflowX",
+  "overflowY",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "fontStretch",
+  "fontSize",
+  "lineHeight",
+  "fontFamily",
+  "textAlign",
+  "textTransform",
+  "textIndent",
+  "letterSpacing",
+  "wordSpacing",
+  "tabSize"
+];
+function getCaretRect(el, position) {
+  const style = getComputedStyle(el);
+  const mirror = document.createElement("div");
+  const isInput = el.nodeName === "INPUT";
+  for (const prop of MIRROR_PROPS) mirror.style[prop] = style[prop];
+  Object.assign(mirror.style, {
+    position: "absolute",
+    visibility: "hidden",
+    top: "0",
+    left: "-9999px",
+    whiteSpace: isInput ? "pre" : "pre-wrap",
+    overflowWrap: "break-word",
+    overflow: "hidden"
+  });
+  mirror.textContent = el.value.slice(0, position);
+  const marker = document.createElement("span");
+  marker.textContent = el.value.slice(position) || ".";
+  mirror.appendChild(marker);
+  document.body.appendChild(mirror);
+  const rect = el.getBoundingClientRect();
+  const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.25;
+  const top = rect.top + marker.offsetTop + Number.parseFloat(style.borderTopWidth) - el.scrollTop;
+  const left = rect.left + marker.offsetLeft + Number.parseFloat(style.borderLeftWidth) - el.scrollLeft;
+  mirror.remove();
+  return { top, left: Math.min(left, rect.right), height: lineHeight };
+}
+
+// src/input/mention/utils.ts
+var isSpace = (ch) => ch !== void 0 && /\s/.test(ch);
+function findMention(text, caret, prefixes) {
+  const before = text.slice(0, caret);
+  let best = null;
+  for (const prefix of prefixes) {
+    const start = before.lastIndexOf(prefix);
+    if (start === -1) continue;
+    if (start > 0 && !isSpace(before[start - 1])) continue;
+    const query = before.slice(start + prefix.length);
+    if (/\s/.test(query)) continue;
+    if (!best || start > best.start) best = { prefix, start, query };
+  }
+  return best;
+}
+function insertMention(text, match, caret, value, split) {
+  const head = text.slice(0, match.start) + match.prefix + value;
+  const tail = text.slice(caret);
+  const sep = split && !tail.startsWith(split) ? split : "";
+  return { text: head + sep + tail, caret: head.length + (split ? split.length : 0) };
+}
+function mentionText(option) {
+  if (option.searchText !== void 0) return option.searchText;
+  const label = typeof option.label === "string" ? option.label : "";
+  return `${option.value} ${label}`;
+}
+function filterMentionOptions(options, query, filterOption) {
+  if (filterOption === false) return [...options];
+  if (filterOption) return options.filter((o) => filterOption(query, o));
+  const q = foldForSearch(query);
+  return q ? options.filter((o) => foldForSearch(mentionText(o)).includes(q)) : [...options];
+}
+
+// src/input/mention/useMention.tsx
+import { jsx } from "react/jsx-runtime";
+var GAP_PX = 4;
+var EDGE_PX = 8;
+var PANEL_WIDTH_REM = 16;
+var toSelectOption = (o) => ({ value: o.value, label: o.label ?? o.value, icon: o.icon, description: o.description, disabled: o.disabled });
+function setNativeValue(el, text) {
+  const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  Object.getOwnPropertyDescriptor(proto, "value")?.set?.call(el, text);
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function nextEnabled(options, from, step) {
+  const n = options.length;
+  for (let i = 1; i <= n; i++) {
+    const idx = ((from + step * i) % n + n) % n;
+    if (!options[idx].disabled) return idx;
+  }
+  return -1;
+}
+function resolveOptions(config, match) {
+  if (!config || !match) return [];
+  const all = typeof config.options === "function" ? config.options(match.prefix) : config.options;
+  return filterMentionOptions(all, match.query, config.filterOption);
+}
+function useCaretPosition(open, elRef, panelRef, match, deps) {
+  const [coords, setCoords] = useState(null);
+  useLayoutEffect(() => {
+    if (!open || !match) {
+      setCoords(null);
+      return;
+    }
+    const measure = () => {
+      const el = elRef.current;
+      const panel = panelRef.current;
+      if (!el) return;
+      const caret = getCaretRect(el, match.start);
+      const width = panel?.offsetWidth ?? 0;
+      const height = panel?.offsetHeight ?? 0;
+      let top = caret.top + caret.height + GAP_PX;
+      if (top + height > window.innerHeight - EDGE_PX && caret.top - GAP_PX - height > EDGE_PX) top = caret.top - GAP_PX - height;
+      const left = Math.max(EDGE_PX, Math.min(caret.left, window.innerWidth - width - EDGE_PX));
+      setCoords({ top, left, side: "bottom", arrowOffset: 0, anchorWidth: PANEL_WIDTH_REM * Number.parseFloat(getComputedStyle(document.documentElement).fontSize) });
+    };
+    measure();
+    const raf = requestAnimationFrame(measure);
+    window.addEventListener("scroll", measure, true);
+    window.addEventListener("resize", measure);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("scroll", measure, true);
+      window.removeEventListener("resize", measure);
+    };
+  }, [open, match?.start, match?.prefix, deps]);
+  return coords;
+}
+function useMention(config, elRef, value, kind) {
+  const enabled = config !== void 0;
+  const prefixes = useMemo(() => {
+    const p = config?.prefix ?? "@";
+    return Array.isArray(p) ? p : [p];
+  }, [config?.prefix]);
+  const split = config?.split ?? " ";
+  const [match, setMatch] = useState(null);
+  const [dismissedAt, setDismissedAt] = useState(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const panelRef = useRef(null);
+  const listboxId = useId();
+  const lastQuery = useRef(null);
+  const options = useMemo(() => resolveOptions(config, match), [config, match]);
+  const notFound = config?.notFoundContent === void 0 ? "Sonu\xE7 bulunamad\u0131" : config.notFoundContent;
+  const open = enabled && match !== null && dismissedAt !== match.start && (options.length > 0 || !!config?.loading || notFound !== null);
+  const selectOptions = useMemo(() => options.map(toSelectOption), [options]);
+  const coords = useCaretPosition(open, elRef, panelRef, match, options.length);
+  const sync = () => {
+    const el = elRef.current;
+    if (!enabled || !el) return;
+    const caret = el.selectionStart;
+    const next = caret !== null && caret === el.selectionEnd ? findMention(el.value, caret, prefixes) : null;
+    setMatch((prev) => prev?.start === next?.start && prev?.query === next?.query && prev?.prefix === next?.prefix ? prev : next);
+    if (!next) setDismissedAt(null);
+  };
+  useEffect(sync, [value, enabled]);
+  useEffect(() => {
+    setActiveIndex(0);
+    const key = match ? `${match.prefix}${match.start}:${match.query}` : null;
+    if (match && key !== lastQuery.current) config?.onSearch?.(match.query, match.prefix);
+    lastQuery.current = key;
+  }, [match]);
+  const activeId = open && options[activeIndex] ? optionDomId(listboxId, selectOptions[activeIndex]) : void 0;
+  useEffect(() => {
+    if (activeId) document.getElementById(activeId)?.scrollIntoView?.({ block: "nearest" });
+  }, [activeId]);
+  const choose = (option) => {
+    const el = elRef.current;
+    if (!el || !match || option.disabled) return;
+    const caret = el.selectionStart ?? el.value.length;
+    const result = insertMention(el.value, match, caret, option.value, split);
+    setNativeValue(el, result.text);
+    el.setSelectionRange(result.caret, result.caret);
+    requestAnimationFrame(() => el.setSelectionRange(result.caret, result.caret));
+    setMatch(null);
+    config?.onSelect?.(option, match.prefix);
+  };
+  const handleKeyDown = (e) => {
+    if (!open || !match) return false;
+    const active = options[activeIndex];
+    switch (e.key) {
+      case "ArrowDown":
+      case "ArrowUp": {
+        e.preventDefault();
+        if (options.length) setActiveIndex((i) => Math.max(0, nextEnabled(options, i, e.key === "ArrowDown" ? 1 : -1)));
+        return true;
+      }
+      case "Enter":
+      case "Tab":
+        if (!active || active.disabled) return false;
+        e.preventDefault();
+        choose(active);
+        return true;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        setDismissedAt(match.start);
+        return true;
+      default:
+        return false;
+    }
+  };
+  const controlProps = enabled ? {
+    ...kind === "input" ? { role: "combobox", "aria-expanded": open } : {},
+    "aria-autocomplete": "list",
+    "aria-controls": open ? listboxId : void 0,
+    "aria-activedescendant": activeId,
+    onKeyUp: (e) => {
+      if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) sync();
+    },
+    onClick: sync
+  } : {};
+  const panel = open ? /* @__PURE__ */ jsx(
+    SelectPanel,
+    {
+      ref: panelRef,
+      listboxId,
+      coords,
+      sections: [{ key: "mentions", options: selectOptions }],
+      flatOptions: selectOptions,
+      activeIndex,
+      isSelected: () => false,
+      multiple: false,
+      loading: !!config?.loading,
+      notFoundContent: notFound,
+      listHeight: config?.listHeight ?? "14rem",
+      label: config?.listLabel ?? "\xD6neriler",
+      onPick: (o) => {
+        const option = options.find((m) => m.value === o.value);
+        if (option) choose(option);
+      },
+      onHover: setActiveIndex
+    }
+  ) : null;
+  return { controlProps, panel, handleKeyDown, close: () => setMatch(null) };
+}
+
+// src/input/Input.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Input = forwardRef((outerProps, ref) => {
+  return /* @__PURE__ */ jsx2(InputInner, { ...useFieldControl(outerProps), forwardedRef: ref });
+});
+Input.displayName = "Input";
+var InputInner = ({
+  forwardedRef: ref,
+  placeholder,
+  allowClear = false,
+  clearLabel = "Temizle",
+  skeleton = false,
+  classNames = {},
+  className = "",
+  style,
+  count,
+  defaultValue = "",
+  disabled = false,
+  id,
+  maxLength,
+  icon,
+  iconPosition = "start",
+  showCount,
+  color,
+  size = "md",
+  shape = "default",
+  type = "text",
+  value,
+  variant = "outline",
+  onChange,
+  onPressEnter,
+  onClear,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  onInput,
+  onPaste,
+  mask,
+  replacement = { _: /\d/ },
+  visibilityToggle,
+  visibilityIconRender,
+  max,
+  min,
+  mentions,
+  ...nativeProps
+}) => {
+  const innerRef = React.useRef(null);
+  const setRefs = (el) => {
+    innerRef.current = el;
+    if (typeof ref === "function") ref(el);
+    else if (ref) ref.current = el;
+  };
+  const ariaInvalid = nativeProps["aria-invalid"] ?? (color === "error" || void 0);
+  const [currentValue, setCurrentValue] = useControllableState({ value, defaultValue });
+  const [passwordVisible, setPasswordVisible] = useState2(false);
+  const showPasswordToggle = type === "password" && visibilityToggle !== false;
+  let inputType = type;
+  if (showPasswordToggle) inputType = passwordVisible ? "text" : "password";
+  const charCount = currentValue.length;
+  const countLabel = maxLength ? `${charCount} / ${maxLength}` : `${charCount}`;
+  const showClear = isClearable(allowClear) && Boolean(currentValue) && !disabled;
+  const handleChange = (e) => {
+    setCurrentValue(e.target.value);
+    onChange?.(e);
+  };
+  const mention = useMention(mask ? void 0 : mentions, innerRef, currentValue, "input");
+  const handleKeyDown = (e) => {
+    const handledByMention = mention.handleKeyDown(e);
+    if (e.key === "Enter" && !handledByMention) onPressEnter?.(e);
+    onKeyDown?.(e);
+  };
+  const handleClear = () => {
+    clearNativeValue(innerRef.current);
+    onClear?.();
+    innerRef.current?.focus();
+  };
+  const geometryClass = cn("flex w-full items-center gap-2", getSizeClasses(size), getShapeClasses(shape, variant));
+  if (skeleton) {
+    return /* @__PURE__ */ jsx2("div", { ...skeletonBoxProps(cn(geometryClass, classNames.wrapper, className)), style });
+  }
+  const wrapperClass = cn(
+    geometryClass,
+    "group relative cursor-text",
+    touchTargetClass[size],
+    FIELD_BASE_CLASS,
+    getVariantClasses(variant, color),
+    disabled && FIELD_DISABLED_CLASS,
+    classNames.wrapper,
+    className
+  );
+  const adornmentClass = "flex shrink-0 items-center text-mari-muted";
+  const handleWrapperMouseDown = (e) => {
+    const target = e.target;
+    if (disabled || innerRef.current?.contains(target) || target.closest("button")) return;
+    e.preventDefault();
+    innerRef.current?.focus();
+  };
+  const inputClass = cn("w-full min-w-0 flex-grow bg-transparent placeholder:text-mari-muted focus:outline-none disabled:cursor-not-allowed", FIELD_MOBILE_TEXT_CLASS, classNames.input);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: wrapperClass, style, onMouseDown: handleWrapperMouseDown, children: [
+      icon && iconPosition === "start" && /* @__PURE__ */ jsx2("span", { className: cn(adornmentClass, classNames.icon), children: icon }),
+      mask ? /* @__PURE__ */ jsx2(
+        InputMask,
+        {
+          ref: setRefs,
+          id,
+          mask,
+          replacement,
+          disabled,
+          type: inputType,
+          maxLength,
+          placeholder,
+          value: currentValue,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          onFocus,
+          onBlur,
+          onInput,
+          onPaste,
+          className: inputClass,
+          ...nativeProps,
+          "aria-invalid": ariaInvalid
+        }
+      ) : /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref: setRefs,
+          id,
+          disabled,
+          type: inputType,
+          maxLength,
+          placeholder,
+          value: currentValue,
+          ...mention.controlProps,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          onFocus,
+          onBlur: (e) => {
+            mention.close();
+            onBlur?.(e);
+          },
+          onInput,
+          onPaste,
+          className: inputClass,
+          max,
+          min,
+          ...nativeProps,
+          "aria-invalid": ariaInvalid
+        }
+      ),
+      allowClear && /* @__PURE__ */ jsx2(ClearButton, { visible: showClear, label: clearLabel, icon: clearIconOf(allowClear), onClear: handleClear, className: classNames.clear }),
+      (showCount || count?.formatter) && /* @__PURE__ */ jsx2("span", { className: cn("flex flex-none items-center text-xs tabular-nums text-mari-muted", classNames.count), children: count?.formatter ? count.formatter({ value: currentValue, count: charCount, maxLength }) : countLabel }),
+      icon && iconPosition === "end" && /* @__PURE__ */ jsx2("span", { className: cn(adornmentClass, classNames.icon), children: icon }),
+      showPasswordToggle && /* @__PURE__ */ jsx2(PasswordToggle, { visible: passwordVisible, disabled, onToggle: () => setPasswordVisible((prev) => !prev), iconRender: visibilityIconRender })
+    ] }),
+    mention.panel
+  ] });
+};
+
+// src/input/Textarea.tsx
+import { forwardRef as forwardRef2, useEffect as useEffect2, useImperativeHandle, useRef as useRef2 } from "react";
+import { cn as cn2, useControllableState as useControllableState2 } from "@mari-ui/core";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function fitHeight(el, autoSize) {
+  const style = window.getComputedStyle(el);
+  const lineHeight = Number.parseFloat(style.lineHeight) || 20;
+  const padding = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+  const { minRows, maxRows } = typeof autoSize === "object" ? autoSize : {};
+  el.style.height = "auto";
+  let height = el.scrollHeight;
+  if (minRows) height = Math.max(height, minRows * lineHeight + padding);
+  if (maxRows) height = Math.min(height, maxRows * lineHeight + padding);
+  el.style.height = `${height}px`;
+  el.style.overflowY = maxRows && el.scrollHeight > height ? "auto" : "hidden";
+}
+var Textarea = forwardRef2((outerProps, ref) => {
+  return /* @__PURE__ */ jsx3(TextareaInner, { ...useFieldControl(outerProps), forwardedRef: ref });
+});
+Textarea.displayName = "Textarea";
+var TextareaInner = ({
+  forwardedRef: ref,
+  placeholder,
+  allowClear = false,
+  clearLabel = "Temizle",
+  skeleton = false,
+  rows = 3,
+  readOnly,
+  onKeyDown,
+  classNames = {},
+  className = "",
+  count,
+  defaultValue = "",
+  disabled = false,
+  id,
+  maxLength,
+  showCount,
+  color,
+  size = "md",
+  shape = "default",
+  variant = "outline",
+  value,
+  onChange,
+  onClear,
+  onFocus,
+  onBlur,
+  autoSize = false,
+  name,
+  required,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalidProp,
+  mentions
+}) => {
+  const ariaInvalid = ariaInvalidProp ?? (color === "error" || void 0);
+  const innerRef = useRef2(null);
+  useImperativeHandle(ref, () => innerRef.current);
+  const [currentValue, setCurrentValue] = useControllableState2({ value, defaultValue });
+  const charCount = currentValue.length;
+  const countLabel = maxLength ? `${charCount} / ${maxLength}` : `${charCount}`;
+  const showClear = isClearable(allowClear) && Boolean(currentValue) && !disabled;
+  const mention = useMention(mentions, innerRef, currentValue, "textarea");
+  const handleChange = (e) => {
+    setCurrentValue(e.target.value);
+    onChange?.(e);
+  };
+  const handleClear = () => {
+    clearNativeValue(innerRef.current);
+    onClear?.();
+    innerRef.current?.focus();
+  };
+  const initialRows = typeof autoSize === "object" && autoSize.minRows ? autoSize.minRows : rows;
+  const autoSizeKey = typeof autoSize === "object" ? `${autoSize.minRows}-${autoSize.maxRows}` : String(autoSize);
+  useEffect2(() => {
+    if (autoSize && innerRef.current) fitHeight(innerRef.current, autoSize);
+  }, [currentValue, autoSizeKey]);
+  const geometryClass = cn2("flex w-full items-start gap-2", getTextareaSizeClasses(size), getShapeClasses(shape, variant));
+  const textareaClass = cn2(
+    "w-full bg-transparent placeholder:text-mari-muted focus:outline-none disabled:cursor-not-allowed",
+    autoSize ? "resize-none" : "resize-y",
+    FIELD_MOBILE_TEXT_CLASS,
+    classNames.input
+  );
+  if (skeleton) {
+    return /* @__PURE__ */ jsx3("div", { ...skeletonBoxProps(cn2(geometryClass, classNames.wrapper, className)), children: /* @__PURE__ */ jsx3("textarea", { tabIndex: -1, rows: initialRows, className: cn2(textareaClass, "invisible resize-none") }) });
+  }
+  const wrapperClass = cn2(
+    geometryClass,
+    FIELD_BASE_CLASS,
+    getVariantClasses(variant, color),
+    disabled && FIELD_DISABLED_CLASS,
+    classNames.wrapper,
+    className
+  );
+  return (
+    // `w-full`: Input gibi kapsayıcısını doldurur — `items-start`lı bir flex sütununda (Field) büzülüyordu.
+    /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs2("div", { className: wrapperClass, children: [
+        /* @__PURE__ */ jsx3(
+          "textarea",
+          {
+            id,
+            ref: innerRef,
+            value: currentValue,
+            onChange: handleChange,
+            ...mention.controlProps,
+            onFocus,
+            onBlur: (e) => {
+              mention.close();
+              onBlur?.(e);
+            },
+            onKeyDown: (e) => {
+              mention.handleKeyDown(e);
+              onKeyDown?.(e);
+            },
+            readOnly,
+            rows: initialRows,
+            placeholder,
+            maxLength,
+            disabled,
+            name,
+            required,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "aria-invalid": ariaInvalid,
+            className: textareaClass
+          }
+        ),
+        allowClear && /* @__PURE__ */ jsx3(ClearButton, { visible: showClear, label: clearLabel, icon: clearIconOf(allowClear), onClear: handleClear, className: classNames.clear })
+      ] }),
+      (showCount || count?.formatter) && /* @__PURE__ */ jsx3("span", { className: cn2("flex flex-none items-center justify-end text-xs tabular-nums", maxLength && charCount >= maxLength ? "text-mari-error" : "text-mari-muted", classNames.count), children: count?.formatter ? count.formatter({ value: currentValue, count: charCount, maxLength }) : countLabel }),
+      mention.panel
+    ] })
+  );
+};
+
+// src/input/OtpInput.tsx
+import React4, { useContext, useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
+import { cn as cn4 } from "@mari-ui/core";
+
+// src/input/_components/OtpSingleField.tsx
+import React3, { useRef as useRef3, useState as useState3 } from "react";
+import { cn as cn3, useControllableState as useControllableState3 } from "@mari-ui/core";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var BOX_CLASS = { sm: "h-8 px-2.5 gap-1", md: "h-10 px-3 gap-1.5", lg: "h-12 px-4 gap-2" };
+var SLOT_CLASS = { sm: "w-4 text-sm", md: "w-5 text-base", lg: "w-6 text-xl" };
+function OtpSingleField({
+  length,
+  value,
+  defaultValue,
+  disabled,
+  size,
+  shape,
+  variant,
+  color,
+  onChange,
+  onInput,
+  display,
+  separator,
+  className,
+  ariaLabel,
+  id,
+  describedBy,
+  required,
+  inputMode,
+  skeleton,
+  linePosition
+}) {
+  const [code, setCode] = useControllableState3({ value, defaultValue: defaultValue.slice(0, length) });
+  const [focused, setFocused] = useState3(false);
+  const inputRef = useRef3(null);
+  const boxClass = cn3("relative inline-flex w-fit max-w-full items-center", BOX_CLASS[size], getShapeClasses(shape, variant));
+  if (skeleton) {
+    return /* @__PURE__ */ jsx4("div", { ...skeletonBoxProps(cn3(boxClass, className)), children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx4("span", { className: SLOT_CLASS[size] }, i)) });
+  }
+  const handleChange = (e) => {
+    let next = e.target.value.replace(/\s/g, "");
+    if (inputMode === "numeric") next = next.replace(/\D/g, "");
+    next = next.slice(0, length);
+    setCode(next);
+    onInput?.(Array.from({ length }, (_, i) => next[i] ?? ""));
+    if (next.length === length) onChange?.(next);
+  };
+  const keepCaretAtEnd = (e) => {
+    const el = e.currentTarget;
+    const end = el.value.length;
+    if (el.selectionStart !== end || el.selectionEnd !== end) el.setSelectionRange(end, end);
+  };
+  const activeIndex = Math.min(code.length, length - 1);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn3(
+        boxClass,
+        FIELD_BASE_CLASS,
+        getVariantClasses(variant, color),
+        touchTargetClass[size],
+        disabled && FIELD_DISABLED_CLASS,
+        className
+      ),
+      children: [
+        Array.from({ length }, (_, i) => {
+          const char = code[i];
+          const isActive = focused && i === activeIndex;
+          const showLine = linePosition === "bottom" || !char && !isActive;
+          return /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
+            /* @__PURE__ */ jsxs3(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn3(
+                  "relative flex h-full items-center justify-center font-medium tabular-nums text-mari-foreground",
+                  SLOT_CLASS[size],
+                  showLine && "after:absolute after:inset-x-0.5 after:h-px after:bg-mari-input",
+                  showLine && (linePosition === "bottom" ? "after:bottom-[18%]" : "after:top-1/2 after:-translate-y-1/2"),
+                  showLine && isActive && "after:bg-mari-primary"
+                ),
+                children: [
+                  char ? display(char) : null,
+                  isActive && code.length < length && // `key`: her yazışta animasyon baştan başlar — yazarken imleç
+                  // hep görünür, durunca yanıp söner (gerçek imleç davranışı).
+                  /* @__PURE__ */ jsx4(
+                    "span",
+                    {
+                      className: "absolute h-[45%] w-px bg-mari-foreground animate-[mari-caret-blink_1.06s_step-end_infinite] motion-reduce:animate-none"
+                    },
+                    code.length
+                  )
+                ]
+              }
+            ),
+            separator && i < length - 1 && /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "px-0.5 text-mari-muted", children: typeof separator === "function" ? separator(i) : separator })
+          ] }, i);
+        }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            ref: inputRef,
+            value: code,
+            onChange: handleChange,
+            onFocus: (e) => {
+              setFocused(true);
+              keepCaretAtEnd(e);
+            },
+            onBlur: () => setFocused(false),
+            onSelect: keepCaretAtEnd,
+            disabled,
+            id,
+            required,
+            "aria-label": ariaLabel,
+            "aria-describedby": describedBy,
+            "aria-invalid": color === "error" || void 0,
+            inputMode,
+            autoComplete: "one-time-code",
+            spellCheck: false,
+            className: "absolute inset-0 h-full w-full cursor-text bg-transparent text-base text-transparent caret-transparent outline-none selection:bg-transparent disabled:cursor-not-allowed"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/input/OtpInput.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var WIDTH_CLASS = { sm: "w-6 p-0", md: "w-8 p-0", lg: "w-10 p-0" };
+function resolveDisplayValue(rawValue, formatter, mask) {
+  if (formatter) return formatter(rawValue);
+  if (mask && rawValue) return "\u2022";
+  return rawValue;
+}
+function OtpInput({
+  length = 6,
+  value,
+  defaultValue = "",
+  disabled = false,
+  size = "md",
+  shape = "default",
+  variant = "outline",
+  color,
+  onChange,
+  onInput,
+  mask = false,
+  formatter,
+  separator,
+  className,
+  "aria-label": ariaLabelProp,
+  inputMode = "numeric",
+  skeleton: ownSkeleton,
+  layout = "separated",
+  linePosition = "center"
+}) {
+  const inField = useContext(FieldContext) !== null;
+  const group = useFieldGroup({ "aria-label": ariaLabelProp, disabled }, layout === "separated");
+  const skeleton = useFieldSkeleton(ownSkeleton);
+  const control = useFieldControl({ disabled, color });
+  const ariaLabel = ariaLabelProp ?? (inField ? void 0 : "Do\u011Frulama kodu");
+  const [otpValues, setOtpValues] = useState4(Array.from({ length }, (_, i) => value?.[i] ?? defaultValue[i] ?? ""));
+  const inputsRef = useRef4([]);
+  const focusInput = (index) => {
+    const input = inputsRef.current[index];
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  };
+  const handleInput = (i, rawValue) => {
+    const shown = resolveDisplayValue(otpValues[i] ?? "", formatter, mask);
+    let text = rawValue.replace(/\s/g, "");
+    if (shown && text.length === shown.length + 1) text = text.startsWith(shown) ? text.slice(shown.length) : text.slice(0, 1);
+    const chars = text.split("");
+    const updated = [...otpValues];
+    for (let j = 0; j < chars.length; j++) {
+      if (i + j < length) updated[i + j] = chars[j] ?? "";
+    }
+    setOtpValues(updated);
+    onInput?.(updated);
+    if (!updated.includes("")) onChange?.(updated.join(""));
+    focusInput(Math.min(i + chars.length, length - 1));
+  };
+  const handleKeyDown = (e, i) => {
+    const input = e.currentTarget;
+    const cursorAtStart = input.selectionStart === 0;
+    const cursorAtEnd = input.selectionStart === input.value.length;
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      const updated = [...otpValues];
+      if (otpValues[i]) {
+        updated[i] = "";
+        setOtpValues(updated);
+        onInput?.(updated);
+        focusInput(i);
+      } else if (i > 0) {
+        updated[i - 1] = "";
+        setOtpValues(updated);
+        onInput?.(updated);
+        focusInput(i - 1);
+      }
+    }
+    if (e.key === "ArrowLeft" && cursorAtStart && i > 0) {
+      e.preventDefault();
+      focusInput(i - 1);
+    }
+    if (e.key === "ArrowRight" && cursorAtEnd && i < length - 1) {
+      e.preventDefault();
+      focusInput(i + 1);
+    }
+  };
+  useEffect3(() => {
+    if (value !== void 0) {
+      const split = value.split("").slice(0, length);
+      setOtpValues((prev) => Array.from({ length }, (_, i) => split[i] ?? prev[i] ?? ""));
+    }
+  }, [value, length]);
+  const resolvedVariant = variant === "ghost" ? "underlined" : variant;
+  if (layout === "single") {
+    return /* @__PURE__ */ jsx5(
+      OtpSingleField,
+      {
+        length,
+        value,
+        defaultValue,
+        disabled: !!control.disabled,
+        size,
+        shape,
+        variant: resolvedVariant,
+        color: control.color,
+        id: control.id,
+        describedBy: control["aria-describedby"],
+        required: control.required,
+        onChange,
+        onInput,
+        display: (raw) => resolveDisplayValue(raw, formatter, mask),
+        separator,
+        className,
+        ariaLabel,
+        inputMode,
+        skeleton,
+        linePosition
+      }
+    );
+  }
+  const handlePaste = (e, i) => {
+    e.preventDefault();
+    handleInput(i, e.clipboardData.getData("text"));
+  };
+  if (skeleton) {
+    return /* @__PURE__ */ jsx5("div", { "aria-hidden": true, className: "flex items-center gap-2", children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx5(Input, { skeleton: true, size, shape, className: cn4(WIDTH_CLASS[size], className) }, i)) });
+  }
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      role: "group",
+      "aria-label": group["aria-labelledby"] ? void 0 : ariaLabel ?? "Do\u011Frulama kodu",
+      "aria-labelledby": group["aria-labelledby"],
+      "aria-describedby": group["aria-describedby"],
+      className: "flex items-center gap-2",
+      children: /* @__PURE__ */ jsx5(FieldContext.Provider, { value: null, children: Array.from({ length }).map((_, i) => {
+        const rawValue = otpValues[i] ?? "";
+        const displayValue = resolveDisplayValue(rawValue, formatter, mask);
+        return /* @__PURE__ */ jsxs4(React4.Fragment, { children: [
+          /* @__PURE__ */ jsx5(
+            Input,
+            {
+              ref: (el) => {
+                inputsRef.current[i] = el;
+              },
+              value: displayValue,
+              onInput: (e) => handleInput(i, e.target.value),
+              onKeyDown: (e) => handleKeyDown(e, i),
+              onPaste: (e) => handlePaste(e, i),
+              onFocus: (e) => e.currentTarget.select(),
+              "aria-label": `Hane ${i + 1} / ${length}`,
+              inputMode,
+              autoComplete: i === 0 ? "one-time-code" : "off",
+              disabled: !!group.disabled,
+              size,
+              shape,
+              variant: resolvedVariant,
+              color: group["aria-invalid"] ? color ?? "error" : color,
+              className: cn4(WIDTH_CLASS[size], className),
+              classNames: { input: "w-full text-center font-medium" }
+            }
+          ),
+          separator && i < length - 1 && /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "text-mari-muted", children: typeof separator === "function" ? separator(i) : separator })
+        ] }, `otp-${i}`);
+      }) })
+    }
+  );
+}
+
+// src/input/SearchInput.tsx
+import { forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle2, useRef as useRef5 } from "react";
+import { Loader2Icon, SearchIcon } from "lucide-react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SearchInput = forwardRef3(
+  ({ icon, iconPosition = "end", onSearch, onPressEnter, loading = false, searchLabel = "Ara", ...rest }, ref) => {
+    const inputRef = useRef5(null);
+    useImperativeHandle2(ref, () => inputRef.current, []);
+    const search = () => onSearch?.(inputRef.current?.value ?? "");
+    const handlePressEnter = (e) => {
+      search();
+      onPressEnter?.(e);
+    };
+    const searchButton = /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        "aria-label": searchLabel,
+        onClick: search,
+        disabled: rest.disabled,
+        className: "flex size-6 cursor-pointer select-none items-center justify-center rounded-sm hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-mari-ring",
+        children: loading ? /* @__PURE__ */ jsx6(Loader2Icon, { size: 16, className: "animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx6(SearchIcon, { size: 16, "aria-hidden": true })
+      }
+    );
+    return /* @__PURE__ */ jsx6(
+      Input,
+      {
+        ref: inputRef,
+        icon: icon ?? searchButton,
+        iconPosition,
+        onPressEnter: handlePressEnter,
+        enterKeyHint: "search",
+        "aria-busy": loading || void 0,
+        ...rest
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+
+export {
+  Input,
+  Textarea,
+  OtpInput,
+  SearchInput
+};
+//# sourceMappingURL=chunk-P7Z5BREP.js.map