@stisocial/ui 0.1.0 → 0.2.0

package/dist/commerce/AddToCartButton/AddToCartButton.css

@@ -0,0 +1,54 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-AddToCartButton-root-04d87 {
+    gap: var(--sti-space-2);
+    min-width: 0;
+    max-width: 100%;
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    display: inline-flex;
+  }
+
+  .sti-AddToCartButton-root-04d87[data-full-width] {
+    width: 100%;
+    display: flex;
+  }
+
+  .sti-AddToCartButton-stack-e4c06 {
+    justify-items: start;
+    min-width: 0;
+    display: inline-grid;
+  }
+
+  .sti-AddToCartButton-state-de83e {
+    overflow-wrap: anywhere;
+    min-width: 0;
+    transition: opacity var(--sti-duration-fast) var(--sti-ease-out);
+    grid-area: 1 / 1;
+  }
+
+  .sti-AddToCartButton-state-de83e[data-active="false"] {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .sti-AddToCartButton-error-6ea83 {
+    align-items: flex-start;
+    gap: var(--sti-space-1);
+    color: var(--sti-fg-danger-strong);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    display: flex;
+  }
+
+  .sti-AddToCartButton-errorIcon-c4695 {
+    flex: none;
+    margin-block-start: var(--sti-space-0-5);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-AddToCartButton-state-de83e {
+      transition: none;
+    }
+  }
+}

package/dist/commerce/AddToCartButton/AddToCartButton.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode, Ref } from "react";
+export type AddToCartStatus = "idle" | "pending" | "added" | "error";
+export interface AddToCartButtonProps {
+  /**
+   * Basılınca çağrılır. Söz (`Promise`) döndürürse düğme sonuçlanana kadar beklemede kalır; söz
+   * başarıyla biterse "eklendi" görünüşü, reddedilirse hata metni gösterilir.
+   */
+  onAdd?: () => unknown;
+  /** Eklendi görünüşü başladığında çağrılır. */
+  onAdded?: () => void;
+  /** Ekleme başarısız olduğunda çağrılır. */
+  onError?: (error: unknown) => void;
+  /** Dışarıdan bekleme (sepet isteği uygulamada yürütülüyorsa). */
+  isPending?: boolean;
+  /** Dışarıdan "eklendi" görünüşü. */
+  isAdded?: boolean;
+  /** Ürün tükendi: düğme devre dışı kalır ve `outOfStockLabel` yazılır. */
+  isOutOfStock?: boolean;
+  isDisabled?: boolean;
+  /** Eylem etiketi; varsayılan yerleşik "Sepete ekle". */
+  children?: ReactNode;
+  /** Eklendi görünüşünün etiketi; varsayılan "Sepete eklendi". */
+  addedLabel?: string;
+  /** Tükendi etiketi; varsayılan "Tükendi". */
+  outOfStockLabel?: string;
+  /** Eklendi görünüşünün süresi (milisaniye); varsayılan 2000. */
+  addedDuration?: number;
+  /** Görünüş türü; varsayılan `primary` (ekranın ana eylemi). */
+  variant?: "primary" | "secondary" | "inverse";
+  size?: "sm" | "md" | "lg";
+  /** Kapsayıcının tüm genişliği. */
+  fullWidth?: boolean;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * "Sepete ekle" düğmesi: bekleme, eklendi ve hata durumlarını yönetir. Etiketler üst üste
+ * dizilir, düğmenin genişliği durum değişince oynamaz. Sonuç ekran okuyucuya duyurulur ("Sepete
+ * eklendi"); hata metni uyarı olarak okunur. Tükenen üründe düğme devre dışıdır.
+ */
+export declare function AddToCartButton({ onAdd, onAdded, onError, isPending, isAdded, isOutOfStock, isDisabled, children, addedLabel, outOfStockLabel, addedDuration, variant, size, fullWidth, className, id, ref }: AddToCartButtonProps): import("react").JSX.Element;

package/dist/commerce/AddToCartButton/AddToCartButton.js

@@ -0,0 +1,94 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { Button } from "../../components/Button/Button.js";
+import { ShoppingBagIcon } from "../../icons/generated/ShoppingBagIcon.js";
+import AddToCartButton_module_default from "./AddToCartButton.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/commerce/AddToCartButton/AddToCartButton.tsx
+/**
+* "Sepete ekle" düğmesi: bekleme, eklendi ve hata durumlarını yönetir. Etiketler üst üste
+* dizilir, düğmenin genişliği durum değişince oynamaz. Sonuç ekran okuyucuya duyurulur ("Sepete
+* eklendi"); hata metni uyarı olarak okunur. Tükenen üründe düğme devre dışıdır.
+*/
+function AddToCartButton({ onAdd, onAdded, onError, isPending, isAdded, isOutOfStock, isDisabled, children, addedLabel, outOfStockLabel, addedDuration = 2e3, variant = "primary", size = "md", fullWidth, className, id, ref }) {
+	const t = useMessages();
+	const [status, setStatus] = useState("idle");
+	const timer = useRef(void 0);
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+			clearTimeout(timer.current);
+		};
+	}, []);
+	const settle = (next, ms) => {
+		setStatus(next);
+		clearTimeout(timer.current);
+		timer.current = setTimeout(() => setStatus("idle"), ms);
+	};
+	const press = async () => {
+		clearTimeout(timer.current);
+		try {
+			const result = onAdd?.();
+			if (result instanceof Promise) {
+				setStatus("pending");
+				await result;
+			}
+			if (!mounted.current) return;
+			settle("added", addedDuration);
+			onAdded?.();
+		} catch (error) {
+			if (!mounted.current) return;
+			settle("error", 4e3);
+			onError?.(error);
+		}
+	};
+	const shown = isPending ? "pending" : isAdded ? "added" : status;
+	const added = shown === "added";
+	const label = isOutOfStock ? outOfStockLabel ?? t.outOfStock : children ?? t.addToCart;
+	const announced = added ? addedLabel ?? t.addedToCart : null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: [AddToCartButton_module_default.root, className].filter(Boolean).join(" "),
+		"data-full-width": fullWidth ? "" : void 0,
+		"data-status": shown,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				id,
+				ref,
+				variant,
+				size,
+				fullWidth,
+				isDisabled: isDisabled || isOutOfStock,
+				isPending: shown === "pending",
+				iconStart: added ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(ShoppingBagIcon, {}),
+				onPress: press,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: AddToCartButton_module_default.stack,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: AddToCartButton_module_default.state,
+						"data-active": !added,
+						"aria-hidden": added || void 0,
+						children: label
+					}), /* @__PURE__ */ jsx("span", {
+						className: AddToCartButton_module_default.state,
+						"data-active": added,
+						"aria-hidden": !added || void 0,
+						children: addedLabel ?? t.addedToCart
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("output", { children: announced }) }),
+			shown === "error" ? /* @__PURE__ */ jsxs("span", {
+				className: AddToCartButton_module_default.error,
+				role: "alert",
+				children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: AddToCartButton_module_default.errorIcon }), t.errorAddToCart]
+			}) : null
+		]
+	});
+}
+export { AddToCartButton };

package/dist/commerce/AddToCartButton/AddToCartButton.module.js

@@ -0,0 +1,10 @@
+import './AddToCartButton.css';
+// src/commerce/AddToCartButton/AddToCartButton.module.css
+var AddToCartButton_module_default = {
+	"root": "sti-AddToCartButton-root-04d87",
+	"stack": "sti-AddToCartButton-stack-e4c06",
+	"state": "sti-AddToCartButton-state-de83e",
+	"error": "sti-AddToCartButton-error-6ea83",
+	"errorIcon": "sti-AddToCartButton-errorIcon-c4695"
+};
+export { AddToCartButton_module_default as default };

package/dist/commerce/AddToCartButton/index.d.ts

@@ -0,0 +1,2 @@
+import { AddToCartButton, AddToCartButtonProps, AddToCartStatus } from "./AddToCartButton.js";
+export { AddToCartButton, AddToCartButtonProps, AddToCartStatus };

package/dist/commerce/PriceDisplay/PriceDisplay.css

@@ -0,0 +1,77 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PriceDisplay-root-b6a54 {
+    --sti-price-font-size: var(--sti-font-size-xl);
+    --sti-price-line-height: var(--sti-line-height-xl);
+    --sti-price-small-size: var(--sti-font-size-sm);
+    --sti-price-small-line: var(--sti-line-height-sm);
+    --sti-price-gap: var(--sti-space-1) var(--sti-space-2);
+    --sti-price-fg: var(--sti-fg);
+    --sti-price-original-fg: var(--sti-fg-muted);
+    --sti-price-discount-bg: var(--sti-bg-danger-subtle);
+    --sti-price-discount-fg: var(--sti-fg-danger-strong);
+    align-items: baseline;
+    gap: var(--sti-price-gap);
+    min-width: 0;
+    max-width: 100%;
+    color: var(--sti-price-fg);
+    font-family: var(--sti-font-text);
+    flex-wrap: wrap;
+    display: inline-flex;
+  }
+
+  .sti-PriceDisplay-root-b6a54[data-size="sm"] {
+    --sti-price-font-size: var(--sti-font-size-md);
+    --sti-price-line-height: var(--sti-line-height-md);
+    --sti-price-small-size: var(--sti-font-size-xs);
+    --sti-price-small-line: var(--sti-line-height-xs);
+  }
+
+  .sti-PriceDisplay-root-b6a54[data-size="lg"] {
+    --sti-price-font-size: var(--sti-font-size-3xl);
+    --sti-price-line-height: var(--sti-line-height-3xl);
+    --sti-price-small-size: var(--sti-font-size-md);
+    --sti-price-small-line: var(--sti-line-height-md);
+  }
+
+  .sti-PriceDisplay-current-3787f {
+    font-size: var(--sti-price-font-size);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-price-line-height);
+    letter-spacing: var(--sti-tracking-md);
+  }
+
+  .sti-PriceDisplay-original-0f4ed {
+    color: var(--sti-price-original-fg);
+    font-size: var(--sti-price-small-size);
+    line-height: var(--sti-price-small-line);
+    text-decoration: line-through;
+    text-decoration-thickness: var(--sti-border-width);
+  }
+
+  .sti-PriceDisplay-discount-25046 {
+    padding-inline: var(--sti-space-2);
+    border-radius: var(--sti-radius-xs);
+    background: var(--sti-price-discount-bg);
+    color: var(--sti-price-discount-fg);
+    font-family: var(--sti-font-numeric);
+    font-size: var(--sti-price-small-size);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-price-small-line);
+    white-space: nowrap;
+  }
+
+  .sti-PriceDisplay-tax-f2abf {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-price-small-size);
+    line-height: var(--sti-price-small-line);
+    flex-basis: 100%;
+  }
+
+  @media (forced-colors: active) {
+    .sti-PriceDisplay-discount-25046 {
+      border: var(--sti-border-width) solid CanvasText;
+    }
+  }
+}

package/dist/commerce/PriceDisplay/PriceDisplay.d.ts

@@ -0,0 +1,35 @@
+import { Locale } from "../../provider/locale.js";
+export type PriceDisplaySize = "sm" | "md" | "lg";
+export interface PriceDisplayProps {
+  /** Satış fiyatı (para biriminin ana birimiyle); sonlu ve sıfırdan büyük ya da eşit olmalıdır. */
+  price: number;
+  /** İndirimden önceki fiyat; `price`'tan büyükse üstü çizili yazılır ve indirim oranı gösterilir. */
+  compareAtPrice?: number;
+  /** ISO 4217 para birimi; varsayılan "TRY". */
+  currency?: string;
+  /** Kuruşsuz gösterim. */
+  whole?: boolean;
+  /** İndirim oranı rozeti ("%25"); varsayılan açık. */
+  showDiscount?: boolean;
+  /** Fiyatın altındaki vergi notu ("KDV dahil"); verilmezse yazılmaz. */
+  taxLabel?: string;
+  /** Üstü çizili fiyatın ekran okuyucu öneki ("Önceki fiyat"). */
+  originalLabel?: string;
+  /** Satış fiyatının ekran okuyucu öneki ("İndirimli fiyat"); yalnız indirimde okunur. */
+  currentLabel?: string;
+  /** İndirim oranının ekran okuyucu eki ("indirim"). */
+  discountLabel?: string;
+  /** Boy: `sm`, `md` (varsayılan), `lg`. */
+  size?: PriceDisplaySize;
+  locale?: Locale;
+  className?: string;
+  id?: string;
+}
+/** İndirim oranı (0–1 arası, tam yüzdeye yuvarlanmış); indirim yoksa `null`. */
+export declare function discountRatio(price: number, compareAtPrice?: number): number | null;
+/**
+ * Ürün fiyatı: satış fiyatı, varsa üstü çizili önceki fiyat, indirim oranı ve vergi notu. Sunucu
+ * bileşenidir (yerleşik metin taşımaz; notlar özellikle verilir). Rakamlar eşit genişliktedir ve
+ * fiyat satırda bölünmez; indirim yalnız renkle değil üstü çizili fiyat ve yüzdeyle de anlatılır.
+ */
+export declare function PriceDisplay({ price, compareAtPrice, currency, whole, showDiscount, taxLabel, originalLabel, currentLabel, discountLabel, size, locale, className, id }: PriceDisplayProps): import("react").JSX.Element;

package/dist/commerce/PriceDisplay/PriceDisplay.js

@@ -0,0 +1,60 @@
+import { createFormatter } from "../../format/formatter.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { Amount } from "../../components/Amount/Amount.js";
+import PriceDisplay_module_default from "./PriceDisplay.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/commerce/PriceDisplay/PriceDisplay.tsx
+/** İndirim oranı (0–1 arası, tam yüzdeye yuvarlanmış); indirim yoksa `null`. */
+function discountRatio(price, compareAtPrice) {
+	if (compareAtPrice === void 0 || !(compareAtPrice > price) || compareAtPrice <= 0) return null;
+	const percent = Math.round((1 - price / compareAtPrice) * 100);
+	return percent >= 1 ? percent / 100 : null;
+}
+/**
+* Ürün fiyatı: satış fiyatı, varsa üstü çizili önceki fiyat, indirim oranı ve vergi notu. Sunucu
+* bileşenidir (yerleşik metin taşımaz; notlar özellikle verilir). Rakamlar eşit genişliktedir ve
+* fiyat satırda bölünmez; indirim yalnız renkle değil üstü çizili fiyat ve yüzdeyle de anlatılır.
+*/
+function PriceDisplay({ price, compareAtPrice, currency = "TRY", whole, showDiscount = true, taxLabel, originalLabel, currentLabel, discountLabel, size = "md", locale, className, id }) {
+	const ratio = discountRatio(price, compareAtPrice);
+	const discounted = ratio !== null;
+	const percent = discounted ? createFormatter({ locale }).percent(ratio) : null;
+	return /* @__PURE__ */ jsxs("span", {
+		id,
+		className: [PriceDisplay_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		"data-discounted": discounted ? "" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: PriceDisplay_module_default.current,
+				children: [discounted && currentLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `${currentLabel}: ` }) : null, /* @__PURE__ */ jsx(Amount, {
+					value: price,
+					currency,
+					whole,
+					locale
+				})]
+			}),
+			discounted && compareAtPrice !== void 0 ? /* @__PURE__ */ jsxs("s", {
+				className: PriceDisplay_module_default.original,
+				children: [originalLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `${originalLabel}: ` }) : null, /* @__PURE__ */ jsx(Amount, {
+					value: compareAtPrice,
+					currency,
+					whole,
+					locale
+				})]
+			}) : null,
+			discounted && showDiscount ? /* @__PURE__ */ jsxs("span", {
+				className: PriceDisplay_module_default.discount,
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: `−${percent}`
+				}), /* @__PURE__ */ jsx(VisuallyHidden, { children: `${percent}${discountLabel ? ` ${discountLabel}` : ""}` })]
+			}) : null,
+			taxLabel ? /* @__PURE__ */ jsx("span", {
+				className: PriceDisplay_module_default.tax,
+				children: taxLabel
+			}) : null
+		]
+	});
+}
+export { PriceDisplay, discountRatio };

package/dist/commerce/PriceDisplay/PriceDisplay.module.js

@@ -0,0 +1,10 @@
+import './PriceDisplay.css';
+// src/commerce/PriceDisplay/PriceDisplay.module.css
+var PriceDisplay_module_default = {
+	"root": "sti-PriceDisplay-root-b6a54",
+	"current": "sti-PriceDisplay-current-3787f",
+	"original": "sti-PriceDisplay-original-0f4ed",
+	"discount": "sti-PriceDisplay-discount-25046",
+	"tax": "sti-PriceDisplay-tax-f2abf"
+};
+export { PriceDisplay_module_default as default };

package/dist/commerce/QuantityStepper/QuantityStepper.css

@@ -0,0 +1,108 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-QuantityStepper-root-2077c {
+    --sti-quantity-h: var(--sti-control-h-md);
+    --sti-quantity-input-w: var(--sti-space-12);
+    --sti-quantity-gap: var(--sti-space-2);
+    --sti-quantity-radius: var(--sti-radius-md);
+    --sti-quantity-font-size: var(--sti-font-size-md);
+    gap: var(--sti-space-1);
+    max-width: 100%;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    display: inline-flex;
+  }
+
+  .sti-QuantityStepper-root-2077c[data-size="sm"] {
+    --sti-quantity-h: var(--sti-control-h-sm);
+    --sti-quantity-input-w: var(--sti-space-10);
+    --sti-quantity-font-size: var(--sti-font-size-sm);
+  }
+
+  .sti-QuantityStepper-root-2077c[data-size="lg"] {
+    --sti-quantity-h: var(--sti-control-h-lg);
+    --sti-quantity-input-w: var(--sti-space-16);
+    --sti-quantity-font-size: var(--sti-font-size-lg);
+  }
+
+  .sti-QuantityStepper-label-6ba7f {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-sm);
+  }
+
+  .sti-QuantityStepper-group-27220 {
+    align-items: center;
+    gap: var(--sti-quantity-gap);
+    display: inline-flex;
+  }
+
+  .sti-QuantityStepper-input-63abe {
+    box-sizing: border-box;
+    width: var(--sti-quantity-input-w);
+    height: var(--sti-quantity-h);
+    padding-inline: var(--sti-space-1);
+    border: var(--sti-border-width) solid var(--sti-border-control);
+    border-radius: var(--sti-quantity-radius);
+    background: var(--sti-bg-canvas);
+    color: inherit;
+    font-family: var(--sti-font-numeric);
+    font-size: var(--sti-quantity-font-size);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--sti-font-weight-semibold);
+    text-align: center;
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-snap);
+    margin: 0;
+  }
+
+  @media (pointer: coarse) {
+    .sti-QuantityStepper-input-63abe {
+      min-height: var(--sti-control-h-md);
+    }
+  }
+
+  @media (hover: hover) {
+    .sti-QuantityStepper-input-63abe[data-hovered]:not([data-disabled]) {
+      border-color: var(--sti-border-strong);
+    }
+  }
+
+  .sti-QuantityStepper-input-63abe[data-focused], .sti-QuantityStepper-input-63abe:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-QuantityStepper-input-63abe[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-QuantityStepper-input-63abe[readonly] {
+    background: var(--sti-bg-subtle);
+    border-style: dashed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-QuantityStepper-input-63abe {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-QuantityStepper-input-63abe {
+      border-color: buttontext;
+    }
+
+    .sti-QuantityStepper-input-63abe[data-focused], .sti-QuantityStepper-input-63abe:focus-visible {
+      outline-color: highlight;
+    }
+
+    .sti-QuantityStepper-input-63abe[data-disabled] {
+      color: graytext;
+      opacity: 1;
+      border-color: graytext;
+    }
+  }
+}

package/dist/commerce/QuantityStepper/QuantityStepper.d.ts

@@ -0,0 +1,32 @@
+import { Ref } from "react";
+export interface QuantityStepperProps {
+  /** Alanın adı ("Adet"; ürün adı eklenebilir: "Mavi gömlek adedi"); varsayılan yerleşik "Adet". */
+  label?: string;
+  /** Adı görünür etiket olarak da yazar (ürün sayfasında); varsayılan gizli, ekran okuyucu okur. */
+  showLabel?: boolean;
+  /** Denetimli değer (tam sayı). */
+  value?: number;
+  /** Denetimsiz başlangıç değeri; varsayılan `minValue`. */
+  defaultValue?: number;
+  /** Değer değişince (yalnız geçerli tam sayıyla) çağrılır. */
+  onChange?: (value: number) => void;
+  /** En az adet; varsayılan 1. */
+  minValue?: number;
+  /** En çok adet (stok ya da sipariş sınırı); varsayılan sınırsız. */
+  maxValue?: number;
+  /** Boy: `sm` 32, `md` 40, `lg` 48 piksel; dokunmatikte en az 44. */
+  size?: "sm" | "md" | "lg";
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  /** Formla gönderilen alan adı. */
+  name?: string;
+  className?: string;
+  id?: string;
+  inputRef?: Ref<HTMLInputElement>;
+}
+/**
+ * Adet seçici (APG spinbutton): azalt ve artır düğmeleri arasında tam sayı alanı. Yukarı ve aşağı
+ * ok bir, Home en az, End en çok adedi verir; boş ya da geçersiz değer alandan çıkınca son geçerli
+ * adede döner. Sınıra gelince ilgili düğme devre dışı kalır.
+ */
+export declare function QuantityStepper({ label, showLabel, value, defaultValue, onChange, minValue, maxValue, size, isDisabled, isReadOnly, name, className, id, inputRef }: QuantityStepperProps): import("react").JSX.Element;

package/dist/commerce/QuantityStepper/QuantityStepper.js

@@ -0,0 +1,86 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { MinusIcon } from "../../icons/generated/MinusIcon.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import QuantityStepper_module_default from "./QuantityStepper.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Group, I18nProvider, Input, Label, NumberField } from "react-aria-components";
+// src/commerce/QuantityStepper/QuantityStepper.tsx
+/**
+* Adet seçici (APG spinbutton): azalt ve artır düğmeleri arasında tam sayı alanı. Yukarı ve aşağı
+* ok bir, Home en az, End en çok adedi verir; boş ya da geçersiz değer alandan çıkınca son geçerli
+* adede döner. Sınıra gelince ilgili düğme devre dışı kalır.
+*/
+function QuantityStepper({ label, showLabel = false, value, defaultValue, onChange, minValue = 1, maxValue, size = "md", isDisabled, isReadOnly, name, className, id, inputRef }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const name_ = label ?? t.quantityLabel;
+	const [inner, setInner] = useState(defaultValue ?? minValue);
+	const last = useRef(value ?? inner);
+	const current = value ?? inner;
+	if (Number.isFinite(current)) last.current = current;
+	const change = (next) => {
+		if (Number.isNaN(next)) {
+			if (value === void 0) setInner(NaN);
+			return;
+		}
+		if (value === void 0) setInner(next);
+		onChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale,
+		children: /* @__PURE__ */ jsxs(NumberField, {
+			id,
+			className: [QuantityStepper_module_default.root, className].filter(Boolean).join(" "),
+			"data-size": size,
+			"aria-label": showLabel ? void 0 : name_,
+			value: current,
+			onChange: change,
+			onBlur: () => {
+				if (value === void 0 && Number.isNaN(inner)) setInner(last.current);
+			},
+			minValue,
+			maxValue,
+			step: 1,
+			isDisabled,
+			isReadOnly,
+			isWheelDisabled: true,
+			name,
+			formatOptions: {
+				maximumFractionDigits: 0,
+				useGrouping: false
+			},
+			children: [showLabel ? /* @__PURE__ */ jsx(Label, {
+				className: QuantityStepper_module_default.label,
+				children: name_
+			}) : null, /* @__PURE__ */ jsxs(Group, {
+				className: QuantityStepper_module_default.group,
+				isDisabled,
+				children: [
+					/* @__PURE__ */ jsx(IconButton, {
+						slot: "decrement",
+						variant: "secondary",
+						size,
+						label: t.quantityDecrease,
+						icon: /* @__PURE__ */ jsx(MinusIcon, {})
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						ref: inputRef,
+						className: QuantityStepper_module_default.input,
+						inputMode: "numeric"
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						slot: "increment",
+						variant: "secondary",
+						size,
+						label: t.quantityIncrease,
+						icon: /* @__PURE__ */ jsx(PlusIcon, {})
+					})
+				]
+			})]
+		})
+	});
+}
+export { QuantityStepper };

package/dist/commerce/QuantityStepper/QuantityStepper.module.js

@@ -0,0 +1,9 @@
+import './QuantityStepper.css';
+// src/commerce/QuantityStepper/QuantityStepper.module.css
+var QuantityStepper_module_default = {
+	"root": "sti-QuantityStepper-root-2077c",
+	"label": "sti-QuantityStepper-label-6ba7f",
+	"group": "sti-QuantityStepper-group-27220",
+	"input": "sti-QuantityStepper-input-63abe"
+};
+export { QuantityStepper_module_default as default };

package/dist/commerce/QuantityStepper/index.d.ts

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

package/dist/commerce/StockBadge/StockBadge.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+export type StockStatus = "in-stock" | "low-stock" | "out-of-stock" | "backorder" | "preorder";
+export interface StockBadgeProps {
+  /**
+   * Stok durumu:
+   * - `in-stock`: stokta;
+   * - `low-stock`: az kaldı;
+   * - `out-of-stock`: tükendi;
+   * - `backorder`: stok yok, sipariş üzerine temin edilir;
+   * - `preorder`: henüz satışa çıkmadı, ön sipariş alınır.
+   */
+  status: StockStatus;
+  /** Görünür metin ("Stokta", "Son 3 ürün", "Tükendi"); anlamı renk değil bu metin taşır. */
+  children: ReactNode;
+  /** Boy: `sm` 20, `md` 24 piksel. */
+  size?: "sm" | "md";
+  /** Görünüş türü (`Badge` ile aynı); varsayılan `soft`. */
+  variant?: "soft" | "solid" | "outline";
+  className?: string;
+  id?: string;
+}
+/**
+ * Stok adedinden durumu çıkarır: sıfır ya da altı `out-of-stock`, `lowThreshold` ve altı
+ * `low-stock`, üstü `in-stock`. Adet bilinmiyorsa (`undefined`) stokta sayılır.
+ */
+export declare function stockStatus(quantity: number | undefined, lowThreshold?: number): StockStatus;
+/**
+ * Stok rozeti: durumu renk, ikon ve metinle birlikte gösterir (renk tek başına anlam taşımaz).
+ * `Badge` üzerine kuruludur; sunucu bileşenidir, yerleşik metin taşımaz.
+ */
+export declare function StockBadge({ status, children, size, variant, className, id }: StockBadgeProps): import("react").JSX.Element;