@stisocial/ui 0.2.0 → 0.3.0

package/dist/commerce/OrderTracker/OrderTracker.js

@@ -0,0 +1,147 @@
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { ExternalLinkIcon } from "../../icons/generated/ExternalLinkIcon.js";
+import { CopyButton } from "../../components/CopyButton/CopyButton.js";
+import { Timeline } from "../../components/Timeline/Timeline.js";
+import OrderTracker_module_default from "./OrderTracker.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/commerce/OrderTracker/OrderTracker.tsx
+const STAGES = [
+	"ordered",
+	"preparing",
+	"shipped",
+	"outForDelivery",
+	"delivered"
+];
+/** Yalnız https takip adresi kabul edilir. */
+function safeTrackingUrl(url) {
+	if (!url) return void 0;
+	try {
+		const u = new URL(url);
+		return u.protocol === "https:" ? u.href : void 0;
+	} catch {
+		return;
+	}
+}
+/**
+* Kargo takibi: beş aşamalı ilerleme (sipariş alındı, hazırlanıyor, kargoya verildi, dağıtımda,
+* teslim edildi), kargo firması ve kopyalanabilir takip numarası, firmanın takip sayfası, tahmini
+* teslim ve kargo hareketleri zaman çizelgesi.
+*/
+function OrderTracker({ stage, stageTimes, carrier, trackingNumber, trackingUrl, estimatedDelivery, events, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const index = STAGES.indexOf(stage);
+	const names = {
+		ordered: t.commerceTrackOrdered,
+		preparing: t.commerceTrackPreparing,
+		shipped: t.commerceTrackShipped,
+		outForDelivery: t.commerceTrackOut,
+		delivered: t.commerceTrackDelivered
+	};
+	const url = safeTrackingUrl(trackingUrl);
+	const items = (events ?? []).map((e) => ({
+		id: e.id,
+		title: e.description,
+		time: new Date(e.time),
+		description: e.location
+	}));
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [OrderTracker_module_default.root, className].filter(Boolean).join(" "),
+		"aria-label": t.commerceTracking,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: OrderTracker_module_default.head,
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: OrderTracker_module_default.status,
+					children: [names[stage], estimatedDelivery && stage !== "delivered" ? /* @__PURE__ */ jsxs("span", {
+						className: OrderTracker_module_default.eta,
+						children: [
+							t.commerceTrackEta,
+							" ",
+							/* @__PURE__ */ jsx("time", {
+								dateTime: estimatedDelivery,
+								children: f.date(new Date(estimatedDelivery), "long")
+							})
+						]
+					}) : null]
+				}), carrier || trackingNumber ? /* @__PURE__ */ jsxs("div", {
+					className: OrderTracker_module_default.carrier,
+					children: [
+						carrier ? /* @__PURE__ */ jsx("span", {
+							className: OrderTracker_module_default.carrierName,
+							children: carrier
+						}) : null,
+						trackingNumber ? /* @__PURE__ */ jsxs("span", {
+							className: OrderTracker_module_default.number,
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: OrderTracker_module_default.numberLabel,
+									children: t.commerceTrackNumber
+								}),
+								/* @__PURE__ */ jsx("code", {
+									className: OrderTracker_module_default.code,
+									children: trackingNumber
+								}),
+								/* @__PURE__ */ jsx(CopyButton, {
+									value: trackingNumber,
+									label: t.commerceTrackCopy,
+									iconOnly: true,
+									variant: "ghost",
+									size: "sm"
+								})
+							]
+						}) : null,
+						url ? /* @__PURE__ */ jsxs("a", {
+							className: OrderTracker_module_default.external,
+							href: url,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							children: [
+								t.commerceTrackOpen,
+								/* @__PURE__ */ jsx("span", {
+									className: OrderTracker_module_default.srOnly,
+									children: ` (${t.opensInNewTab})`
+								}),
+								/* @__PURE__ */ jsx(ExternalLinkIcon, { "aria-hidden": "true" })
+							]
+						}) : null
+					]
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("ol", {
+				className: OrderTracker_module_default.stages,
+				children: STAGES.map((s, i) => {
+					const status = i < index || stage === "delivered" ? "done" : i === index ? "current" : "upcoming";
+					const time = stageTimes?.[s];
+					return /* @__PURE__ */ jsxs("li", {
+						className: OrderTracker_module_default.stage,
+						"data-status": status,
+						"aria-current": status === "current" ? "step" : void 0,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: OrderTracker_module_default.dot,
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: OrderTracker_module_default.stageName,
+								children: names[s]
+							}),
+							time ? /* @__PURE__ */ jsx("time", {
+								className: OrderTracker_module_default.stageTime,
+								dateTime: time,
+								children: f.dateTime(new Date(time))
+							}) : null
+						]
+					}, s);
+				})
+			}),
+			items.length ? /* @__PURE__ */ jsx(Timeline, {
+				label: t.commerceTrackEvents,
+				items,
+				size: "sm"
+			}) : null
+		]
+	});
+}
+export { OrderTracker };

package/dist/commerce/OrderTracker/OrderTracker.module.js

@@ -0,0 +1,21 @@
+import './OrderTracker.css';
+// src/commerce/OrderTracker/OrderTracker.module.css
+var OrderTracker_module_default = {
+	"root": "sti-OrderTracker-root-b2fb1",
+	"head": "sti-OrderTracker-head-4e464",
+	"status": "sti-OrderTracker-status-fb103",
+	"eta": "sti-OrderTracker-eta-7a323",
+	"carrier": "sti-OrderTracker-carrier-6de96",
+	"carrierName": "sti-OrderTracker-carrierName-5a617",
+	"number": "sti-OrderTracker-number-9ef2a",
+	"numberLabel": "sti-OrderTracker-numberLabel-ff7af",
+	"code": "sti-OrderTracker-code-8cd39",
+	"external": "sti-OrderTracker-external-5346c",
+	"stages": "sti-OrderTracker-stages-ffd02",
+	"stage": "sti-OrderTracker-stage-eb5d4",
+	"dot": "sti-OrderTracker-dot-5801f",
+	"stageName": "sti-OrderTracker-stageName-d18f4",
+	"stageTime": "sti-OrderTracker-stageTime-3acfa",
+	"srOnly": "sti-OrderTracker-srOnly-35de3"
+};
+export { OrderTracker_module_default as default };

package/dist/commerce/PaymentMethodSelect/PaymentMethodSelect.css

@@ -0,0 +1,21 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PaymentMethodSelect-root-f3694 {
+    gap: var(--sti-space-4);
+    display: grid;
+  }
+
+  .sti-PaymentMethodSelect-detail-24573 {
+    padding: var(--sti-space-5);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  @media (forced-colors: active) {
+    .sti-PaymentMethodSelect-detail-24573 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/commerce/PaymentMethodSelect/PaymentMethodSelect.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+export interface PaymentMethod {
+  id: string;
+  /** "Kredi veya banka kartı", "Havale / EFT", "Kapıda ödeme". */
+  label: string;
+  description?: ReactNode;
+  icon?: ReactNode;
+  /** Ek ücret (kapıda ödeme). */
+  fee?: number;
+  badge?: string;
+  isDisabled?: boolean;
+}
+export interface PaymentMethodSelectProps {
+  methods: readonly PaymentMethod[];
+  value: string | null;
+  onChange: (id: string) => void;
+  /**
+   * Seçili yöntemin altında gösterilecek alan: kart için ödeme sağlayıcısının kendi güvenli alanı
+   * (iframe), havale için banka bilgileri. Kart bilgisi bu pakette alınmaz (PCI DSS).
+   */
+  details?: Partial<Record<string, ReactNode>>;
+  label?: string;
+  currency?: string;
+  errorMessage?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Ödeme yöntemi seçimi: kart biçiminde radyo grubu (ad, açıklama, ek ücret) ve seçili yöntemin
+ * ayrıntı alanı. Kart numarası alanı yoktur: kart bilgisi ödeme sağlayıcısının kendi alanında
+ * girilir (PCI DSS); bileşen yalnız yöntemi seçer.
+ */
+export declare function PaymentMethodSelect({ methods, value, onChange, details, label, currency, errorMessage, className, id }: PaymentMethodSelectProps): import("react").JSX.Element;

package/dist/commerce/PaymentMethodSelect/PaymentMethodSelect.js

@@ -0,0 +1,44 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { RadioCard, RadioCards } from "../../components/RadioCards/RadioCards.js";
+import PaymentMethodSelect_module_default from "./PaymentMethodSelect.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/commerce/PaymentMethodSelect/PaymentMethodSelect.tsx
+/**
+* Ödeme yöntemi seçimi: kart biçiminde radyo grubu (ad, açıklama, ek ücret) ve seçili yöntemin
+* ayrıntı alanı. Kart numarası alanı yoktur: kart bilgisi ödeme sağlayıcısının kendi alanında
+* girilir (PCI DSS); bileşen yalnız yöntemi seçer.
+*/
+function PaymentMethodSelect({ methods, value, onChange, details, label, currency, errorMessage, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const detail = value ? details?.[value] : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [PaymentMethodSelect_module_default.root, className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx(RadioCards, {
+			label: label ?? t.commercePaymentMethod,
+			value,
+			onChange,
+			isRequired: true,
+			isInvalid: Boolean(errorMessage),
+			errorMessage,
+			minCardWidth: "14rem",
+			children: methods.map((m) => /* @__PURE__ */ jsx(RadioCard, {
+				value: m.id,
+				icon: m.icon,
+				description: m.description,
+				badge: m.badge,
+				meta: m.fee ? template(t.commercePaymentFee, { amount: f.currency(m.fee, { currency }) }) : void 0,
+				isDisabled: m.isDisabled,
+				children: m.label
+			}, m.id))
+		}), detail ? /* @__PURE__ */ jsx("section", {
+			className: PaymentMethodSelect_module_default.detail,
+			"aria-label": methods.find((m) => m.id === value)?.label,
+			children: detail
+		}) : null]
+	});
+}
+export { PaymentMethodSelect };

package/dist/commerce/PaymentMethodSelect/PaymentMethodSelect.module.js

@@ -0,0 +1,7 @@
+import './PaymentMethodSelect.css';
+// src/commerce/PaymentMethodSelect/PaymentMethodSelect.module.css
+var PaymentMethodSelect_module_default = {
+	"root": "sti-PaymentMethodSelect-root-f3694",
+	"detail": "sti-PaymentMethodSelect-detail-24573"
+};
+export { PaymentMethodSelect_module_default as default };

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

@@ -0,0 +1,2 @@
+import { PaymentMethod, PaymentMethodSelect, PaymentMethodSelectProps } from "./PaymentMethodSelect.js";
+export { PaymentMethod, PaymentMethodSelect, PaymentMethodSelectProps };

package/dist/commerce/ProductCard/ProductCard.css

@@ -0,0 +1,133 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ProductCard-root-67ced {
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    border-radius: var(--sti-radius-lg);
+    block-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .sti-ProductCard-root-67ced:has(.sti-ProductCard-link-dbd17:focus-visible) {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ProductCard-media-bd177 {
+    aspect-ratio: 1;
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-ProductCard-image-411a9, .sti-ProductCard-hover-01594 {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    transition: opacity var(--sti-duration-normal) var(--sti-ease-standard),
+      scale var(--sti-duration-slow) var(--sti-ease-standard);
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-ProductCard-hover-01594 {
+    opacity: 0;
+  }
+
+  .sti-ProductCard-root-67ced:hover .sti-ProductCard-hover-01594 {
+    opacity: 1;
+  }
+
+  .sti-ProductCard-root-67ced:hover .sti-ProductCard-image-411a9 {
+    scale: 1.03;
+  }
+
+  .sti-ProductCard-root-67ced[data-soldout] .sti-ProductCard-image-411a9 {
+    opacity: .55;
+  }
+
+  .sti-ProductCard-badges-9ee92 {
+    gap: var(--sti-space-1);
+    flex-wrap: wrap;
+    display: flex;
+    position: absolute;
+    inset-block-start: var(--sti-space-3);
+    inset-inline-start: var(--sti-space-3);
+  }
+
+  .sti-ProductCard-favorite-9335a {
+    z-index: 2;
+    position: absolute;
+    inset-block-start: var(--sti-space-2);
+    inset-inline-end: var(--sti-space-2);
+  }
+
+  .sti-ProductCard-body-194fb {
+    gap: var(--sti-space-1);
+    flex-direction: column;
+    flex: 1;
+    display: flex;
+  }
+
+  .sti-ProductCard-brand-b3f04 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-ProductCard-name-56594 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+  }
+
+  .sti-ProductCard-link-dbd17 {
+    color: inherit;
+    outline: none;
+    text-decoration: none;
+  }
+
+  .sti-ProductCard-link-dbd17:after {
+    z-index: 1;
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-ProductCard-root-67ced:hover .sti-ProductCard-link-dbd17 {
+    text-underline-offset: .2em;
+    text-decoration: underline;
+  }
+
+  .sti-ProductCard-rating-5c5fd {
+    font-size: var(--sti-font-size-sm);
+  }
+
+  .sti-ProductCard-stock-6fa54 {
+    display: flex;
+  }
+
+  .sti-ProductCard-action-8c289 {
+    z-index: 2;
+    margin-block-start: auto;
+    padding-block-start: var(--sti-space-2);
+    position: relative;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ProductCard-image-411a9, .sti-ProductCard-hover-01594 {
+      transition: none;
+    }
+
+    .sti-ProductCard-root-67ced:hover .sti-ProductCard-image-411a9 {
+      scale: none;
+    }
+  }
+}

package/dist/commerce/ProductCard/ProductCard.d.ts

@@ -0,0 +1,39 @@
+import { StockStatus } from "../StockBadge/StockBadge.js";
+import { ReactNode } from "react";
+export interface ProductCardProps {
+  name: string;
+  href: string;
+  /** Ürün görseli (metin karşılığı ürün adı değil, görselin içeriği). */
+  image: {
+    src: string;
+    alt: string;
+  };
+  /** Üzerine gelince gösterilen ikinci görsel (süs). */
+  hoverImage?: string;
+  brand?: string;
+  price: number;
+  compareAtPrice?: number;
+  currency?: string;
+  rating?: {
+    value: number;
+    count: number;
+  };
+  /** Stok durumu; `in-stock` gösterilmez (gürültü olmasın). */
+  stock?: StockStatus;
+  /** Kısa işaret ("Yeni", "Çok satan"). */
+  badge?: string;
+  /** Sağ üstte favori düğmesi (FavoriteToggle). */
+  favorite?: ReactNode;
+  /** Kartın altında eylem (AddToCartButton). */
+  action?: ReactNode;
+  titleLevel?: 2 | 3 | 4;
+  className?: string;
+  id?: string;
+}
+/**
+ * Ürün kartı: kare görsel (üzerine gelince ikinci görsel), indirim ve işaret rozetleri, marka,
+ * ad, puan, fiyat (indirimli fiyat ve eski fiyat), az ya da tükenen stok uyarısı. Ürün adı
+ * bağlantıdır ve bütün kartı kaplar; favori ve sepete ekle düğmeleri kartın üstünde ayrıca
+ * tıklanır.
+ */
+export declare function ProductCard({ name, href, image, hoverImage, brand, price, compareAtPrice, currency, rating, stock, badge, favorite, action, titleLevel, className, id }: ProductCardProps): import("react").JSX.Element;

package/dist/commerce/ProductCard/ProductCard.js

@@ -0,0 +1,105 @@
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Badge } from "../../components/Badge/Badge.js";
+import { RatingDisplay } from "../../components/Rating/Rating.js";
+import { PriceDisplay, discountRatio } from "../PriceDisplay/PriceDisplay.js";
+import { StockBadge } from "../StockBadge/StockBadge.js";
+import ProductCard_module_default from "./ProductCard.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/commerce/ProductCard/ProductCard.tsx
+/**
+* Ürün kartı: kare görsel (üzerine gelince ikinci görsel), indirim ve işaret rozetleri, marka,
+* ad, puan, fiyat (indirimli fiyat ve eski fiyat), az ya da tükenen stok uyarısı. Ürün adı
+* bağlantıdır ve bütün kartı kaplar; favori ve sepete ekle düğmeleri kartın üstünde ayrıca
+* tıklanır.
+*/
+function ProductCard({ name, href, image, hoverImage, brand, price, compareAtPrice, currency, rating, stock, badge, favorite, action, titleLevel = 3, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const Heading = `h${titleLevel}`;
+	const ratio = discountRatio(price, compareAtPrice);
+	return /* @__PURE__ */ jsxs("article", {
+		id,
+		className: [ProductCard_module_default.root, className].filter(Boolean).join(" "),
+		"data-soldout": stock === "out-of-stock" ? "" : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: ProductCard_module_default.media,
+			children: [
+				/* @__PURE__ */ jsx("img", {
+					className: ProductCard_module_default.image,
+					src: image.src,
+					alt: image.alt,
+					loading: "lazy"
+				}),
+				hoverImage ? /* @__PURE__ */ jsx("img", {
+					className: ProductCard_module_default.hover,
+					src: hoverImage,
+					alt: "",
+					loading: "lazy"
+				}) : null,
+				ratio !== null || badge ? /* @__PURE__ */ jsxs("div", {
+					className: ProductCard_module_default.badges,
+					children: [ratio !== null ? /* @__PURE__ */ jsx(Badge, {
+						tone: "danger",
+						variant: "solid",
+						size: "sm",
+						children: template(t.commerceDiscountBadge, { percent: f.percent(ratio) })
+					}) : null, badge ? /* @__PURE__ */ jsx(Badge, {
+						tone: "neutral",
+						variant: "solid",
+						size: "sm",
+						children: badge
+					}) : null]
+				}) : null,
+				favorite ? /* @__PURE__ */ jsx("div", {
+					className: ProductCard_module_default.favorite,
+					children: favorite
+				}) : null
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: ProductCard_module_default.body,
+			children: [
+				brand ? /* @__PURE__ */ jsx("p", {
+					className: ProductCard_module_default.brand,
+					children: brand
+				}) : null,
+				/* @__PURE__ */ jsx(Heading, {
+					className: ProductCard_module_default.name,
+					children: /* @__PURE__ */ jsx("a", {
+						className: ProductCard_module_default.link,
+						href,
+						children: name
+					})
+				}),
+				rating ? /* @__PURE__ */ jsx("div", {
+					className: ProductCard_module_default.rating,
+					children: /* @__PURE__ */ jsx(RatingDisplay, {
+						value: rating.value,
+						size: "sm",
+						count: template(t.commerceReviewCount, { count: f.number(rating.count) })
+					})
+				}) : null,
+				/* @__PURE__ */ jsx(PriceDisplay, {
+					price,
+					compareAtPrice,
+					currency,
+					showDiscount: false
+				}),
+				stock && stock !== "in-stock" ? /* @__PURE__ */ jsx("div", {
+					className: ProductCard_module_default.stock,
+					children: /* @__PURE__ */ jsx(StockBadge, {
+						status: stock,
+						size: "sm",
+						variant: "outline",
+						children: stock === "out-of-stock" ? t.commerceOutOfStock : stock === "low-stock" ? t.commerceLowStock : stock === "preorder" ? t.commercePreorder : t.commerceBackorder
+					})
+				}) : null,
+				action ? /* @__PURE__ */ jsx("div", {
+					className: ProductCard_module_default.action,
+					children: action
+				}) : null
+			]
+		})]
+	});
+}
+export { ProductCard };

package/dist/commerce/ProductCard/ProductCard.module.js

@@ -0,0 +1,18 @@
+import './ProductCard.css';
+// src/commerce/ProductCard/ProductCard.module.css
+var ProductCard_module_default = {
+	"root": "sti-ProductCard-root-67ced",
+	"link": "sti-ProductCard-link-dbd17",
+	"media": "sti-ProductCard-media-bd177",
+	"image": "sti-ProductCard-image-411a9",
+	"hover": "sti-ProductCard-hover-01594",
+	"badges": "sti-ProductCard-badges-9ee92",
+	"favorite": "sti-ProductCard-favorite-9335a",
+	"body": "sti-ProductCard-body-194fb",
+	"brand": "sti-ProductCard-brand-b3f04",
+	"name": "sti-ProductCard-name-56594",
+	"rating": "sti-ProductCard-rating-5c5fd",
+	"stock": "sti-ProductCard-stock-6fa54",
+	"action": "sti-ProductCard-action-8c289"
+};
+export { ProductCard_module_default as default };

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

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