@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,90 @@
+"use client";
+import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
+import Accordion_module_default from "./Accordion.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Button, Disclosure, DisclosureGroup, DisclosurePanel, Heading } from "react-aria-components";
+// src/components/Accordion/Accordion.tsx
+/**
+* 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.
+*/
+function Accordion({ label, items, allowsMultiple = false, expandedKeys, defaultExpandedKeys, onExpandedChange, headingLevel = 3, variant = "flush", size = "md", isDisabled, className, id, ref }) {
+	const root = useRef(null);
+	const onKeyDown = (e) => {
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		const triggers = Array.from(root.current?.querySelectorAll("[data-accordion-trigger]:not(:disabled)") ?? []);
+		const at = triggers.indexOf(document.activeElement);
+		if (at < 0) return;
+		e.preventDefault();
+		triggers[e.key === "Home" ? 0 : e.key === "End" ? triggers.length - 1 : (at + (e.key === "ArrowDown" ? 1 : -1) + triggers.length) % triggers.length]?.focus();
+	};
+	return /* @__PURE__ */ jsx("section", {
+		ref: (node) => {
+			root.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		id,
+		"aria-label": label,
+		className: [Accordion_module_default.root, className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		"data-size": size,
+		onKeyDown,
+		children: /* @__PURE__ */ jsx(DisclosureGroup, {
+			className: Accordion_module_default.group,
+			allowsMultipleExpanded: allowsMultiple,
+			expandedKeys,
+			defaultExpandedKeys,
+			onExpandedChange: onExpandedChange ? (keys) => onExpandedChange(new Set(Array.from(keys, String))) : void 0,
+			isDisabled,
+			children: items.map((item) => /* @__PURE__ */ jsxs(Disclosure, {
+				id: item.id,
+				className: Accordion_module_default.item,
+				isDisabled: item.isDisabled,
+				children: [/* @__PURE__ */ jsx(Heading, {
+					level: headingLevel,
+					className: Accordion_module_default.heading,
+					children: /* @__PURE__ */ jsxs(Button, {
+						slot: "trigger",
+						className: Accordion_module_default.trigger,
+						"data-accordion-trigger": "",
+						children: [
+							item.icon ? /* @__PURE__ */ jsx("span", {
+								className: Accordion_module_default.icon,
+								"aria-hidden": "true",
+								children: item.icon
+							}) : null,
+							/* @__PURE__ */ jsxs("span", {
+								className: Accordion_module_default.title,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: Accordion_module_default.name,
+									children: item.title
+								}), item.description ? /* @__PURE__ */ jsx("span", {
+									className: Accordion_module_default.description,
+									children: item.description
+								}) : null]
+							}),
+							/* @__PURE__ */ jsx(ChevronDownIcon, {
+								className: Accordion_module_default.chevron,
+								size: "md"
+							})
+						]
+					})
+				}), /* @__PURE__ */ jsx(DisclosurePanel, {
+					className: Accordion_module_default.panel,
+					children: /* @__PURE__ */ jsx("div", {
+						className: Accordion_module_default.content,
+						children: item.content
+					})
+				})]
+			}, item.id))
+		})
+	});
+}
+export { Accordion };

package/dist/components/Accordion/Accordion.module.js

@@ -0,0 +1,17 @@
+import './Accordion.css';
+// src/components/Accordion/Accordion.module.css
+var Accordion_module_default = {
+	"root": "sti-Accordion-root-3bc1b",
+	"group": "sti-Accordion-group-84d77",
+	"item": "sti-Accordion-item-aa828",
+	"heading": "sti-Accordion-heading-bc71f",
+	"trigger": "sti-Accordion-trigger-4ad24",
+	"icon": "sti-Accordion-icon-f8291",
+	"title": "sti-Accordion-title-a05be",
+	"name": "sti-Accordion-name-66847",
+	"description": "sti-Accordion-description-572eb",
+	"chevron": "sti-Accordion-chevron-53919",
+	"panel": "sti-Accordion-panel-33d52",
+	"content": "sti-Accordion-content-ae7b8"
+};
+export { Accordion_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Accordion, AccordionItem, AccordionProps, AccordionSize, AccordionVariant } from "./Accordion.js";
+export { Accordion, AccordionItem, AccordionProps, AccordionSize, AccordionVariant };

package/dist/components/ActionBar/ActionBar.css

@@ -0,0 +1,74 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ActionBar-root-d3832 {
+    --sti-action-bar-bg: var(--sti-bg-canvas);
+    --sti-action-bar-py: var(--sti-space-3);
+    --sti-action-bar-px: 0px;
+    --sti-action-bar-gap: var(--sti-space-2);
+    --sti-action-bar-offset: 0px;
+    align-items: center;
+    gap: var(--sti-action-bar-gap) var(--sti-space-4);
+    min-width: 0;
+    padding-block: var(--sti-action-bar-py)
+      calc(var(--sti-action-bar-py) + env(safe-area-inset-bottom, 0px));
+    padding-inline: max(var(--sti-action-bar-px), env(safe-area-inset-left, 0px))
+      max(var(--sti-action-bar-px), env(safe-area-inset-right, 0px));
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-action-bar-bg);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-ActionBar-root-d3832[data-surface="surface"] {
+    --sti-action-bar-bg: var(--sti-bg-surface);
+  }
+
+  .sti-ActionBar-root-d3832[data-sticky] {
+    z-index: var(--sti-z-sticky);
+    position: sticky;
+    inset-block-end: var(--sti-action-bar-offset);
+  }
+
+  .sti-ActionBar-status-dd38f {
+    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;
+    flex: auto;
+    margin: 0;
+  }
+
+  .sti-ActionBar-actions-71470 {
+    justify-content: flex-end;
+    gap: var(--sti-action-bar-gap);
+    flex-wrap: wrap;
+    min-width: 0;
+    margin-inline-start: auto;
+    display: flex;
+  }
+
+  @media (width <= 39.9375rem) {
+    .sti-ActionBar-root-d3832 {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0;
+    }
+
+    .sti-ActionBar-status-dd38f:not(:empty) {
+      margin-block-end: var(--sti-space-3);
+    }
+
+    .sti-ActionBar-actions-71470 {
+      grid-template-columns: minmax(0, 1fr);
+      margin-inline-start: 0;
+      display: grid;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ActionBar-root-d3832 {
+      border-block-start-color: canvastext;
+    }
+  }
+}

package/dist/components/ActionBar/ActionBar.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+export interface ActionBarProps {
+  /** Çubuğun bölge adı ("Profil formunun eylemleri"); ekran okuyucu bu adla bulur. */
+  label: string;
+  /** Eylemler: genellikle `Button`'lar; birincil eylem en sonda (geniş ekranda en sağda). */
+  children: ReactNode;
+  /**
+   * Başta durum metni ("Kaydedilmemiş değişiklikler var"). Kibar canlı bölgededir: değişince
+   * ekran okuyucu duyurur. Bölge her zaman çizilir; metin yoksa boştur ve yer kaplamaz.
+   */
+  status?: ReactNode;
+  /** Kaydırma kabının (sayfanın) altına yapışır; `false` ise formun sonunda akışta durur. */
+  sticky?: boolean;
+  /** Zemin: sayfa zemini ya da kart içindeki form için yüzey zemini. */
+  surface?: "canvas" | "surface";
+  className?: string;
+  id?: string;
+}
+/**
+ * Formun altındaki eylem çubuğu (Kaydet / Vazgeç): sayfanın altına yapışır, üstünde ince bir
+ * çizgi bulunur, telefonda düğmeler tam genişliktedir ve güvenli alana (ekran çentiği, ana ekran
+ * çubuğu) uyar. Sunucu bileşenidir; yerleşik metin taşımaz.
+ */
+export declare function ActionBar({ label, children, status, sticky, surface, className, id }: ActionBarProps): import("react").JSX.Element;

package/dist/components/ActionBar/ActionBar.js

@@ -0,0 +1,26 @@
+import ActionBar_module_default from "./ActionBar.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/ActionBar/ActionBar.tsx
+/**
+* Formun altındaki eylem çubuğu (Kaydet / Vazgeç): sayfanın altına yapışır, üstünde ince bir
+* çizgi bulunur, telefonda düğmeler tam genişliktedir ve güvenli alana (ekran çentiği, ana ekran
+* çubuğu) uyar. Sunucu bileşenidir; yerleşik metin taşımaz.
+*/
+function ActionBar({ label, children, status, sticky = true, surface = "canvas", className, id }) {
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-label": label,
+		className: [ActionBar_module_default.root, className].filter(Boolean).join(" "),
+		"data-sticky": sticky ? "" : void 0,
+		"data-surface": surface,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: ActionBar_module_default.status,
+			role: "status",
+			children: status
+		}), /* @__PURE__ */ jsx("div", {
+			className: ActionBar_module_default.actions,
+			children
+		})]
+	});
+}
+export { ActionBar };

package/dist/components/ActionBar/ActionBar.module.js

@@ -0,0 +1,8 @@
+import './ActionBar.css';
+// src/components/ActionBar/ActionBar.module.css
+var ActionBar_module_default = {
+	"root": "sti-ActionBar-root-d3832",
+	"status": "sti-ActionBar-status-dd38f",
+	"actions": "sti-ActionBar-actions-71470"
+};
+export { ActionBar_module_default as default };

package/dist/components/ActionBar/index.d.ts

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

package/dist/components/ActionButton/ActionButton.css

@@ -0,0 +1,268 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ActionButton-root-87caa {
+    --sti-action-button-h: var(--sti-control-h-md);
+    --sti-action-button-px: var(--sti-space-6);
+    --sti-action-button-gap: var(--sti-space-2);
+    --sti-action-button-font-size: var(--sti-font-size-sm);
+    --sti-action-button-icon: var(--sti-icon-sm);
+    --sti-action-button-radius: var(--sti-radius-pill);
+    --sti-action-button-bg: transparent;
+    --sti-action-button-fg: var(--sti-fg);
+    --sti-action-button-meta-fg: var(--sti-fg-muted);
+    --sti-action-button-border: transparent;
+    --sti-action-button-shadow: none;
+    --sti-action-button-press-scale: .98;
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-action-button-gap);
+    min-width: 0;
+    max-width: 100%;
+    min-height: var(--sti-action-button-h);
+    padding-inline: var(--sti-action-button-px);
+    border: var(--sti-border-width) solid var(--sti-action-button-border);
+    border-radius: var(--sti-action-button-radius);
+    background: var(--sti-action-button-bg);
+    box-shadow: var(--sti-action-button-shadow);
+    color: var(--sti-action-button-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-action-button-font-size);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: .01em;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      color var(--sti-duration-fast) var(--sti-ease-snap),
+      box-shadow var(--sti-duration-base) var(--sti-ease-out),
+      transform var(--sti-duration-fast) var(--sti-ease-snap);
+    line-height: 1;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .sti-ActionButton-root-87caa[data-size="sm"] {
+    --sti-action-button-h: var(--sti-control-h-sm);
+    --sti-action-button-px: var(--sti-space-4);
+    --sti-action-button-gap: var(--sti-space-1);
+  }
+
+  .sti-ActionButton-root-87caa[data-size="lg"] {
+    --sti-action-button-h: var(--sti-control-h-lg);
+    --sti-action-button-px: var(--sti-space-8);
+    --sti-action-button-font-size: var(--sti-font-size-body);
+    --sti-action-button-icon: var(--sti-icon-md);
+  }
+
+  @media (pointer: coarse) {
+    .sti-ActionButton-root-87caa[data-size="sm"] {
+      --sti-action-button-h: var(--sti-control-h-md);
+    }
+  }
+
+  .sti-ActionButton-root-87caa[data-icon-only] {
+    width: var(--sti-action-button-h);
+    padding-inline: 0;
+  }
+
+  .sti-ActionButton-root-87caa[data-variant="primary"] {
+    --sti-action-button-bg: var(--sti-fill-accent);
+    --sti-action-button-fg: var(--sti-fg-on-accent);
+    --sti-action-button-meta-fg: var(--sti-fg-on-accent);
+  }
+
+  .sti-ActionButton-root-87caa[data-variant="secondary"] {
+    --sti-action-button-border: var(--sti-border-strong);
+  }
+
+  .sti-ActionButton-root-87caa[data-variant="ghost"] {
+    --sti-action-button-fg: var(--sti-fg-muted);
+  }
+
+  .sti-ActionButton-root-87caa[data-status="success"]:not([data-variant="primary"]) {
+    --sti-action-button-fg: var(--sti-fg-success);
+  }
+
+  .sti-ActionButton-root-87caa[data-status="success"][data-variant="secondary"] {
+    --sti-action-button-border: var(--sti-border-success);
+  }
+
+  .sti-ActionButton-root-87caa[data-status="error"]:not([data-variant="primary"]) {
+    --sti-action-button-fg: var(--sti-fg-danger);
+  }
+
+  .sti-ActionButton-root-87caa[data-status="error"][data-variant="secondary"] {
+    --sti-action-button-border: var(--sti-border-danger);
+  }
+
+  @media (hover: hover) {
+    .sti-ActionButton-root-87caa[data-hovered]:not([data-disabled], [data-pending], [data-unavailable])[data-variant="primary"] {
+      --sti-action-button-bg: var(--sti-fill-accent-hover);
+      --sti-action-button-shadow: 0 0 40px
+          color-mix(in oklab, var(--sti-fill-accent) 35%, transparent);
+    }
+
+    .sti-ActionButton-root-87caa[data-hovered]:not([data-disabled], [data-pending], [data-unavailable])[data-variant="secondary"][data-status="idle"] {
+      --sti-action-button-border: var(--sti-border-accent);
+      --sti-action-button-bg: var(--sti-bg-accent-subtle);
+      --sti-action-button-fg: var(--sti-fg-accent);
+      --sti-action-button-meta-fg: var(--sti-fg-accent);
+    }
+
+    .sti-ActionButton-root-87caa[data-hovered]:not([data-disabled], [data-pending], [data-unavailable])[data-variant="ghost"][data-status="idle"] {
+      --sti-action-button-bg: var(--sti-bg-surface-hover);
+      --sti-action-button-fg: var(--sti-fg);
+    }
+
+    .sti-ActionButton-root-87caa[data-hovered]:not([data-disabled], [data-pending], [data-unavailable])[data-status="success"]:not([data-variant="primary"]) {
+      --sti-action-button-bg: var(--sti-bg-success-subtle);
+      --sti-action-button-fg: var(--sti-fg-success-strong);
+      --sti-action-button-meta-fg: var(--sti-fg-success-strong);
+    }
+
+    .sti-ActionButton-root-87caa[data-hovered]:not([data-disabled], [data-pending], [data-unavailable])[data-status="error"]:not([data-variant="primary"]) {
+      --sti-action-button-bg: var(--sti-bg-danger-subtle);
+      --sti-action-button-fg: var(--sti-fg-danger-strong);
+      --sti-action-button-meta-fg: var(--sti-fg-danger-strong);
+    }
+  }
+
+  .sti-ActionButton-root-87caa[data-pressed]:not([data-disabled], [data-pending], [data-unavailable]) {
+    transform: scale(var(--sti-action-button-press-scale));
+  }
+
+  .sti-ActionButton-root-87caa:focus-visible, .sti-ActionButton-root-87caa[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ActionButton-root-87caa:focus:not([data-focus-visible]) {
+    outline: none;
+  }
+
+  .sti-ActionButton-root-87caa[data-disabled], .sti-ActionButton-root-87caa[data-unavailable] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-ActionButton-root-87caa[data-pending] {
+    cursor: progress;
+  }
+
+  .sti-ActionButton-faces-a6dd0 {
+    grid-template-columns: minmax(0, max-content);
+    place-items: center;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-grid;
+  }
+
+  .sti-ActionButton-face-3b403 {
+    align-items: center;
+    gap: var(--sti-action-button-gap);
+    opacity: 0;
+    grid-area: 1 / 1;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .sti-ActionButton-face-3b403[data-shown] {
+    opacity: 1;
+  }
+
+  .sti-ActionButton-icon-a7027 {
+    font-size: var(--sti-action-button-icon);
+    flex: none;
+    display: inline-flex;
+  }
+
+  .sti-ActionButton-icon-a7027[data-status="success"], .sti-ActionButton-icon-a7027[data-status="error"] {
+    animation: sti-ActionButton-sti-action-button-pop-0d62a var(--sti-duration-base) var(--sti-ease-out);
+  }
+
+  .sti-ActionButton-label-0c100 {
+    text-overflow: ellipsis;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .sti-ActionButton-meta-886f3 {
+    color: var(--sti-action-button-meta-fg);
+    font-weight: var(--sti-font-weight-regular);
+    font-variant-numeric: tabular-nums;
+    flex: none;
+    display: inline-grid;
+  }
+
+  .sti-ActionButton-metaText-b2bb0 {
+    text-align: start;
+    opacity: 0;
+    grid-area: 1 / 1;
+  }
+
+  .sti-ActionButton-metaText-b2bb0[data-shown] {
+    opacity: 1;
+  }
+
+  .sti-ActionButton-live-bcfc6 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ActionButton-root-87caa {
+      transition: none;
+    }
+
+    .sti-ActionButton-root-87caa[data-pressed] {
+      transform: none;
+    }
+
+    .sti-ActionButton-icon-a7027[data-status="success"], .sti-ActionButton-icon-a7027[data-status="error"] {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ActionButton-root-87caa {
+      border-color: buttontext;
+    }
+
+    .sti-ActionButton-root-87caa[data-disabled], .sti-ActionButton-root-87caa[data-unavailable] {
+      color: graytext;
+      opacity: 1;
+      border-color: graytext;
+    }
+  }
+
+  @media print {
+    .sti-ActionButton-root-87caa {
+      display: none;
+    }
+  }
+
+  @keyframes sti-ActionButton-sti-action-button-pop-0d62a {
+    from {
+      opacity: 0;
+      transform: scale(.6);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}

package/dist/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, Ref } from "react";
+export type ActionButtonVariant = "primary" | "secondary" | "ghost";
+export type ActionButtonSize = "sm" | "md" | "lg";
+/** Dışa açık eylem düğmelerinin ortak görünüş özellikleri. */
+export interface ActionButtonAppearance {
+  /**
+   * Görünüş türü (`Button` ile aynı):
+   * - `secondary`: çizgili (varsayılan);
+   * - `ghost`: araç çubuğu ve satır içi kullanım;
+   * - `primary`: ekranın ana eylemiyse (SİNYAL turkuazı).
+   */
+  variant?: ActionButtonVariant;
+  /** Boy: yükseklik `--sti-control-h-sm/md/lg`; dokunmatikte en az 44 piksel. */
+  size?: ActionButtonSize;
+  /** Yalnız ikon: yuvarlak düğme; etiket erişilebilir ad olarak kalır. */
+  iconOnly?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+  /** Ek açıklama bağlantısı. */
+  "aria-describedby"?: string;
+}