@stisocial/ui 0.2.1 → 0.3.0

package/dist/components/ActivityFeed/ActivityFeed.css

@@ -0,0 +1,185 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ActivityFeed-root-e8e06 {
+    --sti-activity-gap: var(--sti-space-4);
+    --sti-activity-media: var(--sti-control-h-sm);
+    gap: var(--sti-space-6);
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-ActivityFeed-group-86b1e {
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-ActivityFeed-heading-7e8c0 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: var(--sti-tracking-xs);
+    line-height: var(--sti-line-height-xs);
+    margin: 0;
+  }
+
+  .sti-ActivityFeed-list-1e7eb {
+    gap: var(--sti-activity-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-ActivityFeed-item-9c2a7 {
+    grid-template-columns: var(--sti-activity-media) minmax(0, 1fr);
+    column-gap: var(--sti-space-3);
+    align-items: start;
+    display: grid;
+  }
+
+  .sti-ActivityFeed-media-e2c98 {
+    inline-size: var(--sti-activity-media);
+    block-size: var(--sti-activity-media);
+    place-items: center;
+    display: inline-grid;
+    position: relative;
+  }
+
+  .sti-ActivityFeed-iconBox-eeda6, .sti-ActivityFeed-badge-000df {
+    --sti-activity-fill: var(--sti-bg-surface-active);
+    --sti-activity-ink: var(--sti-fg-muted);
+    box-sizing: border-box;
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-activity-fill);
+    color: var(--sti-activity-ink);
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-ActivityFeed-iconBox-eeda6 {
+    block-size: 100%;
+    inline-size: 100%;
+    font-size: var(--sti-icon-sm);
+  }
+
+  .sti-ActivityFeed-badge-000df {
+    inline-size: calc(var(--sti-activity-media) * .5);
+    block-size: calc(var(--sti-activity-media) * .5);
+    box-shadow: 0 0 0 var(--sti-border-width-strong) var(--sti-bg-canvas);
+    font-size: calc(var(--sti-activity-media) * .3);
+    position: absolute;
+    inset-block-end: calc(var(--sti-space-1) * -1);
+    inset-inline-end: calc(var(--sti-space-1) * -1);
+  }
+
+  .sti-ActivityFeed-iconBox-eeda6[data-tone="accent"], .sti-ActivityFeed-badge-000df[data-tone="accent"] {
+    --sti-activity-fill: var(--sti-bg-accent-subtle);
+    --sti-activity-ink: var(--sti-fg-accent);
+  }
+
+  .sti-ActivityFeed-iconBox-eeda6[data-tone="success"], .sti-ActivityFeed-badge-000df[data-tone="success"] {
+    --sti-activity-fill: var(--sti-bg-success-subtle);
+    --sti-activity-ink: var(--sti-fg-success);
+  }
+
+  .sti-ActivityFeed-iconBox-eeda6[data-tone="warning"], .sti-ActivityFeed-badge-000df[data-tone="warning"] {
+    --sti-activity-fill: var(--sti-bg-warning-subtle);
+    --sti-activity-ink: var(--sti-fg-warning);
+  }
+
+  .sti-ActivityFeed-iconBox-eeda6[data-tone="danger"], .sti-ActivityFeed-badge-000df[data-tone="danger"] {
+    --sti-activity-fill: var(--sti-bg-danger-subtle);
+    --sti-activity-ink: var(--sti-fg-danger);
+  }
+
+  .sti-ActivityFeed-iconBox-eeda6[data-tone="info"], .sti-ActivityFeed-badge-000df[data-tone="info"] {
+    --sti-activity-fill: var(--sti-bg-info-subtle);
+    --sti-activity-ink: var(--sti-fg-info);
+  }
+
+  .sti-ActivityFeed-body-3a782 {
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    padding-block-start: calc((var(--sti-activity-media) - var(--sti-line-height-sm)) / 2);
+    display: grid;
+  }
+
+  .sti-ActivityFeed-sentence-6a36f {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-ActivityFeed-actor-1a238, .sti-ActivityFeed-actorLink-207a4 {
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-ActivityFeed-actorLink-207a4 {
+    border-radius: var(--sti-radius-xs);
+    color: var(--sti-fg);
+    outline: none;
+    text-decoration: none;
+  }
+
+  @media (hover: hover) {
+    .sti-ActivityFeed-actorLink-207a4[data-hovered] {
+      text-underline-offset: var(--sti-link-underline-offset);
+      text-decoration: underline;
+    }
+  }
+
+  .sti-ActivityFeed-actorLink-207a4[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ActivityFeed-summary-ce85a {
+    color: var(--sti-fg);
+  }
+
+  .sti-ActivityFeed-separator-eadaf, .sti-ActivityFeed-time-cd0c5 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    white-space: nowrap;
+  }
+
+  .sti-ActivityFeed-content-cf38a {
+    min-inline-size: 0;
+  }
+
+  .sti-ActivityFeed-content-cf38a[data-quote] {
+    padding: var(--sti-space-3) var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-ActivityFeed-more-0993b {
+    justify-content: center;
+    display: flex;
+  }
+
+  .sti-ActivityFeed-empty-65d74 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  @media (forced-colors: active) {
+    .sti-ActivityFeed-iconBox-eeda6, .sti-ActivityFeed-badge-000df, .sti-ActivityFeed-content-cf38a[data-quote] {
+      border-color: canvastext;
+    }
+
+    .sti-ActivityFeed-actorLink-207a4 {
+      color: linktext;
+    }
+  }
+}

package/dist/components/ActivityFeed/ActivityFeed.d.ts

@@ -0,0 +1,54 @@
+import { DateValue } from "../DateTime/instant.js";
+import { ReactNode } from "react";
+export type ActivityTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+export interface ActivityActor {
+  name: string;
+  avatarSrc?: string;
+  /** Verilirse ad kişinin profiline bağlantıdır. */
+  href?: string;
+}
+export interface ActivityItem {
+  /** Kalıcı anahtar. */
+  id: string;
+  /** İşlemi yapan kişi; verilmezse kişisiz (sistem) olaydır ve ikon kutusu çizilir. */
+  actor?: ActivityActor;
+  /** Adın ardından gelen cümle ("Bahar kampanyası gönderisine yorum yaptı"). */
+  summary: ReactNode;
+  /** İşlemin anı. */
+  time: DateValue;
+  /** Kişisiz olayın ikonu; kişili olayda avatarın köşesinde küçük rozet. */
+  icon?: ReactNode;
+  /** İkonun rengi; varsayılan `neutral`. */
+  tone?: ActivityTone;
+  /**
+   * Cümlenin altında ek içerik. Düz metin (yorum, değişiklik özeti) sakin zeminli alıntı kutusunda;
+   * zengin içerik (dosya listesi, kart) çerçevesiz çizilir.
+   */
+  content?: ReactNode;
+}
+export interface ActivityFeedProps {
+  items: readonly ActivityItem[];
+  /** Bölgenin adı (zorunlu): "Proje etkinliği". */
+  label: string;
+  /** Güne göre gruplar (Bugün, Dün, tarih); varsayılan açık. */
+  groupByDay?: boolean;
+  /** Gün başlıklarının belge düzeyi; varsayılan 3. */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+  /**
+   * Sunucunun isteği işlediği an: göreli zaman ve gün grupları sunucu ile tarayıcıda aynı çıkar.
+   */
+  now?: Date | number;
+  /** Altta "Daha fazla göster" düğmesi. */
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+  isLoadingMore?: boolean;
+  /** Etkinlik yokken gösterilecek içerik. */
+  emptyState?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * Etkinlik akışı: kişilerin yaptığı işlemler (avatar, kalın ad, eylem cümlesi, göreli zaman) güne
+ * göre gruplanır; isteğe bağlı alıntı kutusu ve "Daha fazla göster".
+ */
+export declare function ActivityFeed({ items, label, groupByDay, headingLevel, now, hasMore, onLoadMore, isLoadingMore, emptyState, className, id }: ActivityFeedProps): import("react").JSX.Element;

package/dist/components/ActivityFeed/ActivityFeed.js

@@ -0,0 +1,134 @@
+"use client";
+import { dayKey } from "../../format/dates.js";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { Avatar } from "../Avatar/Avatar.js";
+import { Button as Button$1 } from "../Button/Button.js";
+import { parseInstant } from "../DateTime/instant.js";
+import { RelativeTime } from "../RelativeTime/RelativeTime.js";
+import ActivityFeed_module_default from "./ActivityFeed.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Link } from "react-aria-components";
+// src/components/ActivityFeed/ActivityFeed.tsx
+/**
+* Etkinlik akışı: kişilerin yaptığı işlemler (avatar, kalın ad, eylem cümlesi, göreli zaman) güne
+* göre gruplanır; isteğe bağlı alıntı kutusu ve "Daha fazla göster".
+*/
+function ActivityFeed({ items, label, groupByDay = true, headingLevel = 3, now, hasMore = false, onLoadMore, isLoadingMore = false, emptyState, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const base = useId();
+	const H = `h${headingLevel}`;
+	const tz = f.context.timeZone;
+	if (items.length === 0 && emptyState) return /* @__PURE__ */ jsx("section", {
+		id,
+		"aria-label": label,
+		className: [ActivityFeed_module_default.root, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsx("div", {
+			className: ActivityFeed_module_default.empty,
+			children: emptyState
+		})
+	});
+	const reference = new Date(now ?? Date.now());
+	const today = dayKey(reference, tz);
+	const yesterday = dayKey(/* @__PURE__ */ new Date(reference.getTime() - 864e5), tz);
+	const groups = [];
+	for (const item of items) {
+		const date = parseInstant(item.time);
+		const key = groupByDay ? dayKey(date, tz) : "all";
+		let group = groups.find((g) => g.key === key);
+		if (!group) {
+			group = {
+				key,
+				label: key === today ? t.today : key === yesterday ? t.yesterday : f.date(date),
+				items: []
+			};
+			groups.push(group);
+		}
+		group.items.push(item);
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-label": label,
+		className: [ActivityFeed_module_default.root, className].filter(Boolean).join(" "),
+		children: [groups.map((group, gi) => {
+			const headingId = `${base}-g${gi}`;
+			return /* @__PURE__ */ jsxs("div", {
+				className: ActivityFeed_module_default.group,
+				children: [groupByDay ? /* @__PURE__ */ jsx(H, {
+					id: headingId,
+					className: ActivityFeed_module_default.heading,
+					children: group.label
+				}) : null, /* @__PURE__ */ jsx("ul", {
+					className: ActivityFeed_module_default.list,
+					"aria-labelledby": groupByDay ? headingId : void 0,
+					"aria-label": groupByDay ? void 0 : label,
+					children: group.items.map((item) => /* @__PURE__ */ jsxs("li", {
+						className: ActivityFeed_module_default.item,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: ActivityFeed_module_default.media,
+							"aria-hidden": "true",
+							children: item.actor ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Avatar, {
+								name: item.actor.name,
+								src: item.actor.avatarSrc,
+								size: "sm",
+								isDecorative: true
+							}), item.icon ? /* @__PURE__ */ jsx("span", {
+								className: ActivityFeed_module_default.badge,
+								"data-tone": item.tone ?? "neutral",
+								children: item.icon
+							}) : null] }) : /* @__PURE__ */ jsx("span", {
+								className: ActivityFeed_module_default.iconBox,
+								"data-tone": item.tone ?? "neutral",
+								children: item.icon
+							})
+						}), /* @__PURE__ */ jsxs("div", {
+							className: ActivityFeed_module_default.body,
+							children: [/* @__PURE__ */ jsxs("p", {
+								className: ActivityFeed_module_default.sentence,
+								children: [
+									item.actor ? /* @__PURE__ */ jsxs(Fragment, { children: [item.actor.href ? /* @__PURE__ */ jsx(Link, {
+										href: item.actor.href,
+										className: ActivityFeed_module_default.actorLink,
+										children: item.actor.name
+									}) : /* @__PURE__ */ jsx("span", {
+										className: ActivityFeed_module_default.actor,
+										children: item.actor.name
+									}), " "] }) : null,
+									/* @__PURE__ */ jsx("span", {
+										className: ActivityFeed_module_default.summary,
+										children: item.summary
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: ActivityFeed_module_default.separator,
+										"aria-hidden": "true",
+										children: " · "
+									}),
+									/* @__PURE__ */ jsx(RelativeTime, {
+										value: item.time,
+										now,
+										className: ActivityFeed_module_default.time
+									})
+								]
+							}), item.content ? /* @__PURE__ */ jsx("div", {
+								className: ActivityFeed_module_default.content,
+								"data-quote": typeof item.content === "string" ? "" : void 0,
+								children: item.content
+							}) : null]
+						})]
+					}, item.id))
+				})]
+			}, group.key);
+		}), hasMore ? /* @__PURE__ */ jsx("div", {
+			className: ActivityFeed_module_default.more,
+			children: /* @__PURE__ */ jsx(Button$1, {
+				variant: "secondary",
+				size: "sm",
+				onPress: onLoadMore,
+				isPending: isLoadingMore,
+				children: t.activityFeedLoadMore
+			})
+		}) : null]
+	});
+}
+export { ActivityFeed };

package/dist/components/ActivityFeed/ActivityFeed.module.js

@@ -0,0 +1,23 @@
+import './ActivityFeed.css';
+// src/components/ActivityFeed/ActivityFeed.module.css
+var ActivityFeed_module_default = {
+	"root": "sti-ActivityFeed-root-e8e06",
+	"group": "sti-ActivityFeed-group-86b1e",
+	"heading": "sti-ActivityFeed-heading-7e8c0",
+	"list": "sti-ActivityFeed-list-1e7eb",
+	"item": "sti-ActivityFeed-item-9c2a7",
+	"media": "sti-ActivityFeed-media-e2c98",
+	"iconBox": "sti-ActivityFeed-iconBox-eeda6",
+	"badge": "sti-ActivityFeed-badge-000df",
+	"body": "sti-ActivityFeed-body-3a782",
+	"sentence": "sti-ActivityFeed-sentence-6a36f",
+	"actor": "sti-ActivityFeed-actor-1a238",
+	"actorLink": "sti-ActivityFeed-actorLink-207a4",
+	"summary": "sti-ActivityFeed-summary-ce85a",
+	"separator": "sti-ActivityFeed-separator-eadaf",
+	"time": "sti-ActivityFeed-time-cd0c5",
+	"content": "sti-ActivityFeed-content-cf38a",
+	"more": "sti-ActivityFeed-more-0993b",
+	"empty": "sti-ActivityFeed-empty-65d74"
+};
+export { ActivityFeed_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ActivityActor, ActivityFeed, ActivityFeedProps, ActivityItem, ActivityTone } from "./ActivityFeed.js";
+export { ActivityActor, ActivityFeed, ActivityFeedProps, ActivityItem, ActivityTone };

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,11 +1,11 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
+import { Button } from "../Button/Button.js";
 import { TextField } from "../TextField/TextField.js";
 import { AlertTriangleIcon } from "../../icons/generated/AlertTriangleIcon.js";
 import { InfoIcon } from "../../icons/generated/InfoIcon.js";
 import { OverlayFrame } from "../_internal/overlay/OverlayFrame.js";
-import { Button } from "../Button/Button.js";
 import AlertDialog_module_default from "./AlertDialog.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";

package/dist/components/AppHeader/AppHeader.css

@@ -1,6 +1,6 @@
 @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
 @layer sti.components {
-  .sti-AppHeader-root-ba1f4 {
+  .sti-AppHeader-root-cf378 {
     box-sizing: border-box;
     border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
     background: var(--sti-bg-surface);
@@ -10,7 +10,7 @@
     container-type: inline-size;
   }
 
-  .sti-AppHeader-bar-ef1c3 {
+  .sti-AppHeader-bar-b6d22 {
     align-items: center;
     gap: var(--sti-space-2) var(--sti-space-3);
     box-sizing: border-box;
@@ -22,7 +22,7 @@
     display: flex;
   }
 
-  .sti-AppHeader-start-58a4a {
+  .sti-AppHeader-start-efa71 {
     align-items: center;
     gap: var(--sti-space-3);
     flex: 0 auto;
@@ -30,13 +30,13 @@
     display: flex;
   }
 
-  .sti-AppHeader-menu-7a8c2 {
+  .sti-AppHeader-menu-ddefa {
     flex: none;
     margin-inline-start: calc(var(--sti-space-2) * -1);
     display: none;
   }
 
-  .sti-AppHeader-brand-ba57b {
+  .sti-AppHeader-brand-3c12b {
     min-inline-size: 0;
     font-weight: var(--sti-font-weight-semibold);
     text-overflow: ellipsis;
@@ -46,7 +46,7 @@
     overflow: clip;
   }
 
-  .sti-AppHeader-context-8ae4d {
+  .sti-AppHeader-context-b5ea8 {
     white-space: nowrap;
     flex: 0 auto;
     align-items: center;
@@ -54,7 +54,7 @@
     display: flex;
   }
 
-  .sti-AppHeader-context-8ae4d:before {
+  .sti-AppHeader-context-b5ea8:before {
     content: "";
     inline-size: var(--sti-border-width);
     block-size: 1.25rem;
@@ -63,14 +63,14 @@
     margin-inline-end: var(--sti-space-3);
   }
 
-  .sti-AppHeader-search-1386d {
+  .sti-AppHeader-search-e1e5e {
     flex: 1 1 0;
     min-inline-size: 12rem;
     max-inline-size: 36rem;
     margin-inline: auto;
   }
 
-  .sti-AppHeader-actions-07179 {
+  .sti-AppHeader-actions-01d27 {
     align-items: center;
     gap: var(--sti-space-1);
     flex: none;
@@ -78,46 +78,46 @@
     display: flex;
   }
 
-  .sti-AppHeader-search-1386d + .sti-AppHeader-actions-07179 {
+  .sti-AppHeader-search-e1e5e + .sti-AppHeader-actions-01d27 {
     margin-inline-start: 0;
   }
 
-  @container (width <= 63.99rem) {
-    .sti-AppHeader-menu-7a8c2 {
+  @container (width <= 47.99rem) {
+    .sti-AppHeader-menu-ddefa {
       display: flex;
     }
   }
 
   @container (width <= 29.99rem) {
-    .sti-AppHeader-root-ba1f4[data-has-nav] .sti-AppHeader-context-8ae4d {
+    .sti-AppHeader-root-cf378[data-has-nav] .sti-AppHeader-context-b5ea8 {
       display: none;
     }
   }
 
   @container (width <= 39.99rem) {
-    .sti-AppHeader-search-1386d {
+    .sti-AppHeader-search-e1e5e {
       flex-basis: 100%;
       order: 1;
       min-inline-size: 0;
       max-inline-size: none;
     }
 
-    .sti-AppHeader-search-1386d + .sti-AppHeader-actions-07179 {
+    .sti-AppHeader-search-e1e5e + .sti-AppHeader-actions-01d27 {
       margin-inline-start: auto;
     }
 
-    .sti-AppHeader-start-58a4a {
+    .sti-AppHeader-start-efa71 {
       gap: var(--sti-space-2);
       flex: 1 1 0;
     }
 
-    .sti-AppHeader-context-8ae4d:before {
+    .sti-AppHeader-context-b5ea8:before {
       margin-inline-end: var(--sti-space-2);
     }
   }
 
   @media (forced-colors: active) {
-    .sti-AppHeader-root-ba1f4 {
+    .sti-AppHeader-root-cf378 {
       border-block-end-color: canvastext;
     }
   }

package/dist/components/AppHeader/AppHeader.d.ts

@@ -13,7 +13,7 @@ export interface AppHeaderProps {
   /** Sonda eylemler: bildirimler, yardım, tema, hesap. Her genişlikte görünür. */
   actions?: ReactNode;
   /**
-   * Dar kapta (64rem altı; AppShell yan gezinmeyi gizlediğinde) menü düğmesinin açtığı çekmecenin
+   * Dar kapta (48rem altı; AppShell yan gezinmeyi gizlediğinde) menü düğmesinin açtığı çekmecenin
    * bölümleri. Verilmezse menü düğmesi çizilmez.
    */
   navSections?: readonly SideNavSection[];

package/dist/components/AppHeader/AppHeader.module.js

@@ -1,13 +1,13 @@
 import './AppHeader.css';
 // src/components/AppHeader/AppHeader.module.css
 var AppHeader_module_default = {
-	"root": "sti-AppHeader-root-ba1f4",
-	"bar": "sti-AppHeader-bar-ef1c3",
-	"start": "sti-AppHeader-start-58a4a",
-	"menu": "sti-AppHeader-menu-7a8c2",
-	"brand": "sti-AppHeader-brand-ba57b",
-	"context": "sti-AppHeader-context-8ae4d",
-	"search": "sti-AppHeader-search-1386d",
-	"actions": "sti-AppHeader-actions-07179"
+	"root": "sti-AppHeader-root-cf378",
+	"bar": "sti-AppHeader-bar-b6d22",
+	"start": "sti-AppHeader-start-efa71",
+	"menu": "sti-AppHeader-menu-ddefa",
+	"brand": "sti-AppHeader-brand-3c12b",
+	"context": "sti-AppHeader-context-b5ea8",
+	"search": "sti-AppHeader-search-e1e5e",
+	"actions": "sti-AppHeader-actions-01d27"
 };
 export { AppHeader_module_default as default };