@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/ScrollShadow/ScrollShadow.css

@@ -0,0 +1,208 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@property --sti-scroll-shadow-block-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --sti-scroll-shadow-block-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --sti-scroll-shadow-inline-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --sti-scroll-shadow-inline-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@layer sti.components {
+  .sti-ScrollShadow-root-12692 {
+    --sti-scroll-shadow-size: var(--sti-space-8);
+    border-radius: var(--sti-radius-xs);
+    min-width: 0;
+    position: relative;
+  }
+
+  .sti-ScrollShadow-root-12692[data-size="sm"] {
+    --sti-scroll-shadow-size: var(--sti-space-4);
+  }
+
+  .sti-ScrollShadow-root-12692[data-size="lg"] {
+    --sti-scroll-shadow-size: var(--sti-space-12);
+  }
+
+  .sti-ScrollShadow-root-12692[data-max-height="fill"] {
+    block-size: 100%;
+  }
+
+  .sti-ScrollShadow-root-12692:has(.sti-ScrollShadow-viewport-d2a3d:focus-visible) {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ScrollShadow-viewport-d2a3d[data-orientation="vertical"] {
+    -webkit-mask-image: linear-gradient(to bottom,
+      transparent,
+      black var(--sti-scroll-shadow-block-start),
+      black calc(100% - var(--sti-scroll-shadow-block-end)),
+      transparent);
+    mask-image: linear-gradient(to bottom,
+      transparent,
+      black var(--sti-scroll-shadow-block-start),
+      black calc(100% - var(--sti-scroll-shadow-block-end)),
+      transparent);
+  }
+
+  .sti-ScrollShadow-viewport-d2a3d[data-orientation="horizontal"] {
+    -webkit-mask-image: linear-gradient(to right,
+      transparent,
+      black var(--sti-scroll-shadow-inline-start),
+      black calc(100% - var(--sti-scroll-shadow-inline-end)),
+      transparent);
+    mask-image: linear-gradient(to right,
+      transparent,
+      black var(--sti-scroll-shadow-inline-start),
+      black calc(100% - var(--sti-scroll-shadow-inline-end)),
+      transparent);
+  }
+
+  .sti-ScrollShadow-viewport-d2a3d[data-orientation="horizontal"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    -webkit-mask-image: linear-gradient(to left,
+      transparent,
+      black var(--sti-scroll-shadow-inline-start),
+      black calc(100% - var(--sti-scroll-shadow-inline-end)),
+      transparent);
+    mask-image: linear-gradient(to left,
+      transparent,
+      black var(--sti-scroll-shadow-inline-start),
+      black calc(100% - var(--sti-scroll-shadow-inline-end)),
+      transparent);
+  }
+
+  .sti-ScrollShadow-viewport-d2a3d[data-orientation="both"] {
+    -webkit-mask-image: linear-gradient(to bottom,
+        transparent,
+        black var(--sti-scroll-shadow-block-start),
+        black calc(100% - var(--sti-scroll-shadow-block-end)),
+        transparent),
+      linear-gradient(to right,
+        transparent,
+        black var(--sti-scroll-shadow-inline-start),
+        black calc(100% - var(--sti-scroll-shadow-inline-end)),
+        transparent);
+    mask-image: linear-gradient(to bottom,
+        transparent,
+        black var(--sti-scroll-shadow-block-start),
+        black calc(100% - var(--sti-scroll-shadow-block-end)),
+        transparent),
+      linear-gradient(to right,
+        transparent,
+        black var(--sti-scroll-shadow-inline-start),
+        black calc(100% - var(--sti-scroll-shadow-inline-end)),
+        transparent);
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
+  .sti-ScrollShadow-viewport-d2a3d[data-orientation="both"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    -webkit-mask-image: linear-gradient(to bottom,
+        transparent,
+        black var(--sti-scroll-shadow-block-start),
+        black calc(100% - var(--sti-scroll-shadow-block-end)),
+        transparent),
+      linear-gradient(to left,
+        transparent,
+        black var(--sti-scroll-shadow-inline-start),
+        black calc(100% - var(--sti-scroll-shadow-inline-end)),
+        transparent);
+    mask-image: linear-gradient(to bottom,
+        transparent,
+        black var(--sti-scroll-shadow-block-start),
+        black calc(100% - var(--sti-scroll-shadow-block-end)),
+        transparent),
+      linear-gradient(to left,
+        transparent,
+        black var(--sti-scroll-shadow-inline-start),
+        black calc(100% - var(--sti-scroll-shadow-inline-end)),
+        transparent);
+  }
+
+  @supports (animation-timeline: scroll()) {
+    .sti-ScrollShadow-viewport-d2a3d[data-orientation="vertical"] {
+      animation: linear both sti-ScrollShadow-sti-scroll-shadow-bs-08303, linear both sti-ScrollShadow-sti-scroll-shadow-be-5001d;
+      animation-timeline: scroll(self), scroll(self);
+      animation-range: 0 var(--sti-scroll-shadow-size),
+        calc(100% - var(--sti-scroll-shadow-size)) 100%;
+    }
+
+    .sti-ScrollShadow-viewport-d2a3d[data-orientation="horizontal"] {
+      animation: linear both sti-ScrollShadow-sti-scroll-shadow-is-9968e, linear both sti-ScrollShadow-sti-scroll-shadow-ie-10bdd;
+      animation-timeline: scroll(self inline), scroll(self inline);
+      animation-range: 0 var(--sti-scroll-shadow-size),
+        calc(100% - var(--sti-scroll-shadow-size)) 100%;
+    }
+
+    .sti-ScrollShadow-viewport-d2a3d[data-orientation="both"] {
+      animation: linear both sti-ScrollShadow-sti-scroll-shadow-bs-08303, linear both sti-ScrollShadow-sti-scroll-shadow-be-5001d, linear both sti-ScrollShadow-sti-scroll-shadow-is-9968e, linear both sti-ScrollShadow-sti-scroll-shadow-ie-10bdd;
+      animation-timeline: scroll(self), scroll(self), scroll(self inline), scroll(self inline);
+      animation-range: 0 var(--sti-scroll-shadow-size),
+        calc(100% - var(--sti-scroll-shadow-size)) 100%,
+        0 var(--sti-scroll-shadow-size),
+        calc(100% - var(--sti-scroll-shadow-size)) 100%;
+    }
+  }
+
+  @keyframes sti-ScrollShadow-sti-scroll-shadow-bs-08303 {
+    from {
+      --sti-scroll-shadow-block-start: 0px;
+    }
+
+    to {
+      --sti-scroll-shadow-block-start: var(--sti-scroll-shadow-size);
+    }
+  }
+
+  @keyframes sti-ScrollShadow-sti-scroll-shadow-be-5001d {
+    from {
+      --sti-scroll-shadow-block-end: var(--sti-scroll-shadow-size);
+    }
+
+    to {
+      --sti-scroll-shadow-block-end: 0px;
+    }
+  }
+
+  @keyframes sti-ScrollShadow-sti-scroll-shadow-is-9968e {
+    from {
+      --sti-scroll-shadow-inline-start: 0px;
+    }
+
+    to {
+      --sti-scroll-shadow-inline-start: var(--sti-scroll-shadow-size);
+    }
+  }
+
+  @keyframes sti-ScrollShadow-sti-scroll-shadow-ie-10bdd {
+    from {
+      --sti-scroll-shadow-inline-end: var(--sti-scroll-shadow-size);
+    }
+
+    to {
+      --sti-scroll-shadow-inline-end: 0px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ScrollShadow-root-12692:has(.sti-ScrollShadow-viewport-d2a3d:focus-visible) {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/components/ScrollShadow/ScrollShadow.d.ts

@@ -0,0 +1,26 @@
+import { ScrollAxis } from "../ScrollArea/useScrollable.js";
+import { ScrollAreaMaxHeight } from "../ScrollArea/ScrollArea.js";
+import { ReactNode, Ref } from "react";
+export interface ScrollShadowProps {
+  /** Kaydırma alanının adı; içerik taşınca alan bu adla odaklanabilen bir bölge olur. */
+  label: string;
+  /** Kaydırma yönü; solma ipucu bu eksenin iki kenarındadır. */
+  orientation?: ScrollAxis;
+  /** En büyük yükseklik (`ScrollArea` ile aynı değerler; yatayda yok sayılır). */
+  maxHeight?: ScrollAreaMaxHeight;
+  /** Solma boyu: `sm` 16, `md` 32, `lg` 48 piksel. */
+  size?: "sm" | "md" | "lg";
+  "aria-describedby"?: string;
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+  /** Kaydırılan öğe. */
+  ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Kaydırılabilir içeriğin kenarlarında "devamı var" ipucu: içerik, kaydırılabilecek yönde kenara
+ * doğru solar; başa ya da sona gelinince o kenarın solması kalkar. Kaydırmaya bağlı CSS
+ * animasyonuyla çizilir (her kaydırmada JavaScript çalışmaz); bu animasyonu tanımayan tarayıcıda
+ * aynı sonuç pasif kaydırma dinleyicisiyle üretilir.
+ */
+export declare function ScrollShadow({ label, orientation, maxHeight, size, children, className, id, ref, ...aria }: ScrollShadowProps): import("react").JSX.Element;

package/dist/components/ScrollShadow/ScrollShadow.js

@@ -0,0 +1,67 @@
+"use client";
+import { useMergedRef } from "../ScrollArea/useScrollable.js";
+import { ScrollArea } from "../ScrollArea/ScrollArea.js";
+import { applyEdgeFades, supportsScrollTimeline } from "./edgeFades.js";
+import ScrollShadow_module_default from "./ScrollShadow.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+// src/components/ScrollShadow/ScrollShadow.tsx
+/**
+* Kaydırılabilir içeriğin kenarlarında "devamı var" ipucu: içerik, kaydırılabilecek yönde kenara
+* doğru solar; başa ya da sona gelinince o kenarın solması kalkar. Kaydırmaya bağlı CSS
+* animasyonuyla çizilir (her kaydırmada JavaScript çalışmaz); bu animasyonu tanımayan tarayıcıda
+* aynı sonuç pasif kaydırma dinleyicisiyle üretilir.
+*/
+function ScrollShadow({ label, orientation = "vertical", maxHeight = "md", size = "md", children, className, id, ref, ...aria }) {
+	const inner = useRef(null);
+	const setRef = useMergedRef(inner, ref);
+	useEffect(() => {
+		const el = inner.current;
+		if (!el || supportsScrollTimeline()) return;
+		let frame = 0;
+		const update = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => applyEdgeFades(el, orientation));
+		};
+		const resize = new ResizeObserver(update);
+		const observeChildren = () => {
+			resize.observe(el);
+			for (const child of Array.from(el.children)) resize.observe(child);
+		};
+		const mutation = new MutationObserver(() => {
+			observeChildren();
+			update();
+		});
+		observeChildren();
+		mutation.observe(el, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		el.addEventListener("scroll", update, { passive: true });
+		applyEdgeFades(el, orientation);
+		return () => {
+			cancelAnimationFrame(frame);
+			resize.disconnect();
+			mutation.disconnect();
+			el.removeEventListener("scroll", update);
+		};
+	}, [orientation]);
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: [ScrollShadow_module_default.root, className].filter(Boolean).join(" "),
+		"data-orientation": orientation,
+		"data-size": size,
+		"data-max-height": orientation === "horizontal" ? void 0 : maxHeight,
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			ref: setRef,
+			label,
+			orientation,
+			maxHeight,
+			className: ScrollShadow_module_default.viewport,
+			...aria,
+			children
+		})
+	});
+}
+export { ScrollShadow };

package/dist/components/ScrollShadow/ScrollShadow.module.js

@@ -0,0 +1,11 @@
+import './ScrollShadow.css';
+// src/components/ScrollShadow/ScrollShadow.module.css
+var ScrollShadow_module_default = {
+	"root": "sti-ScrollShadow-root-12692",
+	"viewport": "sti-ScrollShadow-viewport-d2a3d",
+	"sti-scroll-shadow-bs": "sti-ScrollShadow-sti-scroll-shadow-bs-08303",
+	"sti-scroll-shadow-be": "sti-ScrollShadow-sti-scroll-shadow-be-5001d",
+	"sti-scroll-shadow-is": "sti-ScrollShadow-sti-scroll-shadow-is-9968e",
+	"sti-scroll-shadow-ie": "sti-ScrollShadow-sti-scroll-shadow-ie-10bdd"
+};
+export { ScrollShadow_module_default as default };

package/dist/components/ScrollShadow/edgeFades.js

@@ -0,0 +1,34 @@
+"use client";
+// src/components/ScrollShadow/edgeFades.ts
+/** Kenar solmasının dört değişkeni (mantıksal kenarlar). */
+const FADE_VARS = {
+	blockStart: "--sti-scroll-shadow-block-start",
+	blockEnd: "--sti-scroll-shadow-block-end",
+	inlineStart: "--sti-scroll-shadow-inline-start",
+	inlineEnd: "--sti-scroll-shadow-inline-end"
+};
+/** Tarayıcı kaydırmaya bağlı CSS animasyonunu (scroll-driven animations) tanıyor mu? */
+function supportsScrollTimeline() {
+	return typeof CSS !== "undefined" && CSS.supports("animation-timeline: scroll()");
+}
+/**
+* Yedek yol (kaydırmaya bağlı animasyon olmayan tarayıcılar): her kenardaki solma payı,
+* o kenara kalan kaydırma mesafesi ile solma boyunun küçüğüdür. CSS'teki animasyonla aynı sonucu
+* verir. Değerler CSSOM ile yazılır (satır içi stil özniteliği değil; CSP'ye takılmaz).
+*/
+function applyEdgeFades(el, axis) {
+	const size = Number.parseFloat(getComputedStyle(el).getPropertyValue("--sti-scroll-shadow-size"));
+	const fade = (distance) => `${Math.max(0, Math.min(size || 0, distance))}px`;
+	if (axis !== "horizontal") {
+		const maxY = el.scrollHeight - el.clientHeight;
+		el.style.setProperty(FADE_VARS.blockStart, fade(el.scrollTop));
+		el.style.setProperty(FADE_VARS.blockEnd, fade(maxY - el.scrollTop));
+	}
+	if (axis !== "vertical") {
+		const maxX = el.scrollWidth - el.clientWidth;
+		const fromStart = Math.abs(el.scrollLeft);
+		el.style.setProperty(FADE_VARS.inlineStart, fade(fromStart));
+		el.style.setProperty(FADE_VARS.inlineEnd, fade(maxX - fromStart));
+	}
+}
+export { FADE_VARS, applyEdgeFades, supportsScrollTimeline };

package/dist/components/ScrollShadow/index.d.ts

@@ -0,0 +1,2 @@
+import { ScrollShadow, ScrollShadowProps } from "./ScrollShadow.js";
+export { ScrollShadow, ScrollShadowProps };

package/dist/components/SearchField/SearchField.css

@@ -0,0 +1,100 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SearchField-box-62e65 {
+    align-items: center;
+    min-width: 0;
+    display: flex;
+    position: relative;
+  }
+
+  .sti-SearchField-root-b06c3[data-size] .sti-SearchField-input-197b8 {
+    appearance: none;
+    padding-inline-start: calc(var(--sti-field-control-px) +
+      var(--sti-icon-md) +
+      var(--sti-space-2));
+    padding-inline-end: calc(var(--sti-field-control-px) + var(--sti-control-h-sm));
+  }
+
+  .sti-SearchField-input-197b8::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  .sti-SearchField-input-197b8::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  .sti-SearchField-icon-58754 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    pointer-events: none;
+    display: inline-flex;
+    position: absolute;
+    inset-inline-start: var(--sti-field-control-px);
+  }
+
+  .sti-SearchField-root-b06c3:focus-within .sti-SearchField-icon-58754 {
+    color: var(--sti-fg-signal);
+  }
+
+  .sti-SearchField-clear-e63ed, .sti-SearchField-pending-e0593, .sti-SearchField-shortcut-20a9b {
+    place-items: center;
+    display: inline-grid;
+    position: absolute;
+    inset-inline-end: var(--sti-space-1);
+  }
+
+  .sti-SearchField-clear-e63ed {
+    width: var(--sti-control-h-sm);
+    height: var(--sti-control-h-sm);
+    border-radius: var(--sti-radius-pill);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-sm);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  @media (hover: hover) {
+    .sti-SearchField-clear-e63ed[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+      color: var(--sti-fg);
+    }
+  }
+
+  .sti-SearchField-clear-e63ed[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-SearchField-root-b06c3[data-empty] .sti-SearchField-clear-e63ed, .sti-SearchField-root-b06c3[data-pending] .sti-SearchField-clear-e63ed {
+    display: none;
+  }
+
+  .sti-SearchField-pending-e0593 {
+    width: var(--sti-control-h-sm);
+    height: var(--sti-control-h-sm);
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-SearchField-shortcut-20a9b {
+    pointer-events: none;
+    display: none;
+    inset-inline-end: var(--sti-space-3);
+  }
+
+  .sti-SearchField-root-b06c3[data-empty]:not(:focus-within, [data-pending]) .sti-SearchField-shortcut-20a9b {
+    display: inline-grid;
+  }
+
+  .sti-SearchField-root-b06c3[data-disabled] .sti-SearchField-icon-58754 {
+    opacity: var(--sti-opacity-disabled);
+  }
+
+  @media (forced-colors: active) {
+    .sti-SearchField-clear-e63ed[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/components/SearchField/SearchField.d.ts

@@ -0,0 +1,38 @@
+import { ErrorMessage } from "../Field/Field.js";
+import { ReactNode, Ref } from "react";
+export interface SearchFieldProps {
+  /** Etiket; görünmesi istenmiyorsa `hideLabel` (ad yine okunur). */
+  label: ReactNode;
+  hideLabel?: boolean;
+  description?: ReactNode;
+  errorMessage?: ErrorMessage;
+  size?: "sm" | "md" | "lg";
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Enter ile arama. */
+  onSubmit?: (value: string) => void;
+  /** Temizle düğmesi ya da Escape ile temizlenince. */
+  onClear?: () => void;
+  name?: string;
+  placeholder?: string;
+  /** Sonuçlar yükleniyor: temizle düğmesinin yerinde gösterge. */
+  isPending?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  /**
+   * Sayfanın her yerinden alana odaklanan kısayol: `"/"` ya da `"mod+k"` (Windows/Linux'ta Ctrl,
+   * Apple'da Cmd). Yazılabilir bir alandayken çalışmaz. Alan boşken kısayol ipucu görünür.
+   */
+  keyboardShortcut?: "/" | "mod+k";
+  autoFocus?: boolean;
+  className?: string;
+  id?: string;
+  inputRef?: Ref<HTMLInputElement>;
+}
+/**
+ * Arama alanı: arama ikonu, temizle düğmesi, Escape ile temizleme, Enter ile arama, yükleniyor
+ * göstergesi ve isteğe bağlı genel kısayol (APG: arama kutusu, `role="searchbox"`).
+ */
+export declare function SearchField({ label, hideLabel, description, errorMessage, size, placeholder, isPending, keyboardShortcut, className, inputRef, ...rest }: SearchFieldProps): import("react").JSX.Element;

package/dist/components/SearchField/SearchField.js

@@ -0,0 +1,95 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../Field/Field.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { CloseIcon } from "../../icons/generated/CloseIcon.js";
+import { Kbd } from "../Kbd/Kbd.js";
+import { SearchIcon } from "../../icons/generated/SearchIcon.js";
+import SearchField_module_default from "./SearchField.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button, Input, SearchField } from "react-aria-components";
+// src/components/SearchField/SearchField.tsx
+const isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? "");
+const isEditable = (el) => el instanceof HTMLElement && (el.isContentEditable || /^(input|textarea|select)$/i.test(el.tagName));
+/**
+* Arama alanı: arama ikonu, temizle düğmesi, Escape ile temizleme, Enter ile arama, yükleniyor
+* göstergesi ve isteğe bağlı genel kısayol (APG: arama kutusu, `role="searchbox"`).
+*/
+function SearchField$1({ label, hideLabel, description, errorMessage, size = "md", placeholder, isPending, keyboardShortcut, className, inputRef, ...rest }) {
+	const t = useMessages();
+	const input = useRef(null);
+	const [apple, setApple] = useState(false);
+	useEffect(() => setApple(isApple()), []);
+	const setRef = useCallback((el) => {
+		input.current = el;
+		if (typeof inputRef === "function") inputRef(el);
+		else if (inputRef) inputRef.current = el;
+	}, [inputRef]);
+	useEffect(() => {
+		if (!keyboardShortcut) return;
+		const onKey = (e) => {
+			if (e.defaultPrevented || isEditable(document.activeElement)) return;
+			if (!(keyboardShortcut === "/" ? e.key === "/" && !e.ctrlKey && !e.metaKey && !e.altKey : (e.key === "k" || e.key === "K") && (isApple() ? e.metaKey : e.ctrlKey) && !e.altKey) || !input.current || input.current.disabled) return;
+			e.preventDefault();
+			input.current.focus();
+			input.current.select();
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [keyboardShortcut]);
+	const shortcutKeys = keyboardShortcut === "/" ? ["/"] : keyboardShortcut ? [apple ? "⌘" : "Ctrl", "K"] : null;
+	return /* @__PURE__ */ jsxs(SearchField, {
+		...rest,
+		className: [
+			fieldStyles.root,
+			SearchField_module_default.root,
+			className
+		].filter(Boolean).join(" "),
+		"data-size": size,
+		"data-pending": isPending ? "" : void 0,
+		children: [
+			hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(FieldLabel, { children: label }) }) : /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+			/* @__PURE__ */ jsxs("div", {
+				className: SearchField_module_default.box,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: SearchField_module_default.icon,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx(SearchIcon, {})
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						ref: setRef,
+						className: [fieldStyles.control, SearchField_module_default.input].join(" "),
+						placeholder,
+						enterKeyHint: "search",
+						spellCheck: false
+					}),
+					shortcutKeys ? /* @__PURE__ */ jsx("span", {
+						className: SearchField_module_default.shortcut,
+						children: /* @__PURE__ */ jsx(Kbd, {
+							keys: shortcutKeys,
+							label: t.searchShortcut
+						})
+					}) : null,
+					isPending ? /* @__PURE__ */ jsx("span", {
+						className: SearchField_module_default.pending,
+						children: /* @__PURE__ */ jsx(Spinner, {
+							size: "sm",
+							label: t.loading
+						})
+					}) : null,
+					/* @__PURE__ */ jsx(Button, {
+						className: SearchField_module_default.clear,
+						"aria-label": t.clear,
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
+					})
+				]
+			}),
+			description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FieldErrorText, { errorMessage })
+		]
+	});
+}
+export { SearchField$1 as SearchField };

package/dist/components/SearchField/SearchField.module.js

@@ -0,0 +1,12 @@
+import './SearchField.css';
+// src/components/SearchField/SearchField.module.css
+var SearchField_module_default = {
+	"box": "sti-SearchField-box-62e65",
+	"root": "sti-SearchField-root-b06c3",
+	"input": "sti-SearchField-input-197b8",
+	"icon": "sti-SearchField-icon-58754",
+	"clear": "sti-SearchField-clear-e63ed",
+	"pending": "sti-SearchField-pending-e0593",
+	"shortcut": "sti-SearchField-shortcut-20a9b"
+};
+export { SearchField_module_default as default };

package/dist/components/SearchField/index.d.ts

@@ -0,0 +1,2 @@
+import { SearchField, SearchFieldProps } from "./SearchField.js";
+export { SearchField, SearchFieldProps };