@stisocial/ui 0.2.1 → 0.3.0

package/dist/commerce/ProductGallery/ProductGallery.css

@@ -0,0 +1,135 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ProductGallery-root-a2a6e {
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-ProductGallery-main-7bec1 {
+    aspect-ratio: 1;
+    border-radius: var(--sti-radius-xl);
+    background: var(--sti-bg-subtle);
+    cursor: zoom-in;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-ProductGallery-main-7bec1:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ProductGallery-mainImage-9597b {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .sti-ProductGallery-zoom-8ae44 {
+    inline-size: var(--sti-control-h-md);
+    block-size: var(--sti-control-h-md);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-sm);
+    color: var(--sti-fg);
+    place-items: center;
+    display: grid;
+    position: absolute;
+    inset-block-end: var(--sti-space-3);
+    inset-inline-end: var(--sti-space-3);
+  }
+
+  .sti-ProductGallery-zoom-8ae44 > svg {
+    inline-size: var(--sti-space-5);
+    block-size: var(--sti-space-5);
+  }
+
+  .sti-ProductGallery-thumbs-b380d {
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    padding: var(--sti-space-1);
+    scrollbar-width: thin;
+    border: 0;
+    margin: 0;
+    display: flex;
+    overflow-x: auto;
+  }
+
+  .sti-ProductGallery-thumb-e83b6 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-subtle);
+    cursor: pointer;
+    opacity: .75;
+    block-size: 4.5rem;
+    inline-size: 4.5rem;
+    transition: opacity var(--sti-duration-fast) var(--sti-ease-standard),
+      border-color var(--sti-duration-fast) var(--sti-ease-standard);
+    flex: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .sti-ProductGallery-thumb-e83b6:hover {
+    opacity: 1;
+  }
+
+  .sti-ProductGallery-thumb-e83b6[aria-pressed="true"] {
+    border: var(--sti-border-width-strong) solid var(--sti-border-accent);
+    opacity: 1;
+  }
+
+  .sti-ProductGallery-thumb-e83b6:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ProductGallery-thumb-e83b6 > img {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    display: block;
+  }
+
+  @media (width >= 48rem) {
+    .sti-ProductGallery-root-a2a6e[data-thumbnails="start"] {
+      grid-template-columns: 4.5rem minmax(0, 1fr);
+      align-items: start;
+    }
+
+    .sti-ProductGallery-root-a2a6e[data-thumbnails="start"] .sti-ProductGallery-thumbs-b380d {
+      flex-direction: column;
+      order: -1;
+      max-block-size: 36rem;
+      overflow: hidden auto;
+    }
+  }
+
+  .sti-ProductGallery-srOnly-326f1 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ProductGallery-thumb-e83b6 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ProductGallery-thumb-e83b6[aria-pressed="true"] {
+      border-color: highlight;
+    }
+  }
+}

package/dist/commerce/ProductGallery/ProductGallery.d.ts

@@ -0,0 +1,17 @@
+import { LightboxImage } from "../../components/Lightbox/Lightbox.js";
+export interface ProductGalleryProps {
+  images: readonly LightboxImage[];
+  /** Ürün adı (görüntüleyicinin ve küçük resim grubunun adı). */
+  productName: string;
+  /** Küçük resimler: altta ya da solda (geniş ekranda). */
+  thumbnails?: "bottom" | "start";
+  defaultIndex?: number;
+  className?: string;
+  id?: string;
+}
+/**
+ * Ürün görsel galerisi: büyük görsel ve küçük resimler. Küçük resim seçince büyük görsel değişir
+ * (seçili olan basılı düğme olarak okunur; oklar da gezer); büyük görsele tıklayınca tam ekran yakınlaştırmalı
+ * görüntüleyici (`Lightbox`) açılır. Sayaç "Görsel 2 / 5" okunur.
+ */
+export declare function ProductGallery({ images, productName, thumbnails, defaultIndex, className, id }: ProductGalleryProps): import("react").JSX.Element | null;

package/dist/commerce/ProductGallery/ProductGallery.js

@@ -0,0 +1,102 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { ZoomInIcon } from "../../icons/generated/ZoomInIcon.js";
+import { Lightbox } from "../../components/Lightbox/Lightbox.js";
+import ProductGallery_module_default from "./ProductGallery.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+// src/commerce/ProductGallery/ProductGallery.tsx
+/**
+* Ürün görsel galerisi: büyük görsel ve küçük resimler. Küçük resim seçince büyük görsel değişir
+* (seçili olan basılı düğme olarak okunur; oklar da gezer); büyük görsele tıklayınca tam ekran yakınlaştırmalı
+* görüntüleyici (`Lightbox`) açılır. Sayaç "Görsel 2 / 5" okunur.
+*/
+function ProductGallery({ images, productName, thumbnails = "bottom", defaultIndex = 0, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const [index, setIndex] = useState(Math.min(Math.max(0, defaultIndex), Math.max(0, images.length - 1)));
+	const [open, setOpen] = useState(false);
+	const thumbs = useRef([]);
+	const current = images[index];
+	if (!current) return null;
+	const onKey = (e) => {
+		const keys = {
+			ArrowRight: 1,
+			ArrowDown: 1,
+			ArrowLeft: -1,
+			ArrowUp: -1
+		};
+		let next = null;
+		if (e.key in keys) next = (index + (keys[e.key] ?? 0) + images.length) % images.length;
+		if (e.key === "Home") next = 0;
+		if (e.key === "End") next = images.length - 1;
+		if (next === null) return;
+		e.preventDefault();
+		setIndex(next);
+		thumbs.current[next]?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [ProductGallery_module_default.root, className].filter(Boolean).join(" "),
+		"data-thumbnails": thumbnails,
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: ProductGallery_module_default.main,
+				onClick: () => setOpen(true),
+				children: [
+					/* @__PURE__ */ jsx("img", {
+						className: ProductGallery_module_default.mainImage,
+						src: current.src,
+						alt: current.alt
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: ProductGallery_module_default.zoom,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx(ZoomInIcon, {})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: ProductGallery_module_default.srOnly,
+						children: `, ${t.commerceGalleryZoom}`
+					})
+				]
+			}),
+			images.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("fieldset", {
+				className: ProductGallery_module_default.thumbs,
+				"aria-label": template(t.commerceGalleryThumbs, { name: productName }),
+				onKeyDown: onKey,
+				children: images.map((img, i) => /* @__PURE__ */ jsx("button", {
+					ref: (el) => {
+						thumbs.current[i] = el;
+					},
+					type: "button",
+					"aria-pressed": i === index,
+					className: ProductGallery_module_default.thumb,
+					onClick: () => setIndex(i),
+					children: /* @__PURE__ */ jsx("img", {
+						src: img.thumbnailSrc ?? img.src,
+						alt: img.alt,
+						loading: "lazy"
+					})
+				}, img.src))
+			}), /* @__PURE__ */ jsx("p", {
+				className: ProductGallery_module_default.srOnly,
+				"aria-live": "polite",
+				children: template(t.lightboxCount, {
+					current: f.number(index + 1),
+					total: f.number(images.length)
+				})
+			})] }) : null,
+			/* @__PURE__ */ jsx(Lightbox, {
+				images: [...images],
+				isOpen: open,
+				onOpenChange: setOpen,
+				index,
+				onIndexChange: setIndex,
+				label: productName
+			})
+		]
+	});
+}
+export { ProductGallery };

package/dist/commerce/ProductGallery/ProductGallery.module.js

@@ -0,0 +1,12 @@
+import './ProductGallery.css';
+// src/commerce/ProductGallery/ProductGallery.module.css
+var ProductGallery_module_default = {
+	"root": "sti-ProductGallery-root-a2a6e",
+	"main": "sti-ProductGallery-main-7bec1",
+	"mainImage": "sti-ProductGallery-mainImage-9597b",
+	"zoom": "sti-ProductGallery-zoom-8ae44",
+	"thumbs": "sti-ProductGallery-thumbs-b380d",
+	"thumb": "sti-ProductGallery-thumb-e83b6",
+	"srOnly": "sti-ProductGallery-srOnly-326f1"
+};
+export { ProductGallery_module_default as default };

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

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

package/dist/commerce/ProductReviews/ProductReviews.css

@@ -0,0 +1,227 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ProductReviews-root-4627d {
+    gap: var(--sti-space-10);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  @media (width >= 56rem) {
+    .sti-ProductReviews-root-4627d {
+      grid-template-columns: 18rem minmax(0, 1fr);
+      align-items: start;
+    }
+  }
+
+  .sti-ProductReviews-summary-3204a {
+    gap: var(--sti-space-3);
+    display: grid;
+  }
+
+  .sti-ProductReviews-title-5b831 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-heading-lg);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-heading-lg);
+    margin: 0;
+  }
+
+  .sti-ProductReviews-average-fff98 {
+    align-items: center;
+    gap: var(--sti-space-3);
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-ProductReviews-averageValue-15ea1 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-4xl);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: 1;
+  }
+
+  .sti-ProductReviews-total-a1321 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-ProductReviews-dist-5faed {
+    gap: var(--sti-space-1);
+    margin: var(--sti-space-2) 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-ProductReviews-distRow-eb773 {
+    align-items: center;
+    gap: var(--sti-space-3);
+    inline-size: 100%;
+    min-block-size: var(--sti-control-h-sm);
+    padding: 0 var(--sti-space-2);
+    border-radius: var(--sti-radius-md);
+    color: inherit;
+    font: inherit;
+    font-size: var(--sti-font-size-sm);
+    text-align: start;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    grid-template-columns: 4.5rem minmax(0, 1fr) 2rem;
+    display: grid;
+  }
+
+  .sti-ProductReviews-distRow-eb773:hover:not(:disabled) {
+    background: var(--sti-bg-surface-hover);
+  }
+
+  .sti-ProductReviews-distRow-eb773[aria-pressed="true"] {
+    background: var(--sti-bg-accent-subtle);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-ProductReviews-distRow-eb773:disabled {
+    cursor: default;
+    opacity: .6;
+  }
+
+  .sti-ProductReviews-distRow-eb773:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ProductReviews-bar-71419 {
+    block-size: var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-subtle);
+    overflow: hidden;
+  }
+
+  .sti-ProductReviews-fill-3180c {
+    background: var(--sti-fill-accent);
+    block-size: 100%;
+    scale: var(--sti-fill, 0) 1;
+    transform-origin: 0;
+    display: block;
+  }
+
+  .sti-ProductReviews-distCount-b0779 {
+    color: var(--sti-fg-muted);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+
+  .sti-ProductReviews-list-36a39 {
+    gap: var(--sti-space-4);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-ProductReviews-status-f3bbb:empty {
+    display: none;
+  }
+
+  .sti-ProductReviews-status-f3bbb {
+    align-items: center;
+    gap: var(--sti-space-3);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    flex-wrap: wrap;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-ProductReviews-clear-86336 {
+    border-radius: var(--sti-radius-xs);
+    color: var(--sti-fg-link);
+    font: inherit;
+    font-weight: var(--sti-font-weight-semibold);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    padding: 0;
+    text-decoration: underline;
+  }
+
+  .sti-ProductReviews-clear-86336:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ProductReviews-empty-b5976 {
+    color: var(--sti-fg-muted);
+    margin: 0;
+  }
+
+  .sti-ProductReviews-reviews-d9f90 {
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .sti-ProductReviews-review-b7daf {
+    padding-block: var(--sti-space-5);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-ProductReviews-reviewHead-5f8be {
+    gap: var(--sti-space-2);
+    display: grid;
+  }
+
+  .sti-ProductReviews-reviewTitle-6ac73 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-ProductReviews-body-0406c {
+    margin: var(--sti-space-2) 0 0;
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+  }
+
+  .sti-ProductReviews-meta-87bb5 {
+    gap: var(--sti-space-1) var(--sti-space-4);
+    margin: var(--sti-space-3) 0 0;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-ProductReviews-author-29ba9 {
+    color: var(--sti-fg);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-ProductReviews-verified-94e35 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    color: var(--sti-fg-success-strong);
+    display: inline-flex;
+  }
+
+  .sti-ProductReviews-verified-94e35 > svg {
+    inline-size: var(--sti-space-4);
+    block-size: var(--sti-space-4);
+  }
+
+  .sti-ProductReviews-more-a3e40 {
+    justify-content: center;
+    display: flex;
+  }
+
+  @media (forced-colors: active) {
+    .sti-ProductReviews-fill-3180c {
+      background: highlight;
+    }
+
+    .sti-ProductReviews-distRow-eb773[aria-pressed="true"] {
+      outline: var(--sti-border-width) solid Highlight;
+    }
+  }
+}

package/dist/commerce/ProductReviews/ProductReviews.d.ts

@@ -0,0 +1,39 @@
+export interface ProductReview {
+  id: string;
+  author: string;
+  /** 1–5. */
+  rating: number;
+  /** Tarih (ISO). */
+  date: string;
+  title?: string;
+  body: string;
+  /** Doğrulanmış satın alma. */
+  verified?: boolean;
+  /** Seçilen varyant ("Beden: M · Renk: Lacivert"). */
+  variant?: string;
+}
+export interface ProductReviewsProps {
+  reviews: readonly ProductReview[];
+  /** Bölüm başlığı. Varsayılan "Değerlendirmeler". */
+  title?: string;
+  titleLevel?: 2 | 3;
+  /** İlk açılışta gösterilen sayı; "Daha fazla" ile artar. Varsayılan 4. */
+  pageSize?: number;
+  /** "Değerlendirme yazın" eylemi. */
+  writeAction?: {
+    label: string;
+    href: string;
+  };
+  className?: string;
+  id?: string;
+}
+/** Puan dağılımı: 5'ten 1'e her yıldızın sayısı. */
+export declare function ratingDistribution(reviews: readonly {
+  rating: number;
+}[]): number[];
+/**
+ * Ürün değerlendirmeleri: ortalama puan, toplam ve yıldız dağılımı (çubuklar; bir yıldıza
+ * tıklayınca liste süzülür), değerlendirme listesi (yazar, tarih, doğrulanmış satın alma,
+ * varyant, başlık, metin) ve "Daha fazla" ile sayfalama. Süzgeç değişince sonuç sayısı okunur.
+ */
+export declare function ProductReviews({ reviews, title, titleLevel, pageSize, writeAction, className, id }: ProductReviewsProps): import("react").JSX.Element;