@stisocial/ui 0.2.0 → 0.3.0

package/dist/components/FilterBar/FilterBar.css

@@ -0,0 +1,58 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-FilterBar-root-e6ed8 {
+    --sti-filter-bar-gap: var(--sti-space-2);
+    align-items: center;
+    gap: var(--sti-filter-bar-gap);
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    flex-wrap: wrap;
+    display: flex;
+    container-type: inline-size;
+  }
+
+  .sti-FilterBar-search-0ff77 {
+    flex: 0 16rem;
+    min-inline-size: 10rem;
+  }
+
+  .sti-FilterBar-trigger-3c501, .sti-FilterBar-triggerActive-fe371 {
+    flex: none;
+    max-inline-size: 100%;
+  }
+
+  .sti-FilterBar-triggerActive-fe371[data-variant][data-size] {
+    --sti-button-bg: var(--sti-bg-accent-subtle);
+    --sti-button-fg: var(--sti-fg-accent-strong);
+    --sti-button-border: var(--sti-border-accent);
+  }
+
+  .sti-FilterBar-clear-06fbb {
+    flex: none;
+  }
+
+  .sti-FilterBar-count-2455f {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    flex: none;
+    margin-inline-start: auto;
+  }
+
+  @container (width <= 32rem) {
+    .sti-FilterBar-search-0ff77 {
+      flex-basis: 100%;
+    }
+
+    .sti-FilterBar-count-2455f {
+      flex-basis: 100%;
+      margin-inline-start: 0;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-FilterBar-triggerActive-fe371[data-variant][data-size] {
+      border-color: highlight;
+    }
+  }
+}

package/dist/components/FilterBar/FilterBar.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+export interface FilterBarOption {
+  id: string;
+  label: string;
+}
+export interface FilterBarFilter {
+  /** Kalıcı anahtar. */
+  id: string;
+  /** Süzgecin adı ("Durum"). */
+  label: string;
+  options: readonly FilterBarOption[];
+  /** Çoklu seçim; varsayılan açık. */
+  multiple?: boolean;
+  /** Düğmenin başındaki süs ikonu. */
+  icon?: ReactNode;
+}
+export type FilterBarValue = Readonly<Record<string, readonly string[]>>;
+export interface FilterBarProps {
+  filters: readonly FilterBarFilter[];
+  /** Denetimli seçim: süzgeç kimliğine göre seçili değerler. */
+  value?: FilterBarValue;
+  defaultValue?: FilterBarValue;
+  onChange?: (value: FilterBarValue) => void;
+  /** Arama alanı. */
+  search?: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    /** Alanın adı; varsayılan "Ara". */
+    label?: string;
+  };
+  /** Sonuç sayısı ("24 sonuç"). */
+  resultCount?: number;
+  /** Bölgenin adı; varsayılan "Süzgeçler". */
+  label?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Süzme çubuğu: arama, her süzgeç için seçili değerleri gösteren açılır menü düğmesi (APG Menu
+ * Button; tek ya da çoklu seçim), sonuç sayısı ve "Tümünü temizle". Etkin süzgeç sayısı canlı
+ * bölgeden duyurulur.
+ */
+export declare function FilterBar({ filters, value, defaultValue, onChange, search, resultCount, label, className, id }: FilterBarProps): import("react").JSX.Element;

package/dist/components/FilterBar/FilterBar.js

@@ -0,0 +1,101 @@
+"use client";
+import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { Button } from "../Button/Button.js";
+import { MenuItem } from "../Menu/Menu.js";
+import { SearchField } from "../SearchField/SearchField.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+import FilterBar_module_default from "./FilterBar.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/components/FilterBar/FilterBar.tsx
+const EMPTY = {};
+/**
+* Süzme çubuğu: arama, her süzgeç için seçili değerleri gösteren açılır menü düğmesi (APG Menu
+* Button; tek ya da çoklu seçim), sonuç sayısı ve "Tümünü temizle". Etkin süzgeç sayısı canlı
+* bölgeden duyurulur.
+*/
+function FilterBar({ filters, value, defaultValue, onChange, search, resultCount, label, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const [internal, setInternal] = useState(defaultValue ?? EMPTY);
+	const current = value ?? internal;
+	const active = filters.filter((flt) => (current[flt.id]?.length ?? 0) > 0).length;
+	const [announcement, setAnnouncement] = useState("");
+	const previous = useRef(active);
+	useEffect(() => {
+		if (previous.current === active) return;
+		setAnnouncement(active > 0 ? template(t.filterPanelActive, { count: active }) : t.filterBarCleared);
+		previous.current = active;
+	}, [
+		active,
+		t.filterPanelActive,
+		t.filterBarCleared
+	]);
+	const change = (next) => {
+		if (value === void 0) setInternal(next);
+		onChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-label": label ?? t.filterPanelTitle,
+		className: [FilterBar_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			search ? /* @__PURE__ */ jsx(SearchField, {
+				label: search.label ?? t.filterBarSearch,
+				hideLabel: true,
+				size: "sm",
+				value: search.value,
+				onChange: search.onChange,
+				placeholder: search.placeholder,
+				className: FilterBar_module_default.search
+			}) : null,
+			filters.map((flt) => {
+				const selected = current[flt.id] ?? [];
+				const names = flt.options.filter((o) => selected.includes(o.id)).map((o) => o.label);
+				const multiple = flt.multiple ?? true;
+				const text = names.length === 0 ? flt.label : `${flt.label}: ${names[0]}${names.length > 1 ? ` +${f.number(names.length - 1)}` : ""}`;
+				return /* @__PURE__ */ jsx(DropdownMenu, {
+					trigger: /* @__PURE__ */ jsxs(Button, {
+						variant: "secondary",
+						size: "sm",
+						iconStart: flt.icon,
+						iconEnd: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+						className: names.length > 0 ? FilterBar_module_default.triggerActive : FilterBar_module_default.trigger,
+						children: [text, names.length > 0 ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [", ", template(t.filterBarSelected, { count: names.length })] }) : null]
+					}),
+					selectionMode: multiple ? "multiple" : "single",
+					selectedKeys: selected,
+					shouldCloseOnSelect: !multiple,
+					onSelectionChange: (keys) => change({
+						...current,
+						[flt.id]: [...keys]
+					}),
+					children: flt.options.map((o) => /* @__PURE__ */ jsx(MenuItem, {
+						id: o.id,
+						children: o.label
+					}, o.id))
+				}, flt.id);
+			}),
+			active > 0 ? /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onPress: () => change(EMPTY),
+				className: FilterBar_module_default.clear,
+				children: t.filterPanelClear
+			}) : null,
+			resultCount !== void 0 ? /* @__PURE__ */ jsx("output", {
+				"aria-live": "polite",
+				className: FilterBar_module_default.count,
+				children: template(t.filterBarResults, { count: resultCount })
+			}) : null,
+			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("output", {
+				"aria-live": "polite",
+				children: announcement
+			}) })
+		]
+	});
+}
+export { FilterBar };

package/dist/components/FilterBar/FilterBar.module.js

@@ -0,0 +1,11 @@
+import './FilterBar.css';
+// src/components/FilterBar/FilterBar.module.css
+var FilterBar_module_default = {
+	"root": "sti-FilterBar-root-e6ed8",
+	"search": "sti-FilterBar-search-0ff77",
+	"trigger": "sti-FilterBar-trigger-3c501",
+	"triggerActive": "sti-FilterBar-triggerActive-fe371",
+	"clear": "sti-FilterBar-clear-06fbb",
+	"count": "sti-FilterBar-count-2455f"
+};
+export { FilterBar_module_default as default };

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

@@ -0,0 +1,2 @@
+import { FilterBar, FilterBarFilter, FilterBarOption, FilterBarProps, FilterBarValue } from "./FilterBar.js";
+export { FilterBar, FilterBarFilter, FilterBarOption, FilterBarProps, FilterBarValue };

package/dist/components/Gantt/Gantt.css

@@ -0,0 +1,317 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Gantt-root-b4f18 {
+    --sti-gantt-row-h: calc(var(--sti-row-h) + var(--sti-space-1));
+    --sti-gantt-name-w: 14rem;
+    gap: var(--sti-space-3);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    display: grid;
+    container: sti-gantt / inline-size;
+  }
+
+  .sti-Gantt-toolbar-b6c91 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-Gantt-scroller-d2a40 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-surface);
+    overscroll-behavior-x: contain;
+    outline: none;
+    min-inline-size: 0;
+    overflow-x: auto;
+  }
+
+  .sti-Gantt-scroller-d2a40:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-Gantt-canvas-58fd1 {
+    --sti-gantt-day: 14px;
+    --sti-gantt-days: 60;
+    inline-size: max-content;
+    min-inline-size: 100%;
+    position: relative;
+  }
+
+  .sti-Gantt-table-ea530 {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .sti-Gantt-nameHead-ceae6, .sti-Gantt-dataHead-9fceb, .sti-Gantt-scaleHead-46d32 {
+    padding: var(--sti-space-1) var(--sti-space-3);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: var(--sti-tracking-label);
+    text-align: start;
+    white-space: nowrap;
+  }
+
+  .sti-Gantt-dataHead-9fceb[data-numeric], .sti-Gantt-data-0925c[data-numeric] {
+    text-align: end;
+  }
+
+  .sti-Gantt-nameHead-ceae6, .sti-Gantt-name-c6495 {
+    z-index: 2;
+    inline-size: var(--sti-gantt-name-w);
+    min-inline-size: var(--sti-gantt-name-w);
+    max-inline-size: var(--sti-gantt-name-w);
+    border-inline-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    position: sticky;
+    inset-inline-start: 0;
+  }
+
+  .sti-Gantt-name-c6495 {
+    padding: 0 var(--sti-space-3);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-surface);
+    font-weight: var(--sti-font-weight-medium);
+    text-align: start;
+  }
+
+  .sti-Gantt-name-c6495[data-level="1"] {
+    font-weight: var(--sti-font-weight-regular);
+    padding-inline-start: calc(var(--sti-space-3) + var(--sti-space-5));
+  }
+
+  .sti-Gantt-nameText-c9ae6 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    overflow: hidden;
+  }
+
+  .sti-Gantt-data-0925c {
+    padding: 0 var(--sti-space-3);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    color: var(--sti-fg-muted);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .sti-Gantt-row-46e5a > * {
+    block-size: var(--sti-gantt-row-h);
+  }
+
+  .sti-Gantt-row-46e5a:last-child > * {
+    border-block-end: 0;
+  }
+
+  @media (hover: hover) {
+    .sti-Gantt-row-46e5a:hover > :is(.sti-Gantt-name-c6495, .sti-Gantt-data-0925c, .sti-Gantt-track-b89e1) {
+      background-color: var(--sti-bg-surface-hover);
+    }
+  }
+
+  @container sti-gantt (width <= 40rem) {
+    .sti-Gantt-scroller-d2a40 {
+      --sti-gantt-name-w: 8.5rem;
+    }
+  }
+
+  .sti-Gantt-scaleHead-46d32, .sti-Gantt-track-b89e1 {
+    inline-size: calc(var(--sti-gantt-day) * var(--sti-gantt-days));
+    min-inline-size: calc(var(--sti-gantt-day) * var(--sti-gantt-days));
+    padding: 0;
+    position: relative;
+  }
+
+  .sti-Gantt-scaleHead-46d32 {
+    block-size: var(--sti-space-6);
+  }
+
+  .sti-Gantt-ticks-483e6 {
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-Gantt-monthTick-1b166, .sti-Gantt-minorTick-b2cc1 {
+    inline-size: calc(var(--sti-gantt-span) * var(--sti-gantt-day));
+    padding-inline: var(--sti-space-2);
+    border-inline-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    visibility: hidden;
+    align-items: center;
+    display: flex;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--sti-gantt-offset) * var(--sti-gantt-day));
+    overflow: hidden;
+  }
+
+  .sti-Gantt-minorTick-b2cc1 {
+    font-weight: var(--sti-font-weight-regular);
+    letter-spacing: 0;
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  .sti-Gantt-root-b4f18[data-scale="week"] .sti-Gantt-minorTick-b2cc1 {
+    padding-inline: var(--sti-space-1);
+    justify-content: flex-start;
+  }
+
+  .sti-Gantt-minorTick-b2cc1[data-weekend] {
+    background: var(--sti-bg-surface-hover);
+  }
+
+  .sti-Gantt-minorTick-b2cc1[data-today] {
+    color: var(--sti-fg-accent);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  :is(.sti-Gantt-monthTick-1b166, .sti-Gantt-minorTick-b2cc1, .sti-Gantt-bar-5d10a, .sti-Gantt-milestone-0c0e0, .sti-Gantt-milestoneLabel-d020c, .sti-Gantt-todayLine-b1ff4)[data-placed] {
+    visibility: visible;
+  }
+
+  .sti-Gantt-track-b89e1 {
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-Gantt-bar-5d10a {
+    --sti-gantt-tone: var(--sti-fill-accent);
+    --sti-gantt-tone-bg: var(--sti-bg-accent-subtle);
+    inline-size: calc(var(--sti-gantt-span) * var(--sti-gantt-day) - 2px);
+    border: var(--sti-border-width) solid var(--sti-gantt-tone);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-gantt-tone-bg);
+    visibility: hidden;
+    position: absolute;
+    inset-block: 25%;
+    inset-inline-start: calc(var(--sti-gantt-offset) * var(--sti-gantt-day) + 1px);
+    overflow: hidden;
+  }
+
+  .sti-Gantt-progress-94971 {
+    inline-size: calc(var(--sti-gantt-progress) * 100%);
+    background: var(--sti-gantt-tone);
+    block-size: 100%;
+    display: block;
+  }
+
+  :is(.sti-Gantt-bar-5d10a, .sti-Gantt-milestone-0c0e0)[data-tone="success"] {
+    --sti-gantt-tone: var(--sti-fg-success);
+    --sti-gantt-tone-bg: var(--sti-bg-success-subtle);
+  }
+
+  :is(.sti-Gantt-bar-5d10a, .sti-Gantt-milestone-0c0e0)[data-tone="warning"] {
+    --sti-gantt-tone: var(--sti-fg-warning);
+    --sti-gantt-tone-bg: var(--sti-bg-warning-subtle);
+  }
+
+  :is(.sti-Gantt-bar-5d10a, .sti-Gantt-milestone-0c0e0)[data-tone="danger"] {
+    --sti-gantt-tone: var(--sti-fg-danger);
+    --sti-gantt-tone-bg: var(--sti-bg-danger-subtle);
+  }
+
+  :is(.sti-Gantt-bar-5d10a, .sti-Gantt-milestone-0c0e0)[data-tone="info"] {
+    --sti-gantt-tone: var(--sti-fg-info);
+    --sti-gantt-tone-bg: var(--sti-bg-info-subtle);
+  }
+
+  :is(.sti-Gantt-bar-5d10a, .sti-Gantt-milestone-0c0e0)[data-tone="neutral"] {
+    --sti-gantt-tone: var(--sti-border-strong);
+    --sti-gantt-tone-bg: var(--sti-bg-surface-hover);
+  }
+
+  .sti-Gantt-milestone-0c0e0 {
+    --sti-gantt-tone: var(--sti-fill-accent);
+    border: var(--sti-border-width) solid var(--sti-fg-accent);
+    background: var(--sti-gantt-tone);
+    visibility: hidden;
+    block-size: 12px;
+    inline-size: 12px;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: calc((var(--sti-gantt-offset) + .5) * var(--sti-gantt-day));
+    translate: -50% -50%;
+    rotate: 45deg;
+  }
+
+  .sti-Gantt-milestoneLabel-d020c {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    white-space: nowrap;
+    visibility: hidden;
+    align-items: center;
+    display: flex;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--sti-gantt-offset) * var(--sti-gantt-day) + var(--sti-space-2));
+  }
+
+  .sti-Gantt-todayLine-b1ff4 {
+    background: color-mix(in oklab, var(--sti-fg-danger) 70%, transparent);
+    visibility: hidden;
+    inline-size: 2px;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc((var(--sti-gantt-offset) + .5) * var(--sti-gantt-day));
+  }
+
+  .sti-Gantt-links-de76a {
+    z-index: 1;
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    overflow: visible;
+  }
+
+  .sti-Gantt-link-84067 {
+    fill: none;
+    stroke: var(--sti-fg-muted);
+    stroke-width: 1.5px;
+  }
+
+  .sti-Gantt-arrowHead-975b1 {
+    fill: var(--sti-fg-muted);
+  }
+
+  .sti-Gantt-srOnly-f0f0a {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (forced-colors: active) {
+    .sti-Gantt-scroller-d2a40, .sti-Gantt-bar-5d10a {
+      border-color: canvastext;
+    }
+
+    .sti-Gantt-progress-94971, .sti-Gantt-milestone-0c0e0 {
+      forced-color-adjust: none;
+      background: highlight;
+    }
+
+    .sti-Gantt-link-84067, .sti-Gantt-arrowHead-975b1 {
+      stroke: canvastext;
+      fill: canvastext;
+    }
+
+    .sti-Gantt-link-84067 {
+      fill: none;
+    }
+
+    .sti-Gantt-todayLine-b1ff4 {
+      background: mark;
+    }
+  }
+}

package/dist/components/Gantt/Gantt.d.ts

@@ -0,0 +1,38 @@
+import { GanttScale } from "./ganttMath.js";
+export interface GanttTask {
+  id: string;
+  /** İşin adı (düz metin). */
+  title: string;
+  /** "2026-11-02" */
+  start: string;
+  /** "2026-11-06" (dahil). */
+  end: string;
+  /** 0–1 arası tamamlanma. */
+  progress?: number;
+  /** Önce bitmesi gereken işler. */
+  dependsOn?: readonly string[];
+  /** Tek günlük kilometre taşı (elmas). */
+  milestone?: boolean;
+  /** Girinti düzeyi (0 ana iş, 1 alt iş). */
+  level?: 0 | 1;
+  tone?: "accent" | "success" | "warning" | "danger" | "info" | "neutral";
+}
+export interface GanttProps {
+  /** Çizelgenin adı (zorunlu). */
+  label: string;
+  tasks: readonly GanttTask[];
+  scale?: GanttScale;
+  defaultScale?: GanttScale;
+  onScaleChange?: (scale: GanttScale) => void;
+  /** "Bugün" ("2026-11-14"); verilmezse ilk çizimdeki gün (saat diliminde). */
+  today?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Gantt çizelgesi: solda görev, başlangıç, bitiş ve ilerleme (gerçek tablo; ekran okuyucu bütün
+ * veriyi okur), sağda zaman çizelgesi: ay ve gün/hafta başlıkları, ilerlemeli çubuklar, kilometre
+ * taşları, bağımlılık okları ve bugün çizgisi. Ölçek gün, hafta ya da ay. Konumlar istemcide
+ * CSSOM ve SVG ile çizilir (satır içi stil yok); görev adı sütunu yatay kaydırmada sabit kalır.
+ */
+export declare function Gantt({ label, tasks, scale: scaleProp, defaultScale, onScaleChange, today: todayProp, className, id }: GanttProps): import("react").JSX.Element;