@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/components/LinkRows/LinkRows.css

@@ -0,0 +1,135 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-LinkRows-root-63447 {
+    --sti-link-rows-h: var(--sti-row-h);
+    --sti-link-rows-px: var(--sti-space-4);
+    --sti-link-rows-gap: var(--sti-space-3);
+    --sti-link-rows-divider: var(--sti-border-subtle);
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-LinkRows-root-63447[data-size="lg"] {
+    --sti-link-rows-h: calc(var(--sti-row-h) + var(--sti-space-3));
+  }
+
+  .sti-LinkRows-root-63447[data-variant="inset"] {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-surface);
+    overflow: hidden;
+  }
+
+  .sti-LinkRows-item-cc255 {
+    border-block-end: var(--sti-border-width) solid var(--sti-link-rows-divider);
+    min-inline-size: 0;
+  }
+
+  .sti-LinkRows-item-cc255:last-child {
+    border-block-end: 0;
+  }
+
+  .sti-LinkRows-link-7a8b7 {
+    align-items: center;
+    gap: var(--sti-link-rows-gap);
+    min-block-size: var(--sti-link-rows-h);
+    padding-block: var(--sti-space-2);
+    padding-inline: var(--sti-link-rows-px);
+    color: inherit;
+    cursor: pointer;
+    transition: background var(--sti-duration-fast) var(--sti-ease-snap);
+    outline: none;
+    text-decoration: none;
+    display: flex;
+  }
+
+  @media (hover: hover) {
+    .sti-LinkRows-link-7a8b7[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-LinkRows-link-7a8b7[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-LinkRows-link-7a8b7[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-LinkRows-icon-b1fc9 {
+    inline-size: var(--sti-control-h-sm);
+    block-size: var(--sti-control-h-sm);
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-LinkRows-text-97f85 {
+    flex: 1;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-LinkRows-label-77b6c {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-LinkRows-description-545ed {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-LinkRows-meta-447f9 {
+    max-inline-size: 50%;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    overflow-wrap: anywhere;
+    flex: none;
+  }
+
+  .sti-LinkRows-chevron-74ac7, .sti-LinkRows-trailing-c7b8c {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-LinkRows-chevron-74ac7: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)) {
+    rotate: 180deg;
+  }
+
+  @media (forced-colors: active) {
+    .sti-LinkRows-root-63447[data-variant="inset"] {
+      border-color: canvastext;
+    }
+
+    .sti-LinkRows-item-cc255 {
+      border-block-end-color: graytext;
+    }
+
+    .sti-LinkRows-link-7a8b7[data-focus-visible] {
+      outline-color: highlight;
+    }
+
+    .sti-LinkRows-link-7a8b7[data-hovered] {
+      outline: var(--sti-border-width) solid Highlight;
+      outline-offset: calc(var(--sti-border-width) * -1);
+    }
+  }
+}

package/dist/components/LinkRows/LinkRows.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, Ref } from "react";
+export interface LinkRow {
+  id: string;
+  /** Bağlantının adı (zorunlu): gidilen yerin adı. */
+  label: ReactNode;
+  /** Adın altında kısa açıklama; bağlantının açıklaması olarak da okunur. */
+  description?: ReactNode;
+  href: string;
+  /** Adın önünde yuvarlak çerçevede süs ikonu. */
+  icon?: ReactNode;
+  /** Sonda değer ya da durum (ör. "12 kayıt", rozet); bağlantının adının parçası olarak okunur. */
+  meta?: ReactNode;
+  /** Başka bir siteye gider: yeni sekmede açılır, ikon ve "yeni sekmede açılır" bilgisi eklenir. */
+  external?: boolean;
+}
+export interface LinkRowsProps {
+  /** Listenin adı (zorunlu). */
+  label: string;
+  items: readonly LinkRow[];
+  /** Boy: `md` 44, `lg` 56 piksel satır. */
+  size?: "md" | "lg";
+  /** `inset`: satırlar kendi kenarlı kartı içinde; `plain`: yalnız ayraçlar. */
+  variant?: "inset" | "plain";
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLUListElement>;
+}
+/**
+ * Bağlantı satırları: her satırın bütününe tıklanan, sonunda ok bulunan gezinme listesi (ayarlar
+ * menüsü, kaynaklar, ilgili sayfalar). Gerçek `ul`/`li` ve bağlantılardır; her satır tek durak.
+ */
+export declare function LinkRows({ label, items, size, variant, className, id, ref }: LinkRowsProps): import("react").JSX.Element;

package/dist/components/LinkRows/LinkRows.js

@@ -0,0 +1,62 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { ExternalLinkIcon } from "../../icons/generated/ExternalLinkIcon.js";
+import { ChevronRightIcon } from "../../icons/generated/ChevronRightIcon.js";
+import LinkRows_module_default from "./LinkRows.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-aria-components";
+// src/components/LinkRows/LinkRows.tsx
+/**
+* Bağlantı satırları: her satırın bütününe tıklanan, sonunda ok bulunan gezinme listesi (ayarlar
+* menüsü, kaynaklar, ilgili sayfalar). Gerçek `ul`/`li` ve bağlantılardır; her satır tek durak.
+*/
+function LinkRows({ label, items, size = "md", variant = "inset", className, id, ref }) {
+	const messages = useMessages();
+	return /* @__PURE__ */ jsx("ul", {
+		id,
+		ref,
+		"aria-label": label,
+		className: [LinkRows_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		"data-variant": variant,
+		children: items.map((item) => /* @__PURE__ */ jsx("li", {
+			className: LinkRows_module_default.item,
+			children: /* @__PURE__ */ jsxs(Link, {
+				className: LinkRows_module_default.link,
+				href: item.href,
+				target: item.external ? "_blank" : void 0,
+				rel: item.external ? "noopener noreferrer" : void 0,
+				children: [
+					item.icon ? /* @__PURE__ */ jsx("span", {
+						className: LinkRows_module_default.icon,
+						"aria-hidden": "true",
+						children: item.icon
+					}) : null,
+					/* @__PURE__ */ jsxs("span", {
+						className: LinkRows_module_default.text,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: LinkRows_module_default.label,
+							children: item.label
+						}), item.description ? /* @__PURE__ */ jsx("span", {
+							className: LinkRows_module_default.description,
+							children: item.description
+						}) : null]
+					}),
+					item.meta ? /* @__PURE__ */ jsx("span", {
+						className: LinkRows_module_default.meta,
+						children: item.meta
+					}) : null,
+					item.external ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ExternalLinkIcon, {
+						className: LinkRows_module_default.trailing,
+						size: "sm"
+					}), /* @__PURE__ */ jsx(VisuallyHidden, { children: messages.opensInNewTab })] }) : /* @__PURE__ */ jsx(ChevronRightIcon, {
+						className: LinkRows_module_default.chevron,
+						size: "sm"
+					})
+				]
+			})
+		}, item.id))
+	});
+}
+export { LinkRows };

package/dist/components/LinkRows/LinkRows.module.js

@@ -0,0 +1,15 @@
+import './LinkRows.css';
+// src/components/LinkRows/LinkRows.module.css
+var LinkRows_module_default = {
+	"root": "sti-LinkRows-root-63447",
+	"item": "sti-LinkRows-item-cc255",
+	"link": "sti-LinkRows-link-7a8b7",
+	"icon": "sti-LinkRows-icon-b1fc9",
+	"text": "sti-LinkRows-text-97f85",
+	"label": "sti-LinkRows-label-77b6c",
+	"description": "sti-LinkRows-description-545ed",
+	"meta": "sti-LinkRows-meta-447f9",
+	"chevron": "sti-LinkRows-chevron-74ac7",
+	"trailing": "sti-LinkRows-trailing-c7b8c"
+};
+export { LinkRows_module_default as default };

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

@@ -0,0 +1,2 @@
+import { LinkRow, LinkRows, LinkRowsProps } from "./LinkRows.js";
+export { LinkRow, LinkRows, LinkRowsProps };

package/dist/components/List/List.css

@@ -0,0 +1,150 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-List-root-4bef8 {
+    --sti-list-gap: var(--sti-space-2);
+    --sti-list-marker-size: 1lh;
+    --sti-list-marker-color: var(--sti-fg-muted);
+    --sti-list-marker-gap: var(--sti-space-3);
+    --sti-list-indent: calc(var(--sti-list-marker-size) + var(--sti-list-marker-gap));
+    --sti-list-badge-bg: var(--sti-bg-accent-subtle);
+    --sti-list-badge-fg: var(--sti-fg-accent);
+    --sti-list-connector: var(--sti-border);
+    min-width: 0;
+    padding: 0;
+    padding-inline-start: var(--sti-list-indent);
+    list-style: none;
+  }
+
+  .sti-List-root-4bef8[data-gap="none"] {
+    --sti-list-gap: 0;
+  }
+
+  .sti-List-root-4bef8[data-gap="sm"] {
+    --sti-list-gap: var(--sti-space-1);
+  }
+
+  .sti-List-root-4bef8[data-gap="lg"] {
+    --sti-list-gap: var(--sti-space-4);
+  }
+
+  .sti-List-root-4bef8[data-marker="disc"] {
+    list-style-type: disc;
+  }
+
+  .sti-List-root-4bef8[data-marker="decimal"] {
+    list-style-type: decimal;
+  }
+
+  .sti-List-content-cd184 > .sti-List-root-4bef8[data-marker="disc"] {
+    list-style-type: circle;
+  }
+
+  .sti-List-root-4bef8:is([data-marker="none"], [data-marker="check"], [data-marker="steps"]) {
+    --sti-list-indent: 0;
+  }
+
+  .sti-List-root-4bef8[data-marker="steps"]:not([data-gap]) {
+    --sti-list-gap: var(--sti-space-4);
+  }
+
+  .sti-List-item-b61a8 {
+    min-width: 0;
+    position: relative;
+  }
+
+  .sti-List-item-b61a8 + .sti-List-item-b61a8 {
+    margin-block-start: var(--sti-list-gap);
+  }
+
+  .sti-List-item-b61a8::marker {
+    color: var(--sti-list-marker-color);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sti-List-content-cd184 {
+    overflow-wrap: anywhere;
+    min-width: 0;
+  }
+
+  .sti-List-content-cd184 > .sti-List-root-4bef8 {
+    margin-block-start: var(--sti-list-gap);
+  }
+
+  .sti-List-marker-2fa1c {
+    display: none;
+  }
+
+  .sti-List-root-4bef8:is([data-marker="check"], [data-marker="steps"]) > .sti-List-item-b61a8, .sti-List-item-b61a8[data-icon] {
+    padding-inline-start: calc(var(--sti-list-marker-size) + var(--sti-list-marker-gap));
+    list-style-type: none;
+  }
+
+  .sti-List-root-4bef8:is([data-marker="disc"], [data-marker="decimal"]) > .sti-List-item-b61a8[data-icon] {
+    margin-inline-start: calc(var(--sti-list-indent) * -1);
+  }
+
+  .sti-List-root-4bef8:is([data-marker="check"], [data-marker="steps"]) > .sti-List-item-b61a8 > .sti-List-marker-2fa1c, .sti-List-item-b61a8[data-icon] > .sti-List-marker-2fa1c {
+    width: var(--sti-list-marker-size);
+    height: var(--sti-list-marker-size);
+    place-items: center;
+    display: grid;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  .sti-List-item-b61a8[data-icon] > .sti-List-marker-2fa1c {
+    color: var(--sti-list-marker-color);
+    font-size: var(--sti-icon-sm);
+  }
+
+  .sti-List-root-4bef8[data-marker="check"] > .sti-List-item-b61a8:not([data-icon]) > .sti-List-marker-2fa1c {
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-list-badge-bg);
+    color: var(--sti-list-badge-fg);
+    transform: scale(.8);
+  }
+
+  .sti-List-root-4bef8[data-marker="check"] > .sti-List-item-b61a8:not([data-icon]) > .sti-List-marker-2fa1c:before {
+    content: "";
+    border-right: var(--sti-border-width-strong) solid currentColor;
+    border-bottom: var(--sti-border-width-strong) solid currentColor;
+    width: 28%;
+    height: 52%;
+    margin-block-start: -12%;
+    transform: rotate(45deg);
+  }
+
+  .sti-List-root-4bef8[data-marker="steps"] > .sti-List-item-b61a8:not([data-icon]) > .sti-List-marker-2fa1c {
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-list-badge-bg);
+    color: var(--sti-list-badge-fg);
+  }
+
+  .sti-List-root-4bef8[data-marker="steps"] > .sti-List-item-b61a8:not([data-icon]) > .sti-List-marker-2fa1c:before {
+    content: counter(list-item);
+    font-family: var(--sti-font-numeric);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: 1;
+  }
+
+  .sti-List-root-4bef8[data-marker="steps"] > .sti-List-item-b61a8:not(:last-child):after {
+    content: "";
+    inset-block: calc(var(--sti-list-marker-size) + var(--sti-space-1))
+      calc(var(--sti-space-1) - var(--sti-list-gap));
+    border-inline-start: var(--sti-border-width) solid var(--sti-list-connector);
+    position: absolute;
+    inset-inline-start: calc((var(--sti-list-marker-size) - var(--sti-border-width)) / 2);
+  }
+
+  @media (forced-colors: active) {
+    .sti-List-root-4bef8:is([data-marker="check"], [data-marker="steps"]) > .sti-List-item-b61a8 > .sti-List-marker-2fa1c, .sti-List-root-4bef8[data-marker="steps"] > .sti-List-item-b61a8:not(:last-child):after {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/components/List/List.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from "react";
+export type ListMarker = "disc" | "decimal" | "none" | "check" | "steps";
+export type ListGap = "none" | "sm" | "md" | "lg";
+export interface ListProps {
+  /**
+   * İşaret türü:
+   * - `disc`: sırasız madde işareti (`<ul>`; iç içe listede halka).
+   * - `decimal`: sıralı numara (`<ol>`; tarayıcının yerel numarası: "1.", "2."; Türkçe sıra
+   *   sayısı yazımıyla aynı).
+   * - `none`: işaretsiz (`<ul>`; menü, etiket listesi).
+   * - `check`: turkuaz onay işaretli (`<ul>`; özellik ve kazanım listeleri).
+   * - `steps`: numaralı yuvarlak rozetli adımlar (`<ol>`; adımlar ince bir çizgiyle bağlıdır).
+   */
+  marker?: ListMarker;
+  /** Maddeler arası boşluk: `none` 0, `sm` 4, `md` 8, `lg` 16 piksel. Varsayılan `md`; adımlarda `lg`. */
+  gap?: ListGap;
+  /** Sıralı listede ilk numara (`decimal`, `steps`). */
+  start?: number;
+  /** Sıralı listede numaraların azalarak yazılması (`decimal`, `steps`). */
+  reversed?: boolean;
+  /** Maddeler: `ListItem`. */
+  children: ReactNode;
+  /** Listenin erişilebilir adı (ör. "Kurulum adımları"); listenin üstünde görünür başlık varsa onun kimliği `aria-labelledby` ile verilir. */
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Liste: sırasız, sıralı, işaretsiz, onaylı ya da adımlı. İç içe listeler `ListItem`in içine yeni
+ * bir `List` konarak yazılır; boşluk ve girinti kendiliğinden ayarlanır. Sunucu bileşenidir.
+ */
+export declare function List({ marker, gap, start, reversed, children, className, id, ...aria }: ListProps): import("react").JSX.Element;
+export interface ListItemProps {
+  children: ReactNode;
+  /**
+   * Maddeye özel süs ikonu (ör. `ShieldCheckIcon`); listenin işaretinin yerini alır. Anlam
+   * metindedir; ikon ekran okuyucudan gizlenir. Anlam taşıyan durum (başarılı/başarısız) için
+   * metinde de yazılır.
+   */
+  icon?: ReactNode;
+  /** Sıralı listede bu maddenin numarası (sonrakiler buradan devam eder). */
+  value?: number;
+  className?: string;
+  id?: string;
+}
+/** Liste maddesi. İçerik bir blok kutudadır: metin, paragraf ve iç içe liste birlikte yazılabilir. */
+export declare function ListItem({ children, icon, value, className, id }: ListItemProps): import("react").JSX.Element;

package/dist/components/List/List.js

@@ -0,0 +1,47 @@
+import List_module_default from "./List.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/List/List.tsx
+const ORDERED = /* @__PURE__ */ new Set(["decimal", "steps"]);
+/**
+* Liste: sırasız, sıralı, işaretsiz, onaylı ya da adımlı. İç içe listeler `ListItem`in içine yeni
+* bir `List` konarak yazılır; boşluk ve girinti kendiliğinden ayarlanır. Sunucu bileşenidir.
+*/
+function List({ marker = "disc", gap, start, reversed, children, className, id, ...aria }) {
+	const ordered = ORDERED.has(marker);
+	const shared = {
+		id,
+		className: [List_module_default.root, className].filter(Boolean).join(" "),
+		"data-marker": marker,
+		"data-gap": gap,
+		role: marker === "disc" || marker === "decimal" ? void 0 : "list",
+		...aria
+	};
+	if (ordered) return /* @__PURE__ */ jsx("ol", {
+		...shared,
+		start,
+		reversed,
+		children
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		...shared,
+		children
+	});
+}
+/** Liste maddesi. İçerik bir blok kutudadır: metin, paragraf ve iç içe liste birlikte yazılabilir. */
+function ListItem({ children, icon, value, className, id }) {
+	return /* @__PURE__ */ jsxs("li", {
+		id,
+		className: [List_module_default.item, className].filter(Boolean).join(" "),
+		value,
+		"data-icon": icon ? "" : void 0,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: List_module_default.marker,
+			"aria-hidden": "true",
+			children: icon
+		}), /* @__PURE__ */ jsx("div", {
+			className: List_module_default.content,
+			children
+		})]
+	});
+}
+export { List, ListItem };

package/dist/components/List/List.module.js

@@ -0,0 +1,9 @@
+import './List.css';
+// src/components/List/List.module.css
+var List_module_default = {
+	"root": "sti-List-root-4bef8",
+	"content": "sti-List-content-cd184",
+	"item": "sti-List-item-b61a8",
+	"marker": "sti-List-marker-2fa1c"
+};
+export { List_module_default as default };

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

@@ -0,0 +1,2 @@
+import { List, ListGap, ListItem, ListItemProps, ListMarker, ListProps } from "./List.js";
+export { List, ListGap, ListItem, ListItemProps, ListMarker, ListProps };

package/dist/components/Listbox/Listbox.d.ts

@@ -0,0 +1,35 @@
+import { ListItem, ListOption, ListSection } from "../_internal/listbox/options.js";
+import { ReactNode } from "react";
+interface ListboxBaseProps {
+  /** Görünür etiket. */
+  label: ReactNode;
+  description?: ReactNode;
+  items: readonly ListItem[];
+  /** Seçenek yokken gösterilen metin. */
+  emptyText?: string;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+export interface ListboxSingleProps extends ListboxBaseProps {
+  selectionMode?: "single";
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (value: string | null) => void;
+  /** Seçili seçeneğin yeniden seçilince bırakılmasına izin verir. Varsayılan kapalı. */
+  allowsEmpty?: boolean;
+}
+export interface ListboxMultipleProps extends ListboxBaseProps {
+  selectionMode: "multiple";
+  value?: readonly string[];
+  defaultValue?: readonly string[];
+  onChange?: (value: string[]) => void;
+}
+export type ListboxProps = ListboxSingleProps | ListboxMultipleProps;
+/**
+ * Sayfada açık duran seçenek listesi (APG Listbox): tek ya da çoklu seçim, gruplar, açıklamalı
+ * seçenekler. Oklar gezer, Home/End uçlara gider, harf yazmak Türkçe kurallarla arar; çoklu
+ * seçimde Shift ile aralık seçilir, Ctrl/⌘+A hepsini seçer.
+ */
+export declare function Listbox(props: ListboxProps): import("react").JSX.Element;
+export type { ListItem as ListboxItem, ListOption as ListboxOption, ListSection as ListboxSection };

package/dist/components/Listbox/Listbox.js

@@ -0,0 +1,66 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import listbox_module_default from "../_internal/listbox/listbox.module.js";
+import { disabledKeys, flatOptions, renderOptions } from "../_internal/listbox/options.js";
+import { fieldStyles } from "../Field/Field.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { I18nProvider, ListBox } from "react-aria-components";
+// src/components/Listbox/Listbox.tsx
+const toSet = (v) => v === void 0 ? void 0 : new Set(v === null ? [] : typeof v === "string" ? [v] : v);
+/**
+* Sayfada açık duran seçenek listesi (APG Listbox): tek ya da çoklu seçim, gruplar, açıklamalı
+* seçenekler. Oklar gezer, Home/End uçlara gider, harf yazmak Türkçe kurallarla arar; çoklu
+* seçimde Shift ile aralık seçilir, Ctrl/⌘+A hepsini seçer.
+*/
+function Listbox(props) {
+	const { label, description, items, emptyText, isDisabled, className, id } = props;
+	const locale = useLocale();
+	const t = useMessages();
+	const labelId = useId();
+	const descId = useId();
+	const multiple = props.selectionMode === "multiple";
+	const onSelectionChange = (keys) => {
+		const list = keys === "all" ? flatOptions(items).filter((o) => !o.isDisabled).map((o) => o.id) : [...keys].map(String);
+		if (props.selectionMode === "multiple") props.onChange?.(list);
+		else props.onChange?.(list[0] ?? null);
+	};
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale,
+		children: /* @__PURE__ */ jsxs("div", {
+			id,
+			className: [fieldStyles.root, className].filter(Boolean).join(" "),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					id: labelId,
+					className: fieldStyles.label,
+					children: label
+				}),
+				/* @__PURE__ */ jsx(ListBox, {
+					"aria-labelledby": labelId,
+					"aria-describedby": description ? descId : void 0,
+					className: listbox_module_default.list,
+					"data-standalone": "",
+					selectionMode: multiple ? "multiple" : "single",
+					disallowEmptySelection: !multiple && !props.allowsEmpty,
+					selectedKeys: toSet(props.value),
+					defaultSelectedKeys: toSet(props.defaultValue),
+					onSelectionChange,
+					disabledKeys: isDisabled ? flatOptions(items).map((o) => o.id) : disabledKeys(items),
+					"data-disabled": isDisabled ? "" : void 0,
+					renderEmptyState: () => /* @__PURE__ */ jsx("div", {
+						className: listbox_module_default.empty,
+						children: emptyText ?? t.listEmpty
+					}),
+					children: renderOptions(items, multiple)
+				}),
+				description ? /* @__PURE__ */ jsx("span", {
+					id: descId,
+					className: fieldStyles.description,
+					children: description
+				}) : null
+			]
+		})
+	});
+}
+export { Listbox };

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

@@ -0,0 +1,3 @@
+import { ListItem, ListOption, ListSection } from "../_internal/listbox/options.js";
+import { Listbox, ListboxMultipleProps, ListboxProps, ListboxSingleProps } from "./Listbox.js";
+export { Listbox, type ListItem as ListboxItem, ListboxMultipleProps, type ListOption as ListboxOption, ListboxProps, type ListSection as ListboxSection, ListboxSingleProps };

package/dist/components/LoadingBoundary/LoadingBoundary.css

@@ -0,0 +1,53 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-LoadingBoundary-root-21f1f {
+    --sti-loading-boundary-delay: .3s;
+    --sti-loading-boundary-min: calc(var(--sti-space-32) * 1.5);
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-2);
+    inline-size: 100%;
+    min-block-size: var(--sti-loading-boundary-min);
+    padding: var(--sti-space-4);
+    color: var(--sti-fg-accent);
+    animation: sti-LoadingBoundary-sti-loading-boundary-in-2d7d2 var(--sti-duration-base) var(--sti-ease-out)
+      var(--sti-loading-boundary-delay) both;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-LoadingBoundary-root-21f1f[data-delay="none"] {
+    --sti-loading-boundary-delay: 0s;
+  }
+
+  .sti-LoadingBoundary-root-21f1f[data-delay="long"] {
+    --sti-loading-boundary-delay: 1s;
+  }
+
+  .sti-LoadingBoundary-root-21f1f[data-size="sm"] {
+    --sti-loading-boundary-min: var(--sti-space-16);
+  }
+
+  .sti-LoadingBoundary-root-21f1f[data-size="lg"] {
+    --sti-loading-boundary-min: calc(var(--sti-space-32) * 3);
+  }
+
+  .sti-LoadingBoundary-label-fe0f4 {
+    color: var(--sti-fg-muted);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+  }
+
+  @keyframes sti-LoadingBoundary-sti-loading-boundary-in-2d7d2 {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-LoadingBoundary-root-21f1f {
+      animation-duration: 1ms;
+    }
+  }
+}