@stisocial/ui 0.1.0 → 0.2.1

package/dist/commerce/StockBadge/StockBadge.js

@@ -0,0 +1,47 @@
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { AlertTriangleIcon } from "../../icons/generated/AlertTriangleIcon.js";
+import { Badge } from "../../components/Badge/Badge.js";
+import { ClockIcon } from "../../icons/generated/ClockIcon.js";
+import { CalendarIcon } from "../../icons/generated/CalendarIcon.js";
+import { XCircleIcon } from "../../icons/generated/XCircleIcon.js";
+import { jsx } from "react/jsx-runtime";
+// src/commerce/StockBadge/StockBadge.tsx
+const TONE = {
+	"in-stock": "success",
+	"low-stock": "warning",
+	"out-of-stock": "danger",
+	backorder: "info",
+	preorder: "info"
+};
+const ICON = {
+	"in-stock": /* @__PURE__ */ jsx(CheckIcon, {}),
+	"low-stock": /* @__PURE__ */ jsx(AlertTriangleIcon, {}),
+	"out-of-stock": /* @__PURE__ */ jsx(XCircleIcon, {}),
+	backorder: /* @__PURE__ */ jsx(ClockIcon, {}),
+	preorder: /* @__PURE__ */ jsx(CalendarIcon, {})
+};
+/**
+* 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.
+*/
+function stockStatus(quantity, lowThreshold = 5) {
+	if (quantity === void 0 || !Number.isFinite(quantity)) return "in-stock";
+	if (quantity <= 0) return "out-of-stock";
+	return quantity <= lowThreshold ? "low-stock" : "in-stock";
+}
+/**
+* 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.
+*/
+function StockBadge({ status, children, size = "md", variant = "soft", className, id }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		id,
+		className,
+		tone: TONE[status],
+		variant,
+		size,
+		icon: ICON[status],
+		children
+	});
+}
+export { StockBadge, stockStatus };

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

@@ -0,0 +1,2 @@
+import { StockBadge, StockBadgeProps, StockStatus, stockStatus } from "./StockBadge.js";
+export { StockBadge, StockBadgeProps, StockStatus, stockStatus };

package/dist/commerce/VariantSelector/VariantSelector.css

@@ -0,0 +1,202 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-VariantSelector-root-5fc46 {
+    --sti-variant-h: var(--sti-control-h-md);
+    --sti-variant-swatch: var(--sti-space-8);
+    --sti-variant-gap: var(--sti-space-2);
+    --sti-variant-radius: var(--sti-radius-md);
+    --sti-variant-font-size: var(--sti-font-size-sm);
+    min-width: 0;
+  }
+
+  .sti-VariantSelector-root-5fc46[data-size="sm"] {
+    --sti-variant-h: var(--sti-control-h-sm);
+    --sti-variant-swatch: var(--sti-space-6);
+    --sti-variant-font-size: var(--sti-font-size-xs);
+  }
+
+  .sti-VariantSelector-root-5fc46[data-size="lg"] {
+    --sti-variant-h: var(--sti-control-h-lg);
+    --sti-variant-swatch: var(--sti-space-10);
+    --sti-variant-font-size: var(--sti-font-size-md);
+  }
+
+  .sti-VariantSelector-header-0db61 {
+    align-items: baseline;
+    gap: var(--sti-space-1) var(--sti-space-2);
+    flex-wrap: wrap;
+    min-width: 0;
+    display: flex;
+  }
+
+  .sti-VariantSelector-chosen-4a308 {
+    min-width: 0;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-VariantSelector-options-db5a2 {
+    gap: var(--sti-variant-gap);
+    flex-wrap: wrap;
+    min-width: 0;
+    display: flex;
+  }
+
+  .sti-VariantSelector-option-e1e74 {
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .sti-VariantSelector-control-f5de0 {
+    box-sizing: border-box;
+    min-width: var(--sti-variant-h);
+    min-height: var(--sti-variant-h);
+    border: var(--sti-border-width) solid var(--sti-border-control);
+    border-radius: var(--sti-variant-radius);
+    background: var(--sti-bg-canvas);
+    max-width: 100%;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-variant-font-size);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-sm);
+    cursor: pointer;
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      box-shadow var(--sti-duration-fast) var(--sti-ease-snap);
+    -webkit-tap-highlight-color: transparent;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .sti-VariantSelector-text-cad67 {
+    min-width: 0;
+    padding-inline: var(--sti-space-4);
+    overflow-wrap: anywhere;
+    text-align: center;
+  }
+
+  .sti-VariantSelector-root-5fc46[data-type="swatch"] .sti-VariantSelector-control-f5de0 {
+    min-width: calc(var(--sti-variant-swatch) + var(--sti-space-2));
+    min-height: calc(var(--sti-variant-swatch) + var(--sti-space-2));
+    border-radius: var(--sti-radius-pill);
+    background: none;
+    border-color: #0000;
+  }
+
+  .sti-VariantSelector-swatch-cc845 {
+    box-sizing: border-box;
+    width: var(--sti-variant-swatch);
+    height: var(--sti-variant-swatch);
+    border: var(--sti-border-width) solid var(--sti-border-control);
+    border-radius: var(--sti-radius-pill);
+    background-color: var(--sti-variant-color, transparent);
+    forced-color-adjust: none;
+    display: block;
+  }
+
+  @media (pointer: coarse) {
+    .sti-VariantSelector-control-f5de0 {
+      min-width: var(--sti-control-h-md);
+      min-height: var(--sti-control-h-md);
+    }
+  }
+
+  @media (hover: hover) {
+    .sti-VariantSelector-control-f5de0[data-hovered]:not([data-selected], [data-disabled]) {
+      border-color: var(--sti-border-strong);
+    }
+
+    .sti-VariantSelector-root-5fc46[data-type="text"] .sti-VariantSelector-control-f5de0[data-hovered]:not([data-selected], [data-disabled]) {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-VariantSelector-control-f5de0[data-selected] {
+    border-color: var(--sti-border-selected);
+    box-shadow: inset 0 0 0 1px var(--sti-border-selected);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-VariantSelector-root-5fc46[data-type="text"] .sti-VariantSelector-control-f5de0[data-selected] {
+    background: var(--sti-bg-accent-subtle);
+  }
+
+  .sti-VariantSelector-root-5fc46[data-type="swatch"] .sti-VariantSelector-control-f5de0[data-selected] {
+    box-shadow: none;
+    border-width: var(--sti-border-width-strong);
+  }
+
+  .sti-VariantSelector-control-f5de0[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-VariantSelector-control-f5de0[data-invalid]:not([data-selected]) {
+    border-color: var(--sti-fg-danger);
+  }
+
+  .sti-VariantSelector-control-f5de0[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-VariantSelector-root-5fc46[data-type="text"] .sti-VariantSelector-control-f5de0[data-disabled] {
+    color: var(--sti-fg-muted);
+    border-style: dashed;
+    text-decoration: line-through;
+  }
+
+  .sti-VariantSelector-root-5fc46[data-type="swatch"] .sti-VariantSelector-control-f5de0[data-disabled]:after {
+    border-block-start: var(--sti-border-width-strong) solid var(--sti-fg);
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline: 0;
+    transform: rotate(-45deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-VariantSelector-control-f5de0 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-VariantSelector-root-5fc46[data-type="text"] .sti-VariantSelector-control-f5de0:not([data-selected], [data-disabled]) {
+      border-color: buttontext;
+    }
+
+    .sti-VariantSelector-control-f5de0[data-selected] {
+      border-color: highlight;
+      box-shadow: inset 0 0 0 1px highlight;
+    }
+
+    .sti-VariantSelector-root-5fc46[data-type="swatch"] .sti-VariantSelector-control-f5de0[data-selected] {
+      box-shadow: none;
+    }
+
+    .sti-VariantSelector-swatch-cc845 {
+      border-color: canvastext;
+    }
+
+    .sti-VariantSelector-control-f5de0[data-focus-visible] {
+      outline-color: highlight;
+    }
+
+    .sti-VariantSelector-control-f5de0[data-disabled] {
+      color: graytext;
+      opacity: 1;
+      border-color: graytext;
+    }
+
+    .sti-VariantSelector-root-5fc46[data-type="swatch"] .sti-VariantSelector-control-f5de0[data-disabled]:after {
+      border-block-start-color: graytext;
+    }
+  }
+}

package/dist/commerce/VariantSelector/VariantSelector.d.ts

@@ -0,0 +1,44 @@
+import { ErrorMessage } from "../../components/Field/Field.js";
+import { ReactNode } from "react";
+export interface VariantOption {
+  /** Seçeneğin değeri (formla gönderilen ve `onChange`'e giden). */
+  value: string;
+  /** Görünür ve okunan ad ("Lacivert", "M"). Renk örneğinde de erişilebilir ad budur. */
+  label: string;
+  /** `swatch` türünde örneğin rengi (herhangi bir CSS rengi: "#1f3a5f", "oklch(...)"). */
+  color?: string;
+  /** Seçenek şu anda alınamıyor (tükendi): çizgili görünür, seçilemez; adına "tükendi" eklenir. */
+  isUnavailable?: boolean;
+}
+export interface VariantSelectorProps {
+  /** Seçenek grubunun adı ("Renk", "Beden"). */
+  label: ReactNode;
+  description?: ReactNode;
+  errorMessage?: ErrorMessage;
+  options: readonly VariantOption[];
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (value: string) => void;
+  /**
+   * Görünüş:
+   * - `text`: etiketli seçim düğmeleri (beden, kapasite);
+   * - `swatch`: renk örnekleri (etiket görünmez, ekran okuyucu okur).
+   */
+  type?: "text" | "swatch";
+  /** Seçili seçeneğin adını grup etiketinin yanında yazar ("Renk: Lacivert"); varsayılan açık. */
+  showSelected?: boolean;
+  /** Boy: `sm`, `md`, `lg` (`control-h-*`); dokunmatikte en az 44 piksel. */
+  size?: "sm" | "md" | "lg";
+  name?: string;
+  isRequired?: boolean;
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Ürün seçeneği seçici (APG Radio Group): beden, renk, kapasite gibi tek seçimli seçenekler. Grup
+ * tek sekme durağıdır, oklar seçeneği değiştirir. Tükenen seçenek çizgili görünür ve seçilemez;
+ * seçili seçenek halka ve işaretle belli edilir (yalnız renkle değil).
+ */
+export declare function VariantSelector({ label, description, errorMessage, options, value, defaultValue, onChange, type, showSelected, size, className, ...rest }: VariantSelectorProps): import("react").JSX.Element;

package/dist/commerce/VariantSelector/VariantSelector.js

@@ -0,0 +1,77 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../../components/Field/Field.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import VariantSelector_module_default from "./VariantSelector.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { RadioButton, RadioField, RadioGroup } from "react-aria-components";
+// src/commerce/VariantSelector/VariantSelector.tsx
+/** Renk geçerli bir CSS rengiyse CSSOM ile örneğe yazar (satır içi stil özniteliği kullanılmaz). */
+function paint(color) {
+	return (el) => {
+		if (!el) return;
+		if (color && typeof CSS !== "undefined" && CSS.supports("color", color)) el.style.setProperty("--sti-variant-color", color);
+		else el.style.removeProperty("--sti-variant-color");
+	};
+}
+/**
+* Ürün seçeneği seçici (APG Radio Group): beden, renk, kapasite gibi tek seçimli seçenekler. Grup
+* tek sekme durağıdır, oklar seçeneği değiştirir. Tükenen seçenek çizgili görünür ve seçilemez;
+* seçili seçenek halka ve işaretle belli edilir (yalnız renkle değil).
+*/
+function VariantSelector({ label, description, errorMessage, options, value, defaultValue, onChange, type = "text", showSelected = true, size = "md", className, ...rest }) {
+	const t = useMessages();
+	const [inner, setInner] = useState(defaultValue ?? null);
+	const current = value === void 0 ? inner : value;
+	const chosen = options.find((o) => o.value === current);
+	return /* @__PURE__ */ jsxs(RadioGroup, {
+		...rest,
+		orientation: "horizontal",
+		value,
+		defaultValue: defaultValue ?? void 0,
+		onChange: (v) => {
+			setInner(v);
+			onChange?.(v);
+		},
+		className: [
+			fieldStyles.root,
+			VariantSelector_module_default.root,
+			className
+		].filter(Boolean).join(" "),
+		"data-size": size,
+		"data-type": type,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: VariantSelector_module_default.header,
+				children: [/* @__PURE__ */ jsx(FieldLabel, { children: label }), showSelected && chosen ? /* @__PURE__ */ jsx("span", {
+					className: VariantSelector_module_default.chosen,
+					"aria-hidden": "true",
+					children: chosen.label
+				}) : null]
+			}),
+			description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: VariantSelector_module_default.options,
+				children: options.map((option) => /* @__PURE__ */ jsx(RadioField, {
+					value: option.value,
+					isDisabled: option.isUnavailable,
+					className: VariantSelector_module_default.option,
+					children: /* @__PURE__ */ jsxs(RadioButton, {
+						className: VariantSelector_module_default.control,
+						children: [type === "swatch" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							className: VariantSelector_module_default.swatch,
+							ref: paint(option.color),
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsx(VisuallyHidden, { children: option.label })] }) : /* @__PURE__ */ jsx("span", {
+							className: VariantSelector_module_default.text,
+							children: option.label
+						}), option.isUnavailable ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${t.variantUnavailable}` }) : null]
+					})
+				}, option.value))
+			}),
+			/* @__PURE__ */ jsx(FieldErrorText, { errorMessage })
+		]
+	});
+}
+export { VariantSelector };

package/dist/commerce/VariantSelector/VariantSelector.module.js

@@ -0,0 +1,13 @@
+import './VariantSelector.css';
+// src/commerce/VariantSelector/VariantSelector.module.css
+var VariantSelector_module_default = {
+	"root": "sti-VariantSelector-root-5fc46",
+	"header": "sti-VariantSelector-header-0db61",
+	"chosen": "sti-VariantSelector-chosen-4a308",
+	"options": "sti-VariantSelector-options-db5a2",
+	"option": "sti-VariantSelector-option-e1e74",
+	"control": "sti-VariantSelector-control-f5de0",
+	"text": "sti-VariantSelector-text-cad67",
+	"swatch": "sti-VariantSelector-swatch-cc845"
+};
+export { VariantSelector_module_default as default };

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

@@ -0,0 +1,2 @@
+import { VariantOption, VariantSelector, VariantSelectorProps } from "./VariantSelector.js";
+export { VariantOption, VariantSelector, VariantSelectorProps };

package/dist/commerce/index.d.ts

@@ -0,0 +1,10 @@
+import { AddToCartButton, AddToCartButtonProps, AddToCartStatus } from "./AddToCartButton/AddToCartButton.js";
+import "./AddToCartButton/index.js";
+import { PriceDisplay, PriceDisplayProps, PriceDisplaySize, discountRatio } from "./PriceDisplay/PriceDisplay.js";
+import { QuantityStepper, QuantityStepperProps } from "./QuantityStepper/QuantityStepper.js";
+import "./QuantityStepper/index.js";
+import { StockBadge, StockBadgeProps, StockStatus, stockStatus } from "./StockBadge/StockBadge.js";
+import "./StockBadge/index.js";
+import { VariantOption, VariantSelector, VariantSelectorProps } from "./VariantSelector/VariantSelector.js";
+import "./VariantSelector/index.js";
+export { AddToCartButton, AddToCartButtonProps, AddToCartStatus, PriceDisplay, PriceDisplayProps, PriceDisplaySize, QuantityStepper, QuantityStepperProps, StockBadge, StockBadgeProps, StockStatus, VariantOption, VariantSelector, VariantSelectorProps, discountRatio, stockStatus };

package/dist/commerce/index.js

@@ -0,0 +1,6 @@
+import { AddToCartButton } from "./AddToCartButton/AddToCartButton.js";
+import { PriceDisplay, discountRatio } from "./PriceDisplay/PriceDisplay.js";
+import { QuantityStepper } from "./QuantityStepper/QuantityStepper.js";
+import { StockBadge, stockStatus } from "./StockBadge/StockBadge.js";
+import { VariantSelector } from "./VariantSelector/VariantSelector.js";
+export { AddToCartButton, PriceDisplay, QuantityStepper, StockBadge, VariantSelector, discountRatio, stockStatus };

package/dist/components/Accordion/Accordion.css

@@ -0,0 +1,176 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Accordion-root-3bc1b {
+    --sti-accordion-h: var(--sti-control-h-lg);
+    --sti-accordion-px: var(--sti-space-4);
+    --sti-accordion-gap: var(--sti-space-3);
+    --sti-accordion-title-size: var(--sti-font-size-md);
+    --sti-accordion-title-leading: var(--sti-line-height-md);
+    --sti-accordion-radius: var(--sti-radius-md);
+    --sti-accordion-divider: var(--sti-border-subtle);
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-Accordion-root-3bc1b[data-size="sm"] {
+    --sti-accordion-h: var(--sti-control-h-md);
+    --sti-accordion-px: var(--sti-space-3);
+    --sti-accordion-title-size: var(--sti-font-size-sm);
+    --sti-accordion-title-leading: var(--sti-line-height-sm);
+  }
+
+  .sti-Accordion-root-3bc1b[data-size="lg"] {
+    --sti-accordion-h: calc(var(--sti-control-h-lg) + var(--sti-space-4));
+    --sti-accordion-px: var(--sti-space-6);
+    --sti-accordion-title-size: var(--sti-font-size-lg);
+    --sti-accordion-title-leading: var(--sti-line-height-lg);
+  }
+
+  .sti-Accordion-root-3bc1b[data-variant="flush"] {
+    border-block-start: var(--sti-border-width) solid var(--sti-accordion-divider);
+  }
+
+  .sti-Accordion-root-3bc1b[data-variant="separated"] {
+    gap: var(--sti-space-2);
+  }
+
+  .sti-Accordion-group-84d77 {
+    display: contents;
+  }
+
+  .sti-Accordion-item-aa828 {
+    min-inline-size: 0;
+  }
+
+  .sti-Accordion-root-3bc1b[data-variant="flush"] .sti-Accordion-item-aa828 {
+    border-block-end: var(--sti-border-width) solid var(--sti-accordion-divider);
+  }
+
+  .sti-Accordion-root-3bc1b[data-variant="separated"] .sti-Accordion-item-aa828 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-accordion-radius);
+    background: var(--sti-bg-surface);
+  }
+
+  .sti-Accordion-heading-bc71f {
+    font: inherit;
+    margin: 0;
+  }
+
+  .sti-Accordion-trigger-4ad24 {
+    inline-size: 100%;
+    min-block-size: var(--sti-accordion-h);
+    align-items: center;
+    gap: var(--sti-accordion-gap);
+    padding-block: var(--sti-space-2);
+    padding-inline: var(--sti-accordion-px);
+    border-radius: inherit;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    transition: background var(--sti-duration-fast) var(--sti-ease-snap);
+    background: none;
+    border: 0;
+    outline: none;
+    display: flex;
+  }
+
+  @media (hover: hover) {
+    .sti-Accordion-trigger-4ad24[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-Accordion-trigger-4ad24[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-Accordion-trigger-4ad24[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-Accordion-trigger-4ad24[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-Accordion-icon-f8291 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-Accordion-title-a05be {
+    flex: 1;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-Accordion-name-66847 {
+    font-size: var(--sti-accordion-title-size);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-accordion-title-leading);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-Accordion-description-572eb {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-Accordion-chevron-53919 {
+    color: var(--sti-fg-muted);
+    transition: rotate var(--sti-duration-fast) var(--sti-ease-snap);
+    flex: none;
+  }
+
+  .sti-Accordion-item-aa828[data-expanded] .sti-Accordion-chevron-53919 {
+    rotate: 180deg;
+  }
+
+  .sti-Accordion-panel-33d52 {
+    min-inline-size: 0;
+  }
+
+  .sti-Accordion-content-ae7b8 {
+    padding-block: var(--sti-space-1) var(--sti-space-5);
+    padding-inline: var(--sti-accordion-px);
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+  }
+
+  @media (forced-colors: active) {
+    .sti-Accordion-root-3bc1b[data-variant="separated"] .sti-Accordion-item-aa828 {
+      border-color: canvastext;
+    }
+
+    .sti-Accordion-root-3bc1b[data-variant="flush"], .sti-Accordion-root-3bc1b[data-variant="flush"] .sti-Accordion-item-aa828 {
+      border-color: graytext;
+    }
+
+    .sti-Accordion-trigger-4ad24[data-hovered] {
+      outline: var(--sti-border-width) solid Highlight;
+      outline-offset: calc(var(--sti-border-width) * -1);
+    }
+
+    .sti-Accordion-trigger-4ad24[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Accordion-chevron-53919, .sti-Accordion-trigger-4ad24 {
+      transition: none;
+    }
+  }
+}

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode, Ref } from "react";
+export type AccordionSize = "sm" | "md" | "lg";
+export type AccordionVariant = "flush" | "separated";
+export interface AccordionItem {
+  /** Öğenin kimliği (zorunlu, benzersiz). */
+  id: string;
+  /** Başlık (zorunlu): düğmenin adıdır. */
+  title: ReactNode;
+  /** Açılan içerik. */
+  content: ReactNode;
+  /** Başlığın altında kısa not. */
+  description?: ReactNode;
+  /** Başlığın önünde süs ikonu. */
+  icon?: ReactNode;
+  isDisabled?: boolean;
+}
+export interface AccordionProps {
+  /** Akordeonun adı (zorunlu): grup bu adla bir bölge olarak okunur. */
+  label: string;
+  items: readonly AccordionItem[];
+  /** Birden çok öğe aynı anda açık kalabilir; varsayılan: biri açılınca diğeri kapanır. */
+  allowsMultiple?: boolean;
+  expandedKeys?: Iterable<string>;
+  defaultExpandedKeys?: Iterable<string>;
+  onExpandedChange?: (keys: Set<string>) => void;
+  /** Başlıkların belge düzeyi; görünüşü değişmez. */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+  /** Görünüş: `flush` yalnız ayraç çizgileri, `separated` her öğe ayrı kart. */
+  variant?: AccordionVariant;
+  size?: AccordionSize;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Akordeon (APG Accordion): üst üste başlıklar; her başlıktaki düğme kendi bölümünü açar. Enter ve
+ * Boşluk açıp kapatır; ↑ ↓ başlıklar arasında gezer, Home ve End ilk ve son başlığa gider.
+ */
+export declare function Accordion({ label, items, allowsMultiple, expandedKeys, defaultExpandedKeys, onExpandedChange, headingLevel, variant, size, isDisabled, className, id, ref }: AccordionProps): import("react").JSX.Element;