CalendarStrip
Domain-agnostic weekly date strip with previous/next-week navigation and fully data-driven per-day tone, icon, top/bottom label, badge, and indicator. Proposed/under Owner review, GitHub Issues #127/#130.
Proposed component — under Owner review (GitHub Issue #127). Not part of the governed component registry. Reference: D:\NexWell\nexwell-ai-inputs\components.
Demo A — reference-style, week navigation
Week strip with leading media and trailing action
August 2026
SMTWTFS
Demo B — every per-day annotation type on one strip
Tone, icon, top label, bottom label, badge, indicator
August 2026
SMTWTFS
Demo C — consumer-driven interaction, disabled boundary
Selection state + disabled navigation
Boundary example
SMTWTFS
Demo D — RTL and narrow/responsive layout
Right-to-left, 300px container
أغسطس ٢٠٢٦
سجخرثنح
API
Public props
import { CalendarStrip, type CalendarStripDay } from "@nexwellaifactory/components";
const days: CalendarStripDay[] = [
{ date: "2026-08-19", label: "19", isToday: true, tone: "accent", icon: <SunIcon />, topLabel: "Fertile", badge: "!" },
];
<CalendarStrip
title="August 2026"
weekdayLabels={["S","M","T","W","T","F","S"]}
days={days}
onSelectDate={setSelectedDate}
onPreviousWeek={goToPreviousWeek}
onNextWeek={goToNextWeek}
previousDisabled={atEarliestWeek}
nextDisabled={atLatestWeek}
/>