@stisocial/ui 0.2.1 → 0.3.0

package/dist/components/CalendarView/CalendarView.css

@@ -0,0 +1,525 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-CalendarView-root-b3259 {
+    --sti-cal-hour-h: 3rem;
+    --sti-cal-gutter: 3.5rem;
+    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-calendar / inline-size;
+  }
+
+  .sti-CalendarView-toolbar-afa89 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-CalendarView-nav-3f236 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-CalendarView-title-d22c8 {
+    margin: 0 0 0 var(--sti-space-2);
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+  }
+
+  .sti-CalendarView-arrow-fb07f:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    rotate: 180deg;
+  }
+
+  .sti-CalendarView-month-dbea4 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+    background: var(--sti-bg-surface);
+    inline-size: 100%;
+    overflow: hidden;
+  }
+
+  .sti-CalendarView-weekday-4634b {
+    padding: var(--sti-space-2);
+    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;
+  }
+
+  .sti-CalendarView-day-ceb46 {
+    block-size: 7.5rem;
+    padding: var(--sti-space-1);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    vertical-align: top;
+  }
+
+  .sti-CalendarView-day-ceb46 + .sti-CalendarView-day-ceb46 {
+    border-inline-start: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  tr:last-child > .sti-CalendarView-day-ceb46 {
+    border-block-end: 0;
+  }
+
+  .sti-CalendarView-day-ceb46[data-outside] {
+    background: var(--sti-bg-subtle);
+  }
+
+  .sti-CalendarView-day-ceb46[data-outside] .sti-CalendarView-dayNumber-5f00a {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-CalendarView-dayNumber-5f00a {
+    min-inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-6);
+    padding: 0 var(--sti-space-1);
+    border-radius: var(--sti-radius-pill);
+    color: var(--sti-fg);
+    font: inherit;
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--sti-font-weight-medium);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+    place-items: center;
+    margin-block-end: var(--sti-space-1);
+    display: inline-grid;
+  }
+
+  @media (hover: hover) {
+    .sti-CalendarView-dayNumber-5f00a:hover {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-CalendarView-dayNumber-5f00a[aria-current="date"], .sti-CalendarView-colHead-215ad[data-today] .sti-CalendarView-colNumber-39787 {
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+    box-shadow: inset 0 0 0 var(--sti-border-width) var(--sti-fg-accent);
+  }
+
+  .sti-CalendarView-dayEvents-7c724 {
+    gap: 2px;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-CalendarView-bar-e46b0, .sti-CalendarView-item-69e8b, .sti-CalendarView-block-cf240 {
+    --sti-cal-tone-bg: var(--sti-bg-accent-subtle);
+    --sti-cal-tone-fg: var(--sti-fg-accent-strong);
+    --sti-cal-tone-line: var(--sti-fill-accent);
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    padding: 1px calc(var(--sti-space-1) + 2px);
+    border-radius: var(--sti-radius-sm);
+    color: var(--sti-fg);
+    font: inherit;
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    text-align: start;
+    background: none;
+    border: 0;
+    outline: none;
+    display: flex;
+  }
+
+  :is(.sti-CalendarView-bar-e46b0, .sti-CalendarView-item-69e8b, .sti-CalendarView-block-cf240)[data-tone="success"] {
+    --sti-cal-tone-bg: var(--sti-bg-success-subtle);
+    --sti-cal-tone-fg: var(--sti-fg-success);
+    --sti-cal-tone-line: var(--sti-fg-success);
+  }
+
+  :is(.sti-CalendarView-bar-e46b0, .sti-CalendarView-item-69e8b, .sti-CalendarView-block-cf240)[data-tone="warning"] {
+    --sti-cal-tone-bg: var(--sti-bg-warning-subtle);
+    --sti-cal-tone-fg: var(--sti-fg-warning);
+    --sti-cal-tone-line: var(--sti-fg-warning);
+  }
+
+  :is(.sti-CalendarView-bar-e46b0, .sti-CalendarView-item-69e8b, .sti-CalendarView-block-cf240)[data-tone="danger"] {
+    --sti-cal-tone-bg: var(--sti-bg-danger-subtle);
+    --sti-cal-tone-fg: var(--sti-fg-danger);
+    --sti-cal-tone-line: var(--sti-fg-danger);
+  }
+
+  :is(.sti-CalendarView-bar-e46b0, .sti-CalendarView-item-69e8b, .sti-CalendarView-block-cf240)[data-tone="info"] {
+    --sti-cal-tone-bg: var(--sti-bg-info-subtle);
+    --sti-cal-tone-fg: var(--sti-fg-info);
+    --sti-cal-tone-line: var(--sti-fg-info);
+  }
+
+  :is(.sti-CalendarView-bar-e46b0, .sti-CalendarView-item-69e8b, .sti-CalendarView-block-cf240)[data-tone="neutral"] {
+    --sti-cal-tone-bg: var(--sti-bg-surface-hover);
+    --sti-cal-tone-fg: var(--sti-fg);
+    --sti-cal-tone-line: var(--sti-border-strong);
+  }
+
+  .sti-CalendarView-bar-e46b0 {
+    background: var(--sti-cal-tone-bg);
+    color: var(--sti-cal-tone-fg);
+    font-weight: var(--sti-font-weight-medium);
+    padding-inline-start: calc(var(--sti-space-1) + 5px);
+    position: relative;
+    overflow: hidden;
+  }
+
+  :is(.sti-CalendarView-bar-e46b0, .sti-CalendarView-block-cf240):before {
+    background: var(--sti-cal-tone-line);
+    content: "";
+    inline-size: 3px;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+
+  .sti-CalendarView-item-69e8b:before {
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-cal-tone-line);
+    content: "";
+    flex: none;
+    block-size: 6px;
+    inline-size: 6px;
+  }
+
+  .sti-CalendarView-itemTime-d39f3 {
+    color: var(--sti-fg-muted);
+    font-variant-numeric: tabular-nums;
+    flex: none;
+  }
+
+  .sti-CalendarView-itemTitle-863a6 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  button:is(.sti-CalendarView-bar-e46b0, .sti-CalendarView-item-69e8b, .sti-CalendarView-block-cf240) {
+    cursor: pointer;
+  }
+
+  button:is(.sti-CalendarView-bar-e46b0, .sti-CalendarView-item-69e8b), .sti-CalendarView-more-daf49 {
+    min-block-size: var(--sti-space-6);
+  }
+
+  @media (hover: hover) {
+    button.sti-CalendarView-item-69e8b:hover {
+      background: var(--sti-bg-surface-hover);
+    }
+
+    button:is(.sti-CalendarView-bar-e46b0, .sti-CalendarView-block-cf240):hover {
+      filter: brightness(.97);
+    }
+  }
+
+  :is(.sti-CalendarView-bar-e46b0, .sti-CalendarView-item-69e8b, .sti-CalendarView-block-cf240, .sti-CalendarView-more-daf49, .sti-CalendarView-dayNumber-5f00a, .sti-CalendarView-colHead-215ad):focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: 1px;
+  }
+
+  .sti-CalendarView-more-daf49 {
+    padding: 0 var(--sti-space-1);
+    border-radius: var(--sti-radius-sm);
+    color: var(--sti-fg-muted);
+    font: inherit;
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+    justify-self: start;
+  }
+
+  @media (hover: hover) {
+    .sti-CalendarView-more-daf49:hover {
+      color: var(--sti-fg);
+      text-decoration: underline;
+    }
+  }
+
+  .sti-CalendarView-timeGrid-8c1f5 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-surface);
+    min-inline-size: 0;
+    display: grid;
+    overflow: auto hidden;
+  }
+
+  .sti-CalendarView-timeGrid-8c1f5 > * {
+    min-inline-size: calc(var(--sti-cal-gutter) + var(--sti-cal-days, 7) * 6rem);
+  }
+
+  .sti-CalendarView-timeGrid-8c1f5[data-days="1"] > * {
+    --sti-cal-days: 1;
+  }
+
+  .sti-CalendarView-columnsHead-28695, .sti-CalendarView-allDayRow-0823d {
+    grid-template-columns: var(--sti-cal-gutter) repeat(var(--sti-cal-days, 7), minmax(0, 1fr));
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    display: grid;
+  }
+
+  .sti-CalendarView-timeGrid-8c1f5[data-days="1"] :is(.sti-CalendarView-columnsHead-28695, .sti-CalendarView-allDayRow-0823d, .sti-CalendarView-dayCols-fceef) {
+    --sti-cal-days: 1;
+  }
+
+  .sti-CalendarView-colHead-215ad {
+    justify-items: center;
+    gap: calc(var(--sti-space-1) / 2);
+    padding: var(--sti-space-2) var(--sti-space-1);
+    border: 0;
+    border-inline-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    color: var(--sti-fg-muted);
+    font: inherit;
+    background: none;
+    outline: none;
+    display: grid;
+    position: relative;
+  }
+
+  button.sti-CalendarView-colHead-215ad {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    button.sti-CalendarView-colHead-215ad:hover {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-CalendarView-colWeekday-59379 {
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: var(--sti-tracking-label);
+  }
+
+  .sti-CalendarView-colNumber-39787 {
+    min-inline-size: var(--sti-space-8);
+    block-size: var(--sti-space-8);
+    border-radius: var(--sti-radius-pill);
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-lg);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--sti-font-weight-medium);
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-CalendarView-gutterLabel-f88da {
+    padding: var(--sti-space-1);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    text-align: end;
+    align-self: center;
+  }
+
+  .sti-CalendarView-allDayCell-ae07c {
+    min-inline-size: 0;
+    padding: var(--sti-space-1);
+    border-inline-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    align-content: start;
+    gap: 2px;
+    display: grid;
+  }
+
+  .sti-CalendarView-scroller-341a1 {
+    grid-template-columns: var(--sti-cal-gutter) minmax(0, 1fr);
+    overscroll-behavior: contain;
+    outline: none;
+    max-block-size: 36rem;
+    display: grid;
+    position: relative;
+    overflow-y: auto;
+  }
+
+  .sti-CalendarView-scroller-341a1:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-CalendarView-hour-13930 {
+    block-size: var(--sti-cal-hour-h);
+    position: relative;
+  }
+
+  .sti-CalendarView-hourLabel-3b714 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    position: absolute;
+    inset-block-start: -.5lh;
+    inset-inline-end: var(--sti-space-2);
+  }
+
+  .sti-CalendarView-dayCols-fceef {
+    grid-template-columns: repeat(var(--sti-cal-days, 7), minmax(0, 1fr));
+    block-size: calc(var(--sti-cal-hour-h) * 24);
+    display: grid;
+  }
+
+  .sti-CalendarView-dayCol-84423 {
+    border-inline-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    background-image: linear-gradient(var(--sti-border-subtle) var(--sti-border-width),
+      transparent 0);
+    background-size: 100% var(--sti-cal-hour-h);
+    position: relative;
+  }
+
+  .sti-CalendarView-dayCol-84423[data-today] {
+    background-color: color-mix(in oklab, var(--sti-fill-accent) 4%, transparent);
+  }
+
+  .sti-CalendarView-slot-7c38b {
+    block-size: calc((var(--sti-cal-to) - var(--sti-cal-from)) * var(--sti-cal-hour-h) / 60 - 2px);
+    inline-size: calc(100% / var(--sti-cal-lanes) - 4px);
+    visibility: hidden;
+    position: absolute;
+    inset-block-start: calc(var(--sti-cal-from) * var(--sti-cal-hour-h) / 60);
+    inset-inline-start: calc(100% * var(--sti-cal-lane) / var(--sti-cal-lanes) + 2px);
+  }
+
+  .sti-CalendarView-slot-7c38b[data-placed] {
+    visibility: visible;
+  }
+
+  .sti-CalendarView-block-cf240 {
+    block-size: 100%;
+    inline-size: 100%;
+    padding: 2px calc(var(--sti-space-1) + 2px) 2px calc(var(--sti-space-1) + 5px);
+    background: var(--sti-cal-tone-bg);
+    color: var(--sti-cal-tone-fg);
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-CalendarView-block-cf240 .sti-CalendarView-itemTitle-863a6 {
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-CalendarView-blockTime-980c5 {
+    color: var(--sti-cal-tone-fg);
+    font-variant-numeric: tabular-nums;
+    opacity: .85;
+  }
+
+  .sti-CalendarView-slot-7c38b[data-short] .sti-CalendarView-block-cf240 {
+    gap: var(--sti-space-1);
+    flex-direction: row;
+  }
+
+  .sti-CalendarView-nowLine-bbc52 {
+    z-index: 1;
+    background: var(--sti-fg-danger);
+    visibility: hidden;
+    block-size: 2px;
+    position: absolute;
+    inset-block-start: calc(var(--sti-cal-from) * var(--sti-cal-hour-h) / 60);
+    inset-inline: 0;
+  }
+
+  .sti-CalendarView-nowLine-bbc52[data-placed] {
+    visibility: visible;
+  }
+
+  .sti-CalendarView-nowLine-bbc52:before {
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-fg-danger);
+    content: "";
+    block-size: 8px;
+    inline-size: 8px;
+    position: absolute;
+    inset-block-start: -3px;
+    inset-inline-start: -4px;
+  }
+
+  .sti-CalendarView-srOnly-7c6aa {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .sti-CalendarView-narrowText-c1fa9 {
+    display: none;
+  }
+
+  @container sti-calendar (width <= 36rem) {
+    .sti-CalendarView-day-ceb46 {
+      block-size: 4.5rem;
+    }
+
+    .sti-CalendarView-item-69e8b :is(.sti-CalendarView-itemTitle-863a6, .sti-CalendarView-itemTime-d39f3), .sti-CalendarView-bar-e46b0 .sti-CalendarView-itemTitle-863a6 {
+      clip-path: inset(50%);
+      block-size: 1px;
+      inline-size: 1px;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .sti-CalendarView-bar-e46b0 {
+      background: var(--sti-cal-tone-line);
+      min-block-size: 6px;
+      padding: 0;
+    }
+
+    .sti-CalendarView-wideText-73d35 {
+      display: none;
+    }
+
+    .sti-CalendarView-narrowText-c1fa9 {
+      display: inline;
+    }
+
+    .sti-CalendarView-weekday-4634b {
+      padding-inline: var(--sti-space-1);
+      text-align: center;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-CalendarView-month-dbea4, .sti-CalendarView-timeGrid-8c1f5 {
+      border-color: canvastext;
+    }
+
+    .sti-CalendarView-bar-e46b0, .sti-CalendarView-block-cf240 {
+      border: 1px solid canvastext;
+    }
+
+    .sti-CalendarView-dayNumber-5f00a[aria-current="date"], .sti-CalendarView-colHead-215ad[data-today] .sti-CalendarView-colNumber-39787 {
+      color: highlighttext;
+      forced-color-adjust: none;
+      background: highlight;
+    }
+
+    .sti-CalendarView-nowLine-bbc52, .sti-CalendarView-nowLine-bbc52:before {
+      background: mark;
+    }
+  }
+}

package/dist/components/CalendarView/CalendarView.d.ts

@@ -0,0 +1,43 @@
+export type CalendarTone = "accent" | "success" | "warning" | "danger" | "info" | "neutral";
+export type CalendarViewMode = "month" | "week" | "day";
+export interface CalendarEvent {
+  id: string;
+  /** Etkinliğin adı (düz metin). */
+  title: string;
+  start: Date | string | number;
+  end: Date | string | number;
+  /** Tüm gün (saat gösterilmez; haftada üst şeritte). */
+  allDay?: boolean;
+  tone?: CalendarTone;
+}
+export interface CalendarViewProps {
+  /** Takvimin adı (zorunlu). */
+  label: string;
+  events: readonly CalendarEvent[];
+  view?: CalendarViewMode;
+  defaultView?: CalendarViewMode;
+  onViewChange?: (view: CalendarViewMode) => void;
+  /** Gösterilen gün ("2026-11-14"); ay ve hafta bu günü kapsar. */
+  date?: string;
+  defaultDate?: string;
+  onDateChange?: (day: string) => void;
+  /** Etkinliğe basınca (ayrıntı). Verilmezse etkinlikler düğme değildir. */
+  onEventAction?: (id: string) => void;
+  /** "Bugün" ("2026-11-14"); verilmezse ilk çizimdeki gün (saat diliminde). */
+  today?: string;
+  /** Haftanın ilk günü; verilmezse Türkçede pazartesi, İngilizcede pazar. */
+  weekStartsOn?: 0 | 1;
+  /** Hafta ve gün görünümünde açılışta görünen ilk saat. */
+  scrollToHour?: number;
+  /** Ay görünümünde bir günde gösterilen en çok etkinlik (fazlası "+N daha"). */
+  maxEventsPerDay?: number;
+  className?: string;
+  id?: string;
+}
+/**
+ * Takvim görünümü: ay (haftalık ızgara, gün başına en çok N etkinlik ve "+N daha"), hafta ve gün
+ * (saat ızgarası; çakışan etkinlikler yan yana, tüm gün etkinlikleri üst şeritte, şimdiki zaman
+ * çizgisi). Üstte "Bugün", önceki/sonraki ve görünüm seçimi. Hesap saat dilimindeki sivil tarih
+ * üzerindendir; konumlar CSSOM ile verilir (satır içi stil yok).
+ */
+export declare function CalendarView({ label, events, view: viewProp, defaultView, onViewChange, date: dateProp, defaultDate, onDateChange, onEventAction, today: todayProp, weekStartsOn, scrollToHour, maxEventsPerDay, className, id }: CalendarViewProps): import("react").JSX.Element;