@spatika/react 1.3.0 → 1.4.0

package/src/index.ts

@@ -37,7 +37,9 @@ export {
   layoutToggleClass,
   listRowToggleClass,
   nativeSelectClass,
+  nativeSelectSizeClass,
 } from "./lib/chips";
+export type { NativeSelectSize } from "./lib/chips";
 export {
   duration,
   transition,
@@ -209,7 +211,7 @@ export {
   SelectTrigger,
   SelectValue,
 } from "./primitives/Select";
-export { NativeSelect } from "./primitives/NativeSelect";
+export { NativeSelect, type NativeSelectProps } from "./primitives/NativeSelect";
 export { Spinner } from "./primitives/Spinner";
 export { Alert, AlertTitle, AlertDescription, alertVariants } from "./primitives/Alert";
 export { Kbd } from "./primitives/Kbd";
@@ -500,16 +502,22 @@ export {
 } from "./composites/EventEditor";
 export {
   SchedulerToolbar,
+  SchedulerDateJump,
   SchedulerPreferencesMenu,
   CALENDAR_VIEW_LABEL,
   type SchedulerToolbarProps,
+  type SchedulerToolbarDensity,
+  type SchedulerDateJumpProps,
 } from "./composites/scheduler-ui";
 export {
   DEFAULT_SCHEDULER_PREFERENCES,
   SCHEDULER_COLOR_TONES,
+  CALENDAR_AGENDA_DAYS,
+  calendarVisibleRange,
 } from "./lib/scheduler";
 export type {
   CalendarView,
+  CalendarVisibleRange,
   NormalizedEvent,
   SchedulerColorTone,
   SchedulerEvent,
@@ -548,6 +556,7 @@ export {
   ChartsLegend,
   ChartsToolbar,
   ChartsBrush,
+  ChartsReferenceLine,
   BarPlot,
   LinePlot,
   AreaPlot,
@@ -560,6 +569,14 @@ export type {
   ComposedSeriesType,
   HighlightedItem,
 } from "./composites/chart-composition";
+export type {
+  ChartHover,
+  ChartItemEvent,
+  ChartMarkRenderContext,
+  ChartReferenceLine,
+  ChartTooltipItem,
+  ChartTooltipRenderer,
+} from "./composites/chart-interaction";
 export {
   AreaChart,
   BarChart,

package/src/lib/chips.ts

@@ -56,3 +56,19 @@ export const nativeSelectClass = cn(
   "focus:outline-none focus:border-primary/40 focus:ring-2 focus:ring-primary/20",
   "disabled:cursor-not-allowed disabled:opacity-50",
 );
+
+export type NativeSelectSize = "sm" | "default" | "touch";
+
+/** Size recipes for NativeSelect. `sm` is for toolbars (not full width). */
+export function nativeSelectSizeClass(size: NativeSelectSize = "default") {
+  if (size === "sm") {
+    return cn(
+      nativeSelectClass,
+      "mt-0 h-8 min-h-8 w-auto rounded-full px-2 text-[11px] font-semibold",
+    );
+  }
+  if (size === "touch") {
+    return cn(nativeSelectClass, "mt-0 min-h-11");
+  }
+  return cn(nativeSelectClass, "mt-0");
+}

package/src/lib/scheduler.test.ts

@@ -1,6 +1,8 @@
 import { describe, expect, it } from "vitest";
 import {
   addDays,
+  calendarVisibleRange,
+  CALENDAR_AGENDA_DAYS,
   formatDateRange,
   getMonthGrid,
   getTimelineRange,
@@ -35,6 +37,20 @@ describe("scheduler dates", () => {
     expect(grid[0].getMonth()).toBe(6);
   });
 
+  it("reports the exclusive visible range for month, week, and agenda", () => {
+    const month = calendarVisibleRange("month", new Date(2026, 7, 15), 0);
+    expect(month.start.getDate()).toBe(26);
+    expect(month.start.getMonth()).toBe(6);
+    expect(month.end.getTime()).toBe(addDays(getMonthGrid(new Date(2026, 7, 15), 0)[41], 1).getTime());
+
+    const week = calendarVisibleRange("week", new Date(2026, 7, 15), 0);
+    expect(week.start.getDay()).toBe(0);
+    expect(week.end.getTime() - week.start.getTime()).toBe(7 * 86_400_000);
+
+    const agenda = calendarVisibleRange("agenda", new Date(2026, 7, 3), 0);
+    expect(agenda.end.getTime() - agenda.start.getTime()).toBe(CALENDAR_AGENDA_DAYS * 86_400_000);
+  });
+
   it("returns Sunday-first weekday labels by default", () => {
     const labels = weekdayLabels(0, "en-US");
     expect(labels[0]).toMatch(/^Sun/);

package/src/lib/scheduler.ts

@@ -187,6 +187,40 @@ export function getWeekDays(date: Date, weekStartsOn = 0): Date[] {
   return Array.from({ length: 7 }, (_, i) => addDays(start, i));
 }
 
+/** Inclusive first instant of the agenda window. */
+export const CALENDAR_AGENDA_DAYS = 14;
+
+export type CalendarVisibleRange = {
+  start: Date;
+  /** Exclusive end (start of the day after the last visible day). */
+  end: Date;
+};
+
+/**
+ * Days the calendar actually paints for a view.
+ * Month includes leading/trailing grid days, not just the named month.
+ */
+export function calendarVisibleRange(
+  view: CalendarView,
+  date: Date,
+  weekStartsOn = 0,
+): CalendarVisibleRange {
+  if (view === "month") {
+    const grid = getMonthGrid(date, weekStartsOn);
+    return { start: grid[0], end: addDays(grid[grid.length - 1], 1) };
+  }
+  if (view === "week") {
+    const days = getWeekDays(date, weekStartsOn);
+    return { start: days[0], end: addDays(days[6], 1) };
+  }
+  if (view === "agenda") {
+    const days = agendaDays(date, CALENDAR_AGENDA_DAYS);
+    return { start: days[0], end: addDays(days[days.length - 1], 1) };
+  }
+  const start = startOfDay(date);
+  return { start, end: addDays(start, 1) };
+}
+
 export function weekdayLabels(weekStartsOn = 0, locale?: string): string[] {
   const sunday = new Date(2026, 7, 2);
   return Array.from({ length: 7 }, (_, i) => {

package/src/primitives/NativeSelect.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { NativeSelect } from "./NativeSelect";
+
+describe("NativeSelect", () => {
+  it("renders a full-width form select by default", () => {
+    render(
+      <NativeSelect aria-label="Rows">
+        <option value="10">10</option>
+      </NativeSelect>,
+    );
+    const select = screen.getByLabelText("Rows");
+    expect(select).toHaveAttribute("data-size", "default");
+    expect(select).not.toHaveAttribute("size");
+  });
+
+  it("renders a compact toolbar select without the native size attribute", () => {
+    render(
+      <NativeSelect size="sm" aria-label="Month">
+        <option value="7">AUG</option>
+      </NativeSelect>,
+    );
+    const select = screen.getByLabelText("Month");
+    expect(select).toHaveAttribute("data-size", "sm");
+    expect(select.className).toMatch(/h-8|min-h-8/);
+    expect(select).not.toHaveAttribute("size");
+  });
+});

package/src/primitives/NativeSelect.tsx

@@ -1,16 +1,26 @@
 import * as React from "react";
 import { cn } from "../lib/cn";
-import { nativeSelectClass } from "../lib/chips";
+import { nativeSelectSizeClass, type NativeSelectSize } from "../lib/chips";
+
+export type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  /**
+   * Visual size. `default` stays full-width for forms.
+   * `sm` is a compact pill for toolbars. `touch` is a 44px target.
+   * Omits the native HTML `size` (visible option rows) to avoid the clash.
+   */
+  size?: NativeSelectSize;
+};
 
 /**
  * Styled native `<select>` — prefer compound `Select` for custom menus.
  */
-const NativeSelect = React.forwardRef<HTMLSelectElement, React.ComponentProps<"select">>(
-  ({ className, children, ...props }, ref) => (
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, size = "default", children, ...props }, ref) => (
     <select
       ref={ref}
       data-slot="native-select"
-      className={cn(nativeSelectClass, "mt-0", className)}
+      data-size={size}
+      className={cn(nativeSelectSizeClass(size), className)}
       {...props}
     >
       {children}