@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/components/ToggleButton/ToggleButton.css

@@ -0,0 +1,175 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ToggleButton-root-07803 {
+    --sti-toggle-button-h: var(--sti-control-h-md);
+    --sti-toggle-button-px: var(--sti-space-5);
+    --sti-toggle-button-gap: var(--sti-space-2);
+    --sti-toggle-button-font-size: var(--sti-font-size-sm);
+    --sti-toggle-button-icon: var(--sti-icon-sm);
+    --sti-toggle-button-radius: var(--sti-radius-pill);
+    --sti-toggle-button-bg: transparent;
+    --sti-toggle-button-fg: var(--sti-fg);
+    --sti-toggle-button-border: transparent;
+    --sti-toggle-button-selected-border: var(--sti-border-selected);
+    --sti-toggle-button-press-scale: .98;
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-toggle-button-gap);
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
+    height: var(--sti-toggle-button-h);
+    padding-inline: var(--sti-toggle-button-px);
+    border: var(--sti-border-width) solid var(--sti-toggle-button-border);
+    border-radius: var(--sti-toggle-button-radius);
+    background: var(--sti-toggle-button-bg);
+    color: var(--sti-toggle-button-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-toggle-button-font-size);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: .01em;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      color var(--sti-duration-fast) var(--sti-ease-snap),
+      transform var(--sti-duration-fast) var(--sti-ease-snap);
+    line-height: 1;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .sti-ToggleButton-root-07803[data-size="sm"] {
+    --sti-toggle-button-h: var(--sti-control-h-sm);
+    --sti-toggle-button-px: var(--sti-space-4);
+    --sti-toggle-button-gap: var(--sti-space-1);
+  }
+
+  .sti-ToggleButton-root-07803[data-size="lg"] {
+    --sti-toggle-button-h: var(--sti-control-h-lg);
+    --sti-toggle-button-px: var(--sti-space-6);
+    --sti-toggle-button-font-size: var(--sti-font-size-body);
+    --sti-toggle-button-icon: var(--sti-icon-md);
+  }
+
+  .sti-ToggleButton-root-07803[data-icon-only] {
+    --sti-toggle-button-icon: var(--sti-icon-md);
+    width: var(--sti-toggle-button-h);
+    flex: none;
+    padding-inline: 0;
+  }
+
+  .sti-ToggleButton-root-07803[data-icon-only][data-size="sm"] {
+    --sti-toggle-button-icon: var(--sti-icon-sm);
+  }
+
+  .sti-ToggleButton-root-07803[data-icon-only][data-size="lg"] {
+    --sti-toggle-button-icon: var(--sti-icon-lg);
+  }
+
+  .sti-ToggleButton-root-07803[data-in-group] {
+    --sti-toggle-button-h: var(--sti-toggle-group-item-h);
+    --sti-toggle-button-px: var(--sti-toggle-group-item-px);
+    --sti-toggle-button-radius: var(--sti-toggle-group-item-radius);
+  }
+
+  @media (pointer: coarse) {
+    .sti-ToggleButton-root-07803[data-size="sm"]:not([data-in-group]) {
+      --sti-toggle-button-h: var(--sti-control-h-md);
+    }
+  }
+
+  .sti-ToggleButton-root-07803[data-variant="secondary"] {
+    --sti-toggle-button-border: var(--sti-border-strong);
+  }
+
+  .sti-ToggleButton-root-07803[data-variant="ghost"] {
+    --sti-toggle-button-fg: var(--sti-fg-muted);
+  }
+
+  @media (hover: hover) {
+    .sti-ToggleButton-root-07803[data-hovered]:not([data-disabled], [data-selected])[data-variant="secondary"] {
+      --sti-toggle-button-border: var(--sti-border-accent);
+      --sti-toggle-button-bg: var(--sti-bg-accent-subtle);
+      --sti-toggle-button-fg: var(--sti-fg-accent);
+    }
+
+    .sti-ToggleButton-root-07803[data-hovered]:not([data-disabled], [data-selected])[data-variant="ghost"] {
+      --sti-toggle-button-bg: var(--sti-bg-surface-hover);
+      --sti-toggle-button-fg: var(--sti-fg);
+    }
+
+    .sti-ToggleButton-root-07803[data-hovered][data-selected]:not([data-disabled]) {
+      --sti-toggle-button-bg: var(--sti-fill-accent-hover);
+    }
+  }
+
+  .sti-ToggleButton-root-07803[data-selected] {
+    --sti-toggle-button-bg: var(--sti-fill-accent);
+    --sti-toggle-button-fg: var(--sti-fg-on-accent);
+    --sti-toggle-button-border: var(--sti-toggle-button-selected-border);
+  }
+
+  .sti-ToggleButton-root-07803[data-pressed]:not([data-disabled]) {
+    transform: scale(var(--sti-toggle-button-press-scale));
+  }
+
+  .sti-ToggleButton-root-07803:focus-visible, .sti-ToggleButton-root-07803[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ToggleButton-root-07803:focus:not([data-focus-visible]) {
+    outline: none;
+  }
+
+  .sti-ToggleButton-root-07803[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-ToggleButton-icon-197c3 {
+    font-size: var(--sti-toggle-button-icon);
+    flex: none;
+    display: inline-flex;
+  }
+
+  .sti-ToggleButton-label-6949c {
+    text-overflow: ellipsis;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ToggleButton-root-07803 {
+      transition: none;
+    }
+
+    .sti-ToggleButton-root-07803[data-pressed] {
+      transform: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ToggleButton-root-07803 {
+      border-color: buttontext;
+    }
+
+    .sti-ToggleButton-root-07803[data-selected] {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+      border-color: highlight;
+    }
+
+    .sti-ToggleButton-root-07803[data-disabled] {
+      color: graytext;
+      opacity: 1;
+      border-color: graytext;
+    }
+  }
+}

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode, Ref } from "react";
+export type ToggleButtonVariant = "secondary" | "ghost";
+export type ToggleButtonSize = "sm" | "md" | "lg";
+type ToggleButtonContent = {
+  /** Görünür etiket; erişilebilir addır. Seçilince değişmez (durumu `aria-pressed` söyler). */
+  children: ReactNode;
+  /** Etiketten önceki süs ikonu. */
+  icon?: ReactNode;
+  label?: undefined;
+} | {
+  children?: undefined;
+  /** Yalnız ikonlu kullanımda ikon (süs; anlamı `label` taşır). */
+  icon: ReactNode;
+  /** Yalnız ikonlu kullanımda erişilebilir ad (zorunlu): `aria-label` olur. */
+  label: string;
+};
+export type ToggleButtonProps = ToggleButtonContent & {
+  /**
+   * Görünüş türü (seçili değilken):
+   * - `secondary` (varsayılan): çizgili;
+   * - `ghost`: çizgisiz (araç çubuğu).
+   * Seçiliyken iki tür de SİNYAL turkuazı dolguyla çizilir.
+   */
+  variant?: ToggleButtonVariant;
+  /** Boy: yükseklik `--sti-control-h-sm/md/lg`; dokunmatikte en az 44 piksel. */
+  size?: ToggleButtonSize;
+  /** Kontrollü kullanımda basılı durumu. */
+  isSelected?: boolean;
+  /** Kontrolsüz kullanımda başlangıç durumu. */
+  defaultSelected?: boolean;
+  /** Durum değişince yeni değerle çağrılır. */
+  onChange?: (isSelected: boolean) => void;
+  isDisabled?: boolean;
+  autoFocus?: boolean;
+  className?: string;
+  id?: string;
+  "aria-describedby"?: string;
+  /** Düğmenin denetlediği öğenin kimliği (ör. açılıp kapanan panel). */
+  "aria-controls"?: string;
+  ref?: Ref<HTMLButtonElement>;
+};
+/**
+ * Basılı/basılı değil durumlu düğme (WAI-ARIA APG "Button", `aria-pressed`). Kontrollü
+ * (`isSelected` + `onChange`) ya da kontrolsüz (`defaultSelected`) kullanılır.
+ */
+export declare function ToggleButton(props: ToggleButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,38 @@
+"use client";
+import ToggleButton_module_default from "./ToggleButton.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ToggleButton } from "react-aria-components";
+// src/components/ToggleButton/ToggleButton.tsx
+/**
+* Basılı/basılı değil durumlu düğme (WAI-ARIA APG "Button", `aria-pressed`). Kontrollü
+* (`isSelected` + `onChange`) ya da kontrolsüz (`defaultSelected`) kullanılır.
+*/
+function ToggleButton$1(props) {
+	return /* @__PURE__ */ jsx(ToggleButtonView, { ...props });
+}
+/** ToggleButton ve ToggleGroup öğesinin ortak çizimi (iç kullanım). */
+function ToggleButtonView({ variant = "secondary", size = "md", icon, label, children, className, id, group, ...rest }) {
+	const iconOnly = children === void 0;
+	return /* @__PURE__ */ jsxs(ToggleButton, {
+		...rest,
+		id: group ? group.value : id,
+		excludeFromTabOrder: group?.excludeFromTabOrder,
+		onFocus: group?.onFocus,
+		"aria-label": iconOnly ? label : void 0,
+		className: [ToggleButton_module_default.root, className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		"data-size": size,
+		"data-icon-only": iconOnly ? "" : void 0,
+		"data-in-group": group ? "" : void 0,
+		"data-value": group?.value,
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			className: ToggleButton_module_default.icon,
+			"aria-hidden": "true",
+			children: icon
+		}) : null, iconOnly ? null : /* @__PURE__ */ jsx("span", {
+			className: ToggleButton_module_default.label,
+			children
+		})]
+	});
+}
+export { ToggleButton$1 as ToggleButton, ToggleButtonView };

package/dist/components/ToggleButton/ToggleButton.module.js

@@ -0,0 +1,8 @@
+import './ToggleButton.css';
+// src/components/ToggleButton/ToggleButton.module.css
+var ToggleButton_module_default = {
+	"root": "sti-ToggleButton-root-07803",
+	"icon": "sti-ToggleButton-icon-197c3",
+	"label": "sti-ToggleButton-label-6949c"
+};
+export { ToggleButton_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ToggleButton, ToggleButtonProps, ToggleButtonSize, ToggleButtonVariant } from "./ToggleButton.js";
+export { ToggleButton, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant };

package/dist/components/ToggleGroup/ToggleGroup.css

@@ -0,0 +1,98 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ToggleGroup-keys-cf167 {
+    display: contents;
+  }
+
+  .sti-ToggleGroup-root-874c6 {
+    --sti-toggle-group-h: var(--sti-control-h-md);
+    --sti-toggle-group-pad: var(--sti-space-0-5);
+    --sti-toggle-group-gap: var(--sti-space-0-5);
+    --sti-toggle-group-bw: var(--sti-border-width);
+    --sti-toggle-group-border: var(--sti-border-strong);
+    --sti-toggle-group-radius: var(--sti-radius-pill);
+    --sti-toggle-group-item-h: calc(var(--sti-toggle-group-h) -
+      2 *
+      var(--sti-toggle-group-pad) -
+      2 *
+      var(--sti-toggle-group-bw));
+    --sti-toggle-group-item-px: var(--sti-space-4);
+    --sti-toggle-group-item-radius: var(--sti-radius-pill);
+    align-items: center;
+    gap: var(--sti-toggle-group-gap);
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
+    padding: var(--sti-toggle-group-pad);
+    border: var(--sti-toggle-group-bw) solid var(--sti-toggle-group-border);
+    border-radius: var(--sti-toggle-group-radius);
+    vertical-align: middle;
+    flex-wrap: nowrap;
+    display: inline-flex;
+  }
+
+  .sti-ToggleGroup-root-874c6[data-size="sm"] {
+    --sti-toggle-group-h: var(--sti-control-h-sm);
+    --sti-toggle-group-item-px: var(--sti-space-3);
+  }
+
+  .sti-ToggleGroup-root-874c6[data-size="lg"] {
+    --sti-toggle-group-h: var(--sti-control-h-lg);
+    --sti-toggle-group-item-px: var(--sti-space-5);
+  }
+
+  @media (pointer: coarse) {
+    .sti-ToggleGroup-root-874c6 {
+      --sti-toggle-group-item-h: max(calc(var(--sti-toggle-group-h) -
+          2 *
+          var(--sti-toggle-group-pad) -
+          2 *
+          var(--sti-toggle-group-bw)),
+        var(--sti-control-h-md));
+    }
+  }
+
+  .sti-ToggleGroup-root-874c6[data-variant="ghost"] {
+    --sti-toggle-group-pad: 0px;
+    --sti-toggle-group-bw: 0px;
+    --sti-toggle-group-gap: var(--sti-space-1);
+    flex-wrap: wrap;
+  }
+
+  .sti-ToggleGroup-root-874c6[data-orientation="vertical"] {
+    --sti-toggle-group-radius: var(--sti-radius-md);
+    --sti-toggle-group-item-radius: calc(var(--sti-radius-md) -
+      var(--sti-toggle-group-pad) -
+      var(--sti-toggle-group-bw));
+    flex-flow: column;
+    align-items: stretch;
+  }
+
+  .sti-ToggleGroup-root-874c6[data-full-width] {
+    contain: inline-size;
+    width: 100%;
+    display: flex;
+  }
+
+  .sti-ToggleGroup-root-874c6[data-full-width][data-orientation="horizontal"] > [data-in-group] {
+    flex: 1 1 0;
+  }
+
+  .sti-ToggleGroup-root-874c6[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+  }
+
+  .sti-ToggleGroup-root-874c6[data-disabled] > [data-in-group] {
+    opacity: 1;
+  }
+
+  @media (forced-colors: active) {
+    .sti-ToggleGroup-root-874c6[data-variant="outlined"] {
+      border-color: buttontext;
+    }
+
+    .sti-ToggleGroup-root-874c6[data-disabled] {
+      border-color: graytext;
+    }
+  }
+}

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,78 @@
+import { ToggleButtonSize } from "../ToggleButton/ToggleButton.js";
+import { ReactNode } from "react";
+export type ToggleGroupVariant = "outlined" | "ghost";
+type ToggleGroupName = {
+  /** Grubun erişilebilir adı (`aria-label`): "Metin biçimi", "Hizalama". */
+  label: string;
+  "aria-labelledby"?: undefined;
+} | {
+  label?: undefined;
+  /** Görünür bir başlık grubu adlandırıyorsa o başlığın kimliği. */
+  "aria-labelledby": string;
+};
+type ToggleGroupSelection = {
+  /** Tek seçim (varsayılan): öğeler `radio`, grup `radiogroup` olarak okunur. */
+  selectionMode?: "single";
+  /** Kontrollü seçili değer; seçim yoksa `null`. */
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (value: string | null) => void;
+} | {
+  /** Çoklu seçim: öğeler `aria-pressed` düğmeler, grup `toolbar` olarak okunur. */
+  selectionMode: "multiple";
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (value: string[]) => void;
+};
+export type ToggleGroupProps = ToggleGroupName & ToggleGroupSelection & {
+  /**
+   * Seçimin boşaltılması engellensin mi. Varsayılan: tek seçimde `true` (radio grubunda seçili
+   * öğe yeniden basılınca kalkmaz), çoklu seçimde `false`.
+   */
+  disallowEmptySelection?: boolean;
+  /**
+   * Görünüş:
+   * - `outlined` (varsayılan): öğeler çizgili hap bir kabın içinde;
+   * - `ghost`: kapsız, öğeler aralıklı (araç çubuğu); sığmazsa satıra iner.
+   */
+  variant?: ToggleGroupVariant;
+  /** Boy: grubun yüksekliği `--sti-control-h-sm/md/lg`; dokunmatikte öğeler en az 44 piksel. */
+  size?: ToggleButtonSize;
+  orientation?: "horizontal" | "vertical";
+  /** Kapsayıcının tüm genişliği; yatayda öğeler eşit pay alır, uzun etiketler kısalır. */
+  fullWidth?: boolean;
+  isDisabled?: boolean;
+  /** `ToggleGroupItem` öğeleri. */
+  children: ReactNode;
+  className?: string;
+  id?: string;
+  "aria-describedby"?: string;
+};
+/**
+ * Birbiriyle ilişkili basılı/basılı değil düğmeler: tek seçim (hizalama) ya da çoklu seçim (kalın,
+ * italik). Ok tuşlarıyla gezinilir; grupta yalnız bir öğe sekme sırasındadır (WAI-ARIA APG
+ * "Radio Group" / "Toolbar").
+ */
+export declare function ToggleGroup(props: ToggleGroupProps): import("react").JSX.Element;
+type ToggleGroupItemContent = {
+  /** Görünür etiket; erişilebilir addır. */
+  children: ReactNode;
+  /** Etiketten önceki süs ikonu. */
+  icon?: ReactNode;
+  label?: undefined;
+} | {
+  children?: undefined;
+  icon: ReactNode;
+  /** Yalnız ikonlu öğede erişilebilir ad (zorunlu). */
+  label: string;
+};
+export type ToggleGroupItemProps = ToggleGroupItemContent & {
+  /** Öğenin gruptaki değeri (benzersiz). */
+  value: string;
+  isDisabled?: boolean;
+  className?: string;
+  "aria-describedby"?: string;
+};
+/** ToggleGroup öğesi; yalnız ToggleGroup içinde kullanılır. */
+export declare function ToggleGroupItem({ value, ...rest }: ToggleGroupItemProps): import("react").JSX.Element;
+export {};

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,87 @@
+"use client";
+import { useControllable, useRoving } from "./roving.js";
+import { ToggleButtonView } from "../ToggleButton/ToggleButton.js";
+import ToggleGroup_module_default from "./ToggleGroup.module.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { ToggleButtonGroup } from "react-aria-components";
+// src/components/ToggleGroup/ToggleGroup.tsx
+const ToggleGroupContext = createContext(null);
+const toList = (props, which) => {
+	const v = props[which];
+	if (v === void 0) return void 0;
+	if (v === null) return [];
+	return typeof v === "string" ? [v] : v;
+};
+/**
+* Birbiriyle ilişkili basılı/basılı değil düğmeler: tek seçim (hizalama) ya da çoklu seçim (kalın,
+* italik). Ok tuşlarıyla gezinilir; grupta yalnız bir öğe sekme sırasındadır (WAI-ARIA APG
+* "Radio Group" / "Toolbar").
+*/
+function ToggleGroup(props) {
+	const { label, selectionMode = "single", disallowEmptySelection = selectionMode === "single", variant = "outlined", size = "md", orientation = "horizontal", fullWidth, isDisabled, children, className, id } = props;
+	const multiple = props.selectionMode === "multiple";
+	const notify = props.onChange;
+	const [values, setValues] = useControllable(toList(props, "value"), toList(props, "defaultValue") ?? [], useCallback((next) => notify?.(multiple ? next : next[0] ?? null), [notify, multiple]));
+	const selected = useMemo(() => new Set(values), [values]);
+	const select = useCallback((value) => {
+		if (!(selected.size === 1 && selected.has(value))) setValues([value]);
+	}, [selected, setValues]);
+	const roving = useRoving({
+		mode: selectionMode,
+		orientation,
+		selected,
+		select
+	});
+	const context = useMemo(() => ({
+		size,
+		roving
+	}), [size, roving]);
+	const domId = { id };
+	return /* @__PURE__ */ jsx("div", {
+		ref: roving.wrapperRef,
+		className: ToggleGroup_module_default.keys,
+		onKeyDownCapture: roving.onKeyDownCapture,
+		onFocus: roving.onFocus,
+		children: /* @__PURE__ */ jsx(ToggleButtonGroup, {
+			...domId,
+			"aria-label": label,
+			"aria-labelledby": props["aria-labelledby"],
+			"aria-describedby": props["aria-describedby"],
+			className: [ToggleGroup_module_default.root, className].filter(Boolean).join(" "),
+			"data-variant": variant,
+			"data-size": size,
+			"data-full-width": fullWidth ? "" : void 0,
+			selectionMode,
+			disallowEmptySelection,
+			selectedKeys: selected,
+			onSelectionChange: (keys) => {
+				const next = [...keys].map(String);
+				if (next.length !== selected.size || next.some((k) => !selected.has(k))) setValues(next);
+			},
+			orientation,
+			isDisabled,
+			children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+				value: context,
+				children
+			})
+		})
+	});
+}
+/** ToggleGroup öğesi; yalnız ToggleGroup içinde kullanılır. */
+function ToggleGroupItem({ value, ...rest }) {
+	const ctx = useContext(ToggleGroupContext);
+	if (!ctx) throw new Error("ToggleGroupItem yalnız ToggleGroup içinde kullanılır.");
+	const { size, roving } = ctx;
+	return /* @__PURE__ */ jsx(ToggleButtonView, {
+		...rest,
+		variant: "ghost",
+		size,
+		group: {
+			value,
+			excludeFromTabOrder: roving.tabStop !== null && roving.tabStop !== value,
+			onFocus: roving.onItemFocus
+		}
+	});
+}
+export { ToggleGroup, ToggleGroupItem };

package/dist/components/ToggleGroup/ToggleGroup.module.js

@@ -0,0 +1,7 @@
+import './ToggleGroup.css';
+// src/components/ToggleGroup/ToggleGroup.module.css
+var ToggleGroup_module_default = {
+	"keys": "sti-ToggleGroup-keys-cf167",
+	"root": "sti-ToggleGroup-root-874c6"
+};
+export { ToggleGroup_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupVariant } from "./ToggleGroup.js";
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleGroupVariant };

package/dist/components/ToggleGroup/roving.js

@@ -0,0 +1,94 @@
+"use client";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+// src/components/ToggleGroup/roving.ts
+const ITEM = "button[data-value]";
+function enabledItems(root) {
+	if (!root) return [];
+	return Array.from(root.querySelectorAll(ITEM)).filter((b) => !b.disabled);
+}
+function isItem(el) {
+	return el instanceof HTMLButtonElement && el.matches(ITEM);
+}
+function useRoving({ mode, orientation, selected, select }) {
+	const wrapperRef = useRef(null);
+	const [active, setActive] = useState(null);
+	const [tabStop, setTabStop] = useState(() => {
+		const first = selected.values().next();
+		return first.done ? null : first.value;
+	});
+	useLayoutEffect(() => {
+		const values = enabledItems(wrapperRef.current).map((b) => b.dataset.value);
+		const chosen = values.find((v) => selected.has(v));
+		const recent = active !== null && values.includes(active) ? active : void 0;
+		const next = (mode === "single" ? chosen ?? recent : recent ?? chosen) ?? values[0] ?? null;
+		setTabStop((prev) => prev === next ? prev : next);
+	});
+	return {
+		wrapperRef,
+		tabStop,
+		onKeyDownCapture: useCallback((e) => {
+			const target = e.target;
+			if (!isItem(target)) return;
+			if (e.key === "Tab") {
+				e.stopPropagation();
+				return;
+			}
+			if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+			const items = enabledItems(wrapperRef.current);
+			const i = items.indexOf(target);
+			if (i < 0) return;
+			const forward = getComputedStyle(target).direction === "rtl" ? -1 : 1;
+			const radio = mode === "single";
+			const horizontal = orientation === "horizontal";
+			let next = null;
+			switch (e.key) {
+				case "ArrowRight":
+					if (radio || horizontal) next = i + forward;
+					break;
+				case "ArrowLeft":
+					if (radio || horizontal) next = i - forward;
+					break;
+				case "ArrowDown":
+					if (radio || !horizontal) next = i + 1;
+					break;
+				case "ArrowUp":
+					if (radio || !horizontal) next = i - 1;
+					break;
+				case "Home":
+					next = 0;
+					break;
+				case "End": next = items.length - 1;
+			}
+			if (next === null) return;
+			e.preventDefault();
+			e.stopPropagation();
+			const el = items[(next + items.length) % items.length];
+			el.focus();
+			if (radio) select(el.dataset.value);
+		}, [
+			mode,
+			orientation,
+			select
+		]),
+		onFocus: useCallback((e) => {
+			const target = e.target;
+			if (!isItem(target)) return;
+			const current = target.ownerDocument.activeElement;
+			if (current !== target && isItem(current) && wrapperRef.current?.contains(current)) target.focus();
+		}, []),
+		onItemFocus: useCallback((e) => {
+			const value = e.currentTarget.dataset.value;
+			if (value !== void 0) setActive(value);
+		}, [])
+	};
+}
+/** Kontrollü ya da kontrolsüz değer (React Aria'nın türü dışa açılmadan). */
+function useControllable(value, defaultValue, onChange) {
+	const [inner, setInner] = useState(defaultValue);
+	const controlled = value !== void 0;
+	return [controlled ? value : inner, useCallback((v) => {
+		if (!controlled) setInner(v);
+		onChange?.(v);
+	}, [controlled, onChange])];
+}
+export { useControllable, useRoving };