@urbicon-ui/blocks 6.1.4

package/dist/components/Planner/planner.types.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Public + internal types for the Planner component (date-grid layer 2b).
+ *
+ * Planner buckets a generic `T[]` by calendar day and renders each day through
+ * a consumer `cell` snippet. These types describe the snippet contexts the
+ * consumer receives and the internal Svelte context `PlannerHeader` reads.
+ */
+/** Cell-based views Planner lays out. (`day`/`agenda`/`year` stay Calendar's.) */
+export type PlannerView = 'week' | 'month' | 'range';
+/** An inclusive start/end date pair — the visible window of the current view. */
+export interface PlannerRange {
+    start: Date;
+    end: Date;
+}
+/**
+ * The value the `cell` snippet receives per day — the heart of the API. `items`
+ * carries the bucketed, sorted domain objects with their real `T` type (no
+ * `CalendarEvent` cast).
+ */
+export interface PlannerCellContext<T> {
+    /** The cell's date (local midnight). */
+    date: Date;
+    /** `YYYY-MM-DD` local key for this date — the same key items were bucketed on. */
+    isoDate: string;
+    /** Items falling on this day, bucketed and sorted (the consumer's `T`). */
+    items: T[];
+    /** Whether this date is today. */
+    isToday: boolean;
+    /** Whether this date is the active selected day (`selectedDate`). */
+    isSelected: boolean;
+    /** Whether this date is a Saturday or Sunday. */
+    isWeekend: boolean;
+    /** Whether this date spills outside the focused month / requested range. */
+    isOutsideRange: boolean;
+    /** ISO 8601 week number of this date. */
+    weekNumber: number;
+    /** Localized short weekday name (e.g. "Mo") — handy for stacked layouts. */
+    weekday: string;
+    /** Make this day the active selection (fires `onDateSelect`). */
+    selectDate: () => void;
+}
+/** Per-column / per-day context for the weekday header snippet. */
+export interface PlannerDayContext {
+    /** The concrete date in single-week (`week`) view; `undefined` in month/range
+     * where a column spans many dates. */
+    date?: Date;
+    /** `YYYY-MM-DD` local key, present only when `date` is. */
+    isoDate?: string;
+    /** Localized short weekday name (e.g. "Mo"). */
+    weekday: string;
+    /** Whether the column's concrete date is today (always false in month/range). */
+    isToday: boolean;
+    /** Whether this is a weekend column. */
+    isWeekend: boolean;
+    /** ISO week number of the column's date, when it has one. */
+    weekNumber?: number;
+}
+/** Context for the `header` snippet — everything to build a custom toolbar. */
+export interface PlannerHeaderContext {
+    /** Localized title for the current view (e.g. "KW 25 · 15.–21. Juni"). */
+    title: string;
+    /** First visible date of the view. */
+    rangeStart: Date;
+    /** Last visible date of the view. */
+    rangeEnd: Date;
+    /** ISO week number of the reference date. */
+    weekNumber: number;
+    /** The active view. */
+    view: PlannerView;
+    /** Step the view by `delta` periods (− back, + forward). */
+    navigate: (delta: number) => void;
+    /** Jump to the period containing today. */
+    goToToday: () => void;
+    /** Jump to the period containing `date`. */
+    goTo: (date: Date) => void;
+    /** Whether back-navigation is within bounds. */
+    canGoBack: boolean;
+    /** Whether forward-navigation is within bounds. */
+    canGoForward: boolean;
+}
+/** Every styleable slot Planner exposes through `slotClasses`. */
+export type PlannerSlotName = 'base' | 'header' | 'headerTitle' | 'nav' | 'navButton' | 'grid' | 'weekdayHeader' | 'weekday' | 'weekNumber' | 'week' | 'cell' | 'cellHeader' | 'cellWeekday' | 'cellDate' | 'cellItems' | 'empty';
+/**
+ * The reactive surface Planner shares with `PlannerHeader` (and future
+ * sub-components) through context. Mechanics come from the `DateGridController`;
+ * the `slot` helper resolves a slot's classes against `unstyled` + `slotClasses`.
+ */
+export interface PlannerContext {
+    readonly view: PlannerView;
+    readonly title: string;
+    readonly rangeStart: Date;
+    readonly rangeEnd: Date;
+    readonly weekNumber: number;
+    readonly canGoBack: boolean;
+    readonly canGoForward: boolean;
+    readonly locale: string;
+    readonly disabled: boolean;
+    navigate(delta: number): void;
+    goToToday(): void;
+    goTo(date: Date): void;
+    /** Resolve a slot's class string (honours `unstyled` + merged `slotClasses`). */
+    slot(name: PlannerSlotName, extra?: string): string;
+}

package/dist/components/Planner/planner.types.js

@@ -0,0 +1,8 @@
+/**
+ * Public + internal types for the Planner component (date-grid layer 2b).
+ *
+ * Planner buckets a generic `T[]` by calendar day and renders each day through
+ * a consumer `cell` snippet. These types describe the snippet contexts the
+ * consumer receives and the internal Svelte context `PlannerHeader` reads.
+ */
+export {};

package/dist/components/Planner/planner.variants.d.ts

@@ -0,0 +1,201 @@
+import { type VariantProps } from '../../utils/variants';
+/**
+ * Planner styling — the visible chrome layered over the headless `DateGridScaffold`.
+ *
+ * Slots cover the toolbar, the weekday header, week rows and the day cell. Cell
+ * *state* (today / selected / weekend / outside-range) is applied as conditional
+ * classes in the markup rather than as boolean variants, to keep the variant
+ * matrix to the three axes that actually change layout: `view`, `variant`, `size`.
+ */
+export declare const plannerVariants: (props?: import("../../utils/variants").TVProps<{
+    view: {
+        week: {
+            cell: string;
+            weekday: string;
+        };
+        month: {
+            cell: string;
+            weekday: string;
+        };
+        range: {
+            cell: string;
+            weekday: string;
+        };
+    };
+    variant: {
+        default: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        ghost: {
+            cell: string;
+        };
+    };
+    size: {
+        sm: {
+            header: string;
+            headerTitle: string;
+            navButton: string;
+            weekday: string;
+            weekNumber: string;
+            cellDate: string;
+            cellWeekday: string;
+            cellItems: string;
+            empty: string;
+        };
+        md: {
+            header: string;
+            headerTitle: string;
+            navButton: string;
+            weekday: string;
+            weekNumber: string;
+            cellDate: string;
+            cellWeekday: string;
+            cellItems: string;
+            empty: string;
+        };
+        lg: {
+            header: string;
+            headerTitle: string;
+            navButton: string;
+            weekday: string;
+            weekNumber: string;
+            cellDate: string;
+            cellWeekday: string;
+            cellItems: string;
+            empty: string;
+        };
+    };
+}> | undefined) => {
+    base: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    header: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    headerTitle: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    nav: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    navButton: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    grid: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    weekdayHeader: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    weekday: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    weekNumber: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    week: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    cell: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    cellHeader: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    cellWeekday: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    cellDate: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    cellItems: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    empty: (props?: ({
+        view?: "month" | "week" | "range" | undefined;
+        variant?: "default" | "bordered" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type PlannerVariants = VariantProps<typeof plannerVariants>;

package/dist/components/Planner/planner.variants.js

@@ -0,0 +1,105 @@
+import { tv } from '../../utils/variants';
+/**
+ * Planner styling — the visible chrome layered over the headless `DateGridScaffold`.
+ *
+ * Slots cover the toolbar, the weekday header, week rows and the day cell. Cell
+ * *state* (today / selected / weekend / outside-range) is applied as conditional
+ * classes in the markup rather than as boolean variants, to keep the variant
+ * matrix to the three axes that actually change layout: `view`, `variant`, `size`.
+ */
+export const plannerVariants = tv({
+    slots: {
+        base: 'w-full flex flex-col',
+        // Header / toolbar
+        header: ['flex items-center justify-between gap-2', 'border-b border-border-hairline'],
+        headerTitle: 'font-semibold text-text-primary select-none tabular-nums',
+        nav: 'flex items-center gap-1',
+        navButton: [
+            'inline-flex items-center justify-center rounded-md',
+            'text-text-secondary hover:bg-surface-hover hover:text-text-primary',
+            'transition-colors duration-[var(--blocks-duration-fast)]',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+        ],
+        // Grid scaffolding
+        grid: 'w-full',
+        weekdayHeader: '',
+        weekday: 'text-center font-medium text-text-tertiary select-none truncate',
+        weekNumber: 'flex items-center justify-center text-text-quaternary select-none tabular-nums italic',
+        // Day cell
+        week: '',
+        cell: [
+            'group/cell relative flex flex-col gap-1 text-left align-top',
+            'border-border-hairline',
+            'transition-colors duration-[var(--blocks-duration-fast)]'
+        ],
+        cellHeader: 'flex items-baseline justify-between gap-1',
+        cellWeekday: 'text-text-tertiary font-medium select-none',
+        cellDate: 'inline-flex items-center justify-center font-medium tabular-nums leading-none select-none',
+        cellItems: 'flex flex-col gap-1 min-w-0',
+        empty: 'text-text-quaternary select-none'
+    },
+    variants: {
+        view: {
+            week: {
+                // 7 card columns on desktop; Planner stacks them on mobile via scaffold classes.
+                cell: 'min-h-32 p-2 border border-border-subtle rounded-lg h-full',
+                weekday: 'pb-2'
+            },
+            month: {
+                // Continuous grid: shared borders, no gap.
+                cell: 'min-h-24 p-1.5 border-t border-l h-full',
+                weekday: 'pb-2'
+            },
+            range: {
+                cell: 'min-h-24 p-1.5 border-t border-l h-full',
+                weekday: 'pb-2'
+            }
+        },
+        variant: {
+            default: { base: '' },
+            bordered: { base: 'border border-border-subtle rounded-xl p-3' },
+            ghost: { cell: 'border-transparent' }
+        },
+        size: {
+            sm: {
+                header: 'py-2',
+                headerTitle: 'text-sm',
+                navButton: 'h-7 w-7',
+                weekday: 'text-xs',
+                weekNumber: 'text-[0.65rem]',
+                cellDate: 'text-xs h-5 min-w-5',
+                cellWeekday: 'text-xs',
+                cellItems: 'text-xs',
+                empty: 'text-xs'
+            },
+            md: {
+                header: 'py-3',
+                headerTitle: 'text-base',
+                navButton: 'h-8 w-8',
+                weekday: 'text-sm',
+                weekNumber: 'text-xs',
+                cellDate: 'text-sm h-6 min-w-6',
+                cellWeekday: 'text-xs',
+                cellItems: 'text-sm',
+                empty: 'text-sm'
+            },
+            lg: {
+                header: 'py-4',
+                headerTitle: 'text-lg',
+                navButton: 'h-9 w-9',
+                weekday: 'text-base',
+                weekNumber: 'text-sm',
+                cellDate: 'text-base h-7 min-w-7',
+                cellWeekday: 'text-sm',
+                cellItems: 'text-base',
+                empty: 'text-base'
+            }
+        }
+    },
+    defaultVariants: {
+        view: 'week',
+        variant: 'default',
+        size: 'md'
+    }
+});