@stisocial/ui 0.2.0 → 0.3.0

package/dist/commerce/BillingTypeToggle/BillingTypeToggle.js

@@ -0,0 +1,118 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { UserIcon } from "../../icons/generated/UserIcon.js";
+import { TextField } from "../../components/TextField/TextField.js";
+import { Checkbox } from "../../components/Checkbox/Checkbox.js";
+import { BuildingIcon } from "../../icons/generated/BuildingIcon.js";
+import { RadioCard, RadioCards } from "../../components/RadioCards/RadioCards.js";
+import BillingTypeToggle_module_default from "./BillingTypeToggle.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/commerce/BillingTypeToggle/BillingTypeToggle.tsx
+/** Vergi kimlik numarası denetimi (10 hane, GİB algoritması). */
+function isValidTaxNumber(vkn) {
+	if (!/^\d{10}$/.test(vkn)) return false;
+	const d = [...vkn].map(Number);
+	let sum = 0;
+	for (let i = 0; i < 9; i++) {
+		const tmp = ((d[i] ?? 0) + 10 - (i + 1)) % 10;
+		if (tmp === 9) sum += 9;
+		else sum += tmp * 2 ** (10 - (i + 1)) % 9;
+	}
+	return (10 - sum % 10) % 10 === d[9];
+}
+/** T.C. kimlik numarası denetimi (11 hane, ilk hane 0 değil, iki denetim hanesi). */
+function isValidNationalId(tckn) {
+	if (!/^[1-9]\d{10}$/.test(tckn)) return false;
+	const d = [...tckn].map(Number);
+	const odd = (d[0] ?? 0) + (d[2] ?? 0) + (d[4] ?? 0) + (d[6] ?? 0) + (d[8] ?? 0);
+	const even = (d[1] ?? 0) + (d[3] ?? 0) + (d[5] ?? 0) + (d[7] ?? 0);
+	const d10 = ((odd * 7 - even) % 10 + 10) % 10;
+	const d11 = d.slice(0, 10).reduce((s, n) => s + n, 0) % 10;
+	return d10 === d[9] && d11 === d[10];
+}
+const digits = (v, max) => v.replace(/\D/g, "").slice(0, max);
+/**
+* Fatura türü: bireysel ya da kurumsal kart seçimi; kurumsalda şirket unvanı, vergi dairesi, vergi
+* kimlik numarası (algoritma denetimli) ve e-Fatura mükellefiyeti; bireyselde isteğe bağlı T.C.
+* kimlik numarası (algoritma denetimli). Alanlar yalnız rakam kabul eder.
+*/
+function BillingTypeToggle({ value, onChange, askNationalId = false, className, id }) {
+	const t = useMessages();
+	const set = (patch) => onChange({
+		...value,
+		...patch
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [BillingTypeToggle_module_default.root, className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsxs(RadioCards, {
+			label: t.commerceBillingType,
+			value: value.type,
+			onChange: (v) => set({ type: v }),
+			minCardWidth: "12rem",
+			children: [/* @__PURE__ */ jsx(RadioCard, {
+				value: "individual",
+				icon: /* @__PURE__ */ jsx(UserIcon, {}),
+				description: t.commerceBillingIndividualHint,
+				children: t.commerceBillingIndividual
+			}), /* @__PURE__ */ jsx(RadioCard, {
+				value: "corporate",
+				icon: /* @__PURE__ */ jsx(BuildingIcon, {}),
+				description: t.commerceBillingCorporateHint,
+				children: t.commerceBillingCorporate
+			})]
+		}), value.type === "corporate" ? /* @__PURE__ */ jsxs("div", {
+			className: BillingTypeToggle_module_default.fields,
+			children: [
+				/* @__PURE__ */ jsx(TextField, {
+					className: BillingTypeToggle_module_default.wide,
+					label: t.commerceBillingCompany,
+					name: "companyName",
+					value: value.companyName ?? "",
+					onChange: (v) => set({ companyName: v }),
+					isRequired: true,
+					autoComplete: "organization",
+					maxLength: 200
+				}),
+				/* @__PURE__ */ jsx(TextField, {
+					label: t.commerceBillingTaxOffice,
+					name: "taxOffice",
+					value: value.taxOffice ?? "",
+					onChange: (v) => set({ taxOffice: v }),
+					isRequired: true,
+					maxLength: 80
+				}),
+				/* @__PURE__ */ jsx(TextField, {
+					label: t.commerceBillingTaxNumber,
+					name: "taxNumber",
+					value: value.taxNumber ?? "",
+					onChange: (v) => set({ taxNumber: digits(v, 10) }),
+					isRequired: true,
+					inputMode: "numeric",
+					autoComplete: "off",
+					validate: (v) => v && !isValidTaxNumber(v) ? t.commerceBillingTaxNumberInvalid : true
+				}),
+				/* @__PURE__ */ jsx(Checkbox, {
+					className: BillingTypeToggle_module_default.wide,
+					isSelected: Boolean(value.eInvoice),
+					onChange: (v) => set({ eInvoice: v }),
+					children: t.commerceBillingEInvoice
+				})
+			]
+		}) : askNationalId ? /* @__PURE__ */ jsx("div", {
+			className: BillingTypeToggle_module_default.fields,
+			children: /* @__PURE__ */ jsx(TextField, {
+				label: t.commerceBillingNationalId,
+				description: t.commerceBillingNationalIdHint,
+				name: "nationalId",
+				value: value.nationalId ?? "",
+				onChange: (v) => set({ nationalId: digits(v, 11) }),
+				inputMode: "numeric",
+				autoComplete: "off",
+				showOptional: true,
+				validate: (v) => v && !isValidNationalId(v) ? t.commerceBillingNationalIdInvalid : true
+			})
+		}) : null]
+	});
+}
+export { BillingTypeToggle, isValidNationalId, isValidTaxNumber };

package/dist/commerce/BillingTypeToggle/BillingTypeToggle.module.js

@@ -0,0 +1,8 @@
+import './BillingTypeToggle.css';
+// src/commerce/BillingTypeToggle/BillingTypeToggle.module.css
+var BillingTypeToggle_module_default = {
+	"root": "sti-BillingTypeToggle-root-f3327",
+	"fields": "sti-BillingTypeToggle-fields-f58b2",
+	"wide": "sti-BillingTypeToggle-wide-accd9"
+};
+export { BillingTypeToggle_module_default as default };

package/dist/commerce/CartDrawer/CartDrawer.css

@@ -0,0 +1,22 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-CartDrawer-body-0cd3c {
+    gap: var(--sti-space-6);
+    display: grid;
+  }
+
+  .sti-CartDrawer-list-bf515 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .sti-CartDrawer-item-62c2c {
+    padding-block: var(--sti-space-4);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-CartDrawer-item-62c2c:first-child {
+    padding-block-start: 0;
+  }
+}

package/dist/commerce/CartDrawer/CartDrawer.d.ts

@@ -0,0 +1,27 @@
+import { CartLine } from "../CartItem/CartItem.js";
+import { ReactElement, ReactNode } from "react";
+export interface CartDrawerProps {
+  lines: readonly CartLine[];
+  currency?: string;
+  onQuantityChange?: (id: string, quantity: number) => void;
+  onRemove?: (id: string) => void;
+  /** Ödeme sayfası. */
+  checkoutHref: string;
+  /** Sepet sayfası. */
+  cartHref?: string;
+  /** Boş sepette alışverişe dönüş. */
+  continueHref?: string;
+  freeShippingThreshold?: number;
+  /** Tetik (sepet simgeli düğme); verilmezse `isOpen` ile yönetilir. */
+  trigger?: ReactElement;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Liste altında öneri alanı ("Bunları da beğenebilirsiniz"). */
+  children?: ReactNode;
+}
+/**
+ * Sepet çekmecesi: sağdan açılan panel; başlıkta ürün sayısı, satırlar (küçük `CartItem`),
+ * ücretsiz kargo ilerlemesi, ara toplam ve ödemeye geç / sepete git eylemleri. Boşken açıklama ve
+ * alışverişe dönüş. Odak panelde tutulur, Escape kapatır, kapanınca odak tetiğe döner.
+ */
+export declare function CartDrawer({ lines, currency, onQuantityChange, onRemove, checkoutHref, cartHref, continueHref, freeShippingThreshold, trigger, isOpen, onOpenChange, children }: CartDrawerProps): import("react").JSX.Element;

package/dist/commerce/CartDrawer/CartDrawer.js

@@ -0,0 +1,74 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { Drawer } from "../../components/Drawer/Drawer.js";
+import { EmptyState } from "../../components/EmptyState/EmptyState.js";
+import { ShoppingBagIcon } from "../../icons/generated/ShoppingBagIcon.js";
+import { CartItem } from "../CartItem/CartItem.js";
+import { CartSummary } from "../CartSummary/CartSummary.js";
+import CartDrawer_module_default from "./CartDrawer.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/commerce/CartDrawer/CartDrawer.tsx
+/**
+* Sepet çekmecesi: sağdan açılan panel; başlıkta ürün sayısı, satırlar (küçük `CartItem`),
+* ücretsiz kargo ilerlemesi, ara toplam ve ödemeye geç / sepete git eylemleri. Boşken açıklama ve
+* alışverişe dönüş. Odak panelde tutulur, Escape kapatır, kapanınca odak tetiğe döner.
+*/
+function CartDrawer({ lines, currency, onQuantityChange, onRemove, checkoutHref, cartHref, continueHref, freeShippingThreshold, trigger, isOpen, onOpenChange, children }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const count = lines.reduce((s, l) => s + l.quantity, 0);
+	const subtotal = lines.reduce((s, l) => s + l.price * l.quantity, 0);
+	return /* @__PURE__ */ jsx(Drawer, {
+		side: "end",
+		size: "md",
+		trigger,
+		isOpen,
+		onOpenChange,
+		title: count ? template(t.commerceCartTitleCount, { count: f.number(count) }) : t.commerceCartTitle,
+		footer: lines.length ? /* @__PURE__ */ jsxs(CartSummary, {
+			subtotal,
+			currency,
+			freeShippingThreshold,
+			title: t.commerceSummary,
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				href: checkoutHref,
+				fullWidth: true,
+				children: t.commerceCheckout
+			}), cartHref ? /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				href: cartHref,
+				fullWidth: true,
+				children: t.commerceViewCart
+			}) : null]
+		}) : void 0,
+		children: lines.length ? /* @__PURE__ */ jsxs("div", {
+			className: CartDrawer_module_default.body,
+			children: [/* @__PURE__ */ jsx("ul", {
+				className: CartDrawer_module_default.list,
+				children: lines.map((line) => /* @__PURE__ */ jsx("li", {
+					className: CartDrawer_module_default.item,
+					children: /* @__PURE__ */ jsx(CartItem, {
+						line,
+						currency,
+						size: "compact",
+						onQuantityChange: onQuantityChange ? (q) => onQuantityChange(line.id, q) : void 0,
+						onRemove: onRemove ? () => onRemove(line.id) : void 0
+					})
+				}, line.id))
+			}), children]
+		}) : /* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(ShoppingBagIcon, {}),
+			title: t.commerceCartEmpty,
+			description: t.commerceCartEmptyHint,
+			primaryAction: continueHref ? /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				href: continueHref,
+				children: t.commerceContinueShopping
+			}) : void 0
+		})
+	});
+}
+export { CartDrawer };

package/dist/commerce/CartDrawer/CartDrawer.module.js

@@ -0,0 +1,8 @@
+import './CartDrawer.css';
+// src/commerce/CartDrawer/CartDrawer.module.css
+var CartDrawer_module_default = {
+	"body": "sti-CartDrawer-body-0cd3c",
+	"list": "sti-CartDrawer-list-bf515",
+	"item": "sti-CartDrawer-item-62c2c"
+};
+export { CartDrawer_module_default as default };

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

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

package/dist/commerce/CartItem/CartItem.css

@@ -0,0 +1,143 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-CartItem-root-0767c {
+    align-items: start;
+    gap: var(--sti-space-4);
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    box-sizing: border-box;
+    inline-size: 100%;
+    font-family: var(--sti-font-text);
+    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  .sti-CartItem-root-0767c[data-size="compact"] {
+    gap: var(--sti-space-3);
+    grid-template-columns: 4rem minmax(0, 1fr);
+  }
+
+  .sti-CartItem-media-4176e {
+    aspect-ratio: 1;
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-subtle);
+    overflow: hidden;
+  }
+
+  .sti-CartItem-media-4176e > img {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    display: block;
+  }
+
+  .sti-CartItem-info-238d5 {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-CartItem-name-76f25 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+  }
+
+  .sti-CartItem-link-55caa {
+    border-radius: var(--sti-radius-xs);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .sti-CartItem-link-55caa:hover {
+    text-underline-offset: .2em;
+    text-decoration: underline;
+  }
+
+  .sti-CartItem-link-55caa:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-CartItem-variant-08e74 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-CartItem-unit-5d3be {
+    align-items: baseline;
+    gap: var(--sti-space-1);
+    display: flex;
+  }
+
+  .sti-CartItem-each-ff175 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+  }
+
+  .sti-CartItem-stock-f5932 {
+    color: var(--sti-fg-warning-strong);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-CartItem-controls-b38fe {
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--sti-space-2) var(--sti-space-4);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-CartItem-root-0767c[data-size="compact"] .sti-CartItem-controls-b38fe {
+    grid-column: 2;
+    justify-content: space-between;
+  }
+
+  .sti-CartItem-qtyText-8042b {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-CartItem-total-8fbc9 {
+    min-inline-size: 5.5rem;
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    margin: 0;
+  }
+
+  .sti-CartItem-root-0767c[data-size="compact"] .sti-CartItem-total-8fbc9 {
+    min-inline-size: 0;
+  }
+
+  @media (width <= 36rem) {
+    .sti-CartItem-root-0767c[data-size="md"] {
+      grid-template-columns: 4.5rem minmax(0, 1fr);
+    }
+
+    .sti-CartItem-root-0767c[data-size="md"] .sti-CartItem-controls-b38fe {
+      grid-column: 2;
+      justify-content: space-between;
+    }
+
+    .sti-CartItem-total-8fbc9 {
+      min-inline-size: 0;
+    }
+  }
+
+  .sti-CartItem-srOnly-b1b61 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+}

package/dist/commerce/CartItem/CartItem.d.ts

@@ -0,0 +1,33 @@
+export interface CartLine {
+  id: string;
+  name: string;
+  href?: string;
+  image?: string;
+  /** Varyant özeti ("Beden: M · Renk: Lacivert"). */
+  variant?: string;
+  /** Birim fiyat. */
+  price: number;
+  /** İndirimsiz birim fiyat. */
+  compareAtPrice?: number;
+  quantity: number;
+  /** Stok sınırı (adet seçicinin üst sınırı). */
+  maxQuantity?: number;
+}
+export interface CartItemProps {
+  line: CartLine;
+  currency?: string;
+  onQuantityChange?: (quantity: number) => void;
+  onRemove?: () => void;
+  /** `compact`: çekmece için küçük görsel ve adet. */
+  size?: "md" | "compact";
+  /** Salt okunur (sipariş özeti): adet seçici ve kaldırma yok. */
+  isReadOnly?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Sepet satırı: görsel, ad (bağlantı), varyant, birim fiyat, adet seçici (stok sınırlı), satır
+ * toplamı ve kaldırma düğmesi. Kaldırma düğmesinin adı ürünü söyler; salt okunur türde adet yazıyla
+ * gösterilir.
+ */
+export declare function CartItem({ line, currency, onQuantityChange, onRemove, size, isReadOnly, className, id }: CartItemProps): import("react").JSX.Element;

package/dist/commerce/CartItem/CartItem.js

@@ -0,0 +1,101 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { TrashIcon } from "../../icons/generated/TrashIcon.js";
+import { PriceDisplay } from "../PriceDisplay/PriceDisplay.js";
+import { QuantityStepper } from "../QuantityStepper/QuantityStepper.js";
+import CartItem_module_default from "./CartItem.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/commerce/CartItem/CartItem.tsx
+/**
+* Sepet satırı: görsel, ad (bağlantı), varyant, birim fiyat, adet seçici (stok sınırlı), satır
+* toplamı ve kaldırma düğmesi. Kaldırma düğmesinin adı ürünü söyler; salt okunur türde adet yazıyla
+* gösterilir.
+*/
+function CartItem({ line, currency, onQuantityChange, onRemove, size = "md", isReadOnly = false, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const total = line.price * line.quantity;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [CartItem_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: CartItem_module_default.media,
+				children: line.image ? /* @__PURE__ */ jsx("img", {
+					src: line.image,
+					alt: "",
+					loading: "lazy"
+				}) : null
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: CartItem_module_default.info,
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: CartItem_module_default.name,
+						children: line.href ? /* @__PURE__ */ jsx("a", {
+							className: CartItem_module_default.link,
+							href: line.href,
+							children: line.name
+						}) : line.name
+					}),
+					line.variant ? /* @__PURE__ */ jsx("p", {
+						className: CartItem_module_default.variant,
+						children: line.variant
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: CartItem_module_default.unit,
+						children: [/* @__PURE__ */ jsx(PriceDisplay, {
+							price: line.price,
+							compareAtPrice: line.compareAtPrice,
+							currency,
+							size: "sm",
+							showDiscount: false
+						}), line.quantity > 1 ? /* @__PURE__ */ jsx("span", {
+							className: CartItem_module_default.each,
+							children: t.commerceCartEach
+						}) : null]
+					}),
+					line.maxQuantity !== void 0 && line.maxQuantity <= 3 && !isReadOnly ? /* @__PURE__ */ jsx("p", {
+						className: CartItem_module_default.stock,
+						children: template(t.commerceCartStockLeft, { count: f.number(line.maxQuantity) })
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: CartItem_module_default.controls,
+				children: [
+					isReadOnly ? /* @__PURE__ */ jsx("p", {
+						className: CartItem_module_default.qtyText,
+						children: template(t.commerceCartQty, { count: f.number(line.quantity) })
+					}) : /* @__PURE__ */ jsx(QuantityStepper, {
+						label: template(t.commerceCartQtyLabel, { name: line.name }),
+						value: line.quantity,
+						minValue: 1,
+						maxValue: line.maxQuantity ?? 99,
+						onChange: onQuantityChange,
+						size: "sm"
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: CartItem_module_default.total,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: CartItem_module_default.srOnly,
+							children: `${t.commerceCartLineTotal}: `
+						}), f.currency(total, { currency })]
+					}),
+					!isReadOnly && onRemove ? /* @__PURE__ */ jsx(IconButton, {
+						className: CartItem_module_default.remove,
+						variant: "ghost",
+						size: "sm",
+						icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+						label: template(t.commerceCartRemove, { name: line.name }),
+						onPress: onRemove
+					}) : null
+				]
+			})
+		]
+	});
+}
+export { CartItem };

package/dist/commerce/CartItem/CartItem.module.js

@@ -0,0 +1,18 @@
+import './CartItem.css';
+// src/commerce/CartItem/CartItem.module.css
+var CartItem_module_default = {
+	"root": "sti-CartItem-root-0767c",
+	"media": "sti-CartItem-media-4176e",
+	"info": "sti-CartItem-info-238d5",
+	"name": "sti-CartItem-name-76f25",
+	"link": "sti-CartItem-link-55caa",
+	"variant": "sti-CartItem-variant-08e74",
+	"unit": "sti-CartItem-unit-5d3be",
+	"each": "sti-CartItem-each-ff175",
+	"stock": "sti-CartItem-stock-f5932",
+	"controls": "sti-CartItem-controls-b38fe",
+	"qtyText": "sti-CartItem-qtyText-8042b",
+	"total": "sti-CartItem-total-8fbc9",
+	"srOnly": "sti-CartItem-srOnly-b1b61"
+};
+export { CartItem_module_default as default };

package/dist/commerce/CartSummary/CartSummary.css

@@ -0,0 +1,84 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-CartSummary-root-4ba9a {
+    gap: var(--sti-space-4);
+    box-sizing: border-box;
+    padding: var(--sti-space-6);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-xl);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-CartSummary-title-13c5c {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-CartSummary-lines-bf94b {
+    gap: var(--sti-space-2);
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-CartSummary-line-7b323, .sti-CartSummary-totalLine-fe694 {
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--sti-space-4);
+    display: flex;
+  }
+
+  .sti-CartSummary-line-7b323 > dt {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-CartSummary-line-7b323 > dd, .sti-CartSummary-totalLine-fe694 > dd {
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    margin: 0;
+  }
+
+  .sti-CartSummary-line-7b323[data-discount] > dd {
+    color: var(--sti-fg-success-strong);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-CartSummary-line-7b323 > dd[data-muted] {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  .sti-CartSummary-totalLine-fe694 {
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-bold);
+    margin-block-start: var(--sti-space-2);
+    padding-block-start: var(--sti-space-4);
+  }
+
+  .sti-CartSummary-totalLine-fe694 > dd {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-2xl);
+  }
+
+  .sti-CartSummary-vat-cec7e {
+    margin: calc(var(--sti-space-2) * -1) 0 0;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    text-align: end;
+  }
+
+  .sti-CartSummary-actions-a445f {
+    gap: var(--sti-space-3);
+    display: grid;
+  }
+
+  @media (forced-colors: active) {
+    .sti-CartSummary-root-4ba9a {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/commerce/CartSummary/CartSummary.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+export interface CartSummaryLine {
+  label: ReactNode;
+  /** Tutar; eksi değer indirimdir ve yeşil yazılır. */
+  amount: number;
+}
+export interface CartSummaryProps {
+  subtotal: number;
+  /** Kargo: 0 ise "Ücretsiz"; verilmezse "Sonraki adımda hesaplanır". */
+  shipping?: number;
+  /** İndirim satırları (kupon, kampanya); tutarlar eksi. */
+  discounts?: readonly CartSummaryLine[];
+  /** Ek satırlar (hediye paketi, kapıda ödeme ücreti). */
+  extras?: readonly CartSummaryLine[];
+  /** Ücretsiz kargo sınırı: ilerleme ve kalan tutar gösterilir. */
+  freeShippingThreshold?: number;
+  currency?: string;
+  /** Fiyatlara KDV dahil notu. Varsayılan `true`. */
+  vatIncluded?: boolean;
+  /** Toplamın altında eylem (ödemeye geç) ve not alanı (kupon). */
+  children?: ReactNode;
+  title?: string;
+  className?: string;
+  id?: string;
+}
+/** Genel toplam: ara toplam + kargo + ek satırlar + indirimler (eksi), en az 0. */
+export declare function cartTotal(subtotal: number, shipping?: number, lines?: readonly CartSummaryLine[]): number;
+/**
+ * Sepet özeti: ara toplam, indirimler, kargo, ek satırlar ve genel toplam (tanım listesi);
+ * ücretsiz kargoya kalan tutar ve ilerleme çubuğu; KDV dahil notu; eylem alanı.
+ */
+export declare function CartSummary({ subtotal, shipping, discounts, extras, freeShippingThreshold, currency, vatIncluded, children, title, className, id }: CartSummaryProps): import("react").JSX.Element;