@nomideusz/svelte-calendar 0.1.0

package/dist/primitives/TimeGutter.svelte

@@ -0,0 +1,105 @@
+<!--
+  TimeGutter — shared hour labels / tick marks.
+
+  Two orientations:
+    "horizontal" — ticks along a horizontal track (for DayTimeline style)
+    "vertical"   — label column along a vertical grid (for WeekTimeline style)
+-->
+<script lang="ts">
+	import { HOURS } from '../core/time.js';
+	import { fmtH } from '../core/locale.js';
+
+	interface Props {
+		orientation?: 'horizontal' | 'vertical';
+		/** Pixel size per hour (width for horizontal, height for vertical) */
+		hourSize?: number;
+		/** Show half-hour ticks (horizontal only) */
+		halfHour?: boolean;
+		/** Hours to display (default 0-23) */
+		hours?: readonly number[];
+		/** Custom hour formatter */
+		formatHour?: (h: number) => string;
+	}
+
+	let {
+		orientation = 'horizontal',
+		hourSize = 120,
+		halfHour = true,
+		hours = HOURS,
+		formatHour = fmtH,
+	}: Props = $props();
+</script>
+
+{#if orientation === 'horizontal'}
+	<div class="tg tg-h" style="--tg-hour: {hourSize}px">
+		{#each hours as h}
+			<div class="tg-tick" style="left: {h * hourSize}px">
+				<span class="tg-label">{formatHour(h)}</span>
+			</div>
+			{#if halfHour}
+				<div class="tg-tick tg-tick-half" style="left: {(h + 0.5) * hourSize}px"></div>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<div class="tg tg-v" style="--tg-hour: {hourSize}px">
+		{#each hours as h}
+			<div class="tg-row" style="top: {h * hourSize}px; height: {hourSize}px">
+				<span class="tg-label">{formatHour(h)}</span>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.tg {
+		position: relative;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	/* ── Horizontal ── */
+	.tg-h {
+		height: 100%;
+		width: calc(24 * var(--tg-hour));
+	}
+	.tg-tick {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 0;
+		border-left: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+	}
+	.tg-tick-half {
+		border-left-style: dashed;
+		opacity: 0.4;
+	}
+	.tg-h .tg-label {
+		position: absolute;
+		top: 4px;
+		left: 6px;
+		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		white-space: nowrap;
+	}
+
+	/* ── Vertical ── */
+	.tg-v {
+		width: 48px;
+		flex-shrink: 0;
+	}
+	.tg-row {
+		position: absolute;
+		left: 0;
+		right: 0;
+		display: flex;
+		align-items: flex-start;
+		justify-content: flex-end;
+		padding: 2px 8px 0 0;
+		border-top: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
+	}
+	.tg-v .tg-label {
+		font: 400 9px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
+		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+	}
+</style>

package/dist/primitives/TimeGutter.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    /** Pixel size per hour (width for horizontal, height for vertical) */
+    hourSize?: number;
+    /** Show half-hour ticks (horizontal only) */
+    halfHour?: boolean;
+    /** Hours to display (default 0-23) */
+    hours?: readonly number[];
+    /** Custom hour formatter */
+    formatHour?: (h: number) => string;
+}
+declare const TimeGutter: import("svelte").Component<Props, {}, "">;
+type TimeGutter = ReturnType<typeof TimeGutter>;
+export default TimeGutter;

package/dist/primitives/index.d.ts

@@ -0,0 +1,5 @@
+export { default as NowIndicator } from './NowIndicator.svelte';
+export { default as EventBlock } from './EventBlock.svelte';
+export { default as TimeGutter } from './TimeGutter.svelte';
+export { default as DayHeader } from './DayHeader.svelte';
+export { default as EmptySlot } from './EmptySlot.svelte';

package/dist/primitives/index.js

@@ -0,0 +1,6 @@
+// ─── Primitives barrel export ───────────────────────────
+export { default as NowIndicator } from './NowIndicator.svelte';
+export { default as EventBlock } from './EventBlock.svelte';
+export { default as TimeGutter } from './TimeGutter.svelte';
+export { default as DayHeader } from './DayHeader.svelte';
+export { default as EmptySlot } from './EmptySlot.svelte';

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { midnight, parchment, indigo, presets, stageBg, } from './presets.js';
+export type { PresetName } from './presets.js';

package/dist/theme/index.js

@@ -0,0 +1,2 @@
+// ─── Theme barrel export ────────────────────────────────
+export { midnight, parchment, indigo, presets, stageBg, } from './presets.js';

package/dist/theme/presets.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Theme presets for timeline components.
+ *
+ * Each preset is a CSS inline-style string of --dt-* custom properties.
+ * Pass to the `style` prop of any timeline component.
+ */
+/** Midnight Industrial — dark charcoal + red accent, tech monitoring */
+export declare const midnight = "\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.02);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-hm-empty: rgba(80, 80, 120, 0.06);\n\t--dt-hm-low: rgba(239, 68, 68, 0.15);\n\t--dt-hm-mid: rgba(239, 68, 68, 0.3);\n\t--dt-hm-high: rgba(239, 68, 68, 0.5);\n\t--dt-hm-max: rgba(239, 68, 68, 0.72);\n";
+/** Desert Parchment — warm analog planner, burnt sienna on aged paper */
+export declare const parchment = "\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
+/** Soft Indigo — calm productivity, muted lavender with indigo markers */
+export declare const indigo = "\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
+/** All available presets keyed by name */
+export declare const presets: {
+    readonly midnight: "\n\t--dt-bg: #0b0e14;\n\t--dt-surface: #10141c;\n\t--dt-border: rgba(148, 163, 184, 0.07);\n\t--dt-border-day: rgba(148, 163, 184, 0.14);\n\t--dt-text: rgba(226, 232, 240, 0.85);\n\t--dt-text-2: rgba(148, 163, 184, 0.55);\n\t--dt-text-3: rgba(100, 116, 139, 0.55);\n\t--dt-accent: #ef4444;\n\t--dt-accent-dim: rgba(239, 68, 68, 0.18);\n\t--dt-glow: rgba(239, 68, 68, 0.35);\n\t--dt-today-bg: rgba(239, 68, 68, 0.02);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(148, 163, 184, 0.12);\n\t--dt-success: rgba(74, 222, 128, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-hm-empty: rgba(80, 80, 120, 0.06);\n\t--dt-hm-low: rgba(239, 68, 68, 0.15);\n\t--dt-hm-mid: rgba(239, 68, 68, 0.3);\n\t--dt-hm-high: rgba(239, 68, 68, 0.5);\n\t--dt-hm-max: rgba(239, 68, 68, 0.72);\n";
+    readonly parchment: "\n\t--dt-bg: #f0e9dd;\n\t--dt-surface: #e8dfd0;\n\t--dt-border: rgba(139, 110, 70, 0.12);\n\t--dt-border-day: rgba(139, 110, 70, 0.22);\n\t--dt-text: rgba(55, 40, 22, 0.88);\n\t--dt-text-2: rgba(110, 85, 52, 0.62);\n\t--dt-text-3: rgba(139, 110, 70, 0.42);\n\t--dt-accent: #b85c2f;\n\t--dt-accent-dim: rgba(184, 92, 47, 0.14);\n\t--dt-glow: rgba(184, 92, 47, 0.25);\n\t--dt-today-bg: rgba(184, 92, 47, 0.04);\n\t--dt-btn-text: #fdf6ee;\n\t--dt-scrollbar: rgba(139, 110, 70, 0.15);\n\t--dt-success: rgba(76, 153, 76, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-mono: 'Courier New', 'Courier', monospace;\n\t--dt-sans: 'Outfit', Georgia, serif;\n\t--dt-hm-empty: rgba(139, 110, 70, 0.06);\n\t--dt-hm-low: rgba(184, 92, 47, 0.15);\n\t--dt-hm-mid: rgba(184, 92, 47, 0.3);\n\t--dt-hm-high: rgba(184, 92, 47, 0.5);\n\t--dt-hm-max: rgba(184, 92, 47, 0.72);\n";
+    readonly indigo: "\n\t--dt-bg: #f7f6fc;\n\t--dt-surface: #eeedf8;\n\t--dt-border: rgba(99, 102, 241, 0.08);\n\t--dt-border-day: rgba(99, 102, 241, 0.14);\n\t--dt-text: rgba(30, 27, 55, 0.82);\n\t--dt-text-2: rgba(75, 70, 120, 0.55);\n\t--dt-text-3: rgba(99, 102, 241, 0.3);\n\t--dt-accent: #6366f1;\n\t--dt-accent-dim: rgba(99, 102, 241, 0.12);\n\t--dt-glow: rgba(99, 102, 241, 0.25);\n\t--dt-today-bg: rgba(99, 102, 241, 0.03);\n\t--dt-btn-text: #fff;\n\t--dt-scrollbar: rgba(99, 102, 241, 0.1);\n\t--dt-success: rgba(34, 197, 94, 0.7);\n\t--dt-serif: Georgia, 'Times New Roman', serif;\n\t--dt-sans: 'Outfit', system-ui, sans-serif;\n\t--dt-hm-empty: rgba(99, 102, 241, 0.04);\n\t--dt-hm-low: rgba(99, 102, 241, 0.12);\n\t--dt-hm-mid: rgba(99, 102, 241, 0.28);\n\t--dt-hm-high: rgba(99, 102, 241, 0.48);\n\t--dt-hm-max: rgba(99, 102, 241, 0.7);\n";
+};
+export type PresetName = keyof typeof presets;
+/**
+ * Stage background color matching each theme.
+ * Useful for the container behind the timeline component.
+ */
+export declare const stageBg: Record<PresetName, string>;

package/dist/theme/presets.js

@@ -0,0 +1,89 @@
+/**
+ * Theme presets for timeline components.
+ *
+ * Each preset is a CSS inline-style string of --dt-* custom properties.
+ * Pass to the `style` prop of any timeline component.
+ */
+/** Midnight Industrial — dark charcoal + red accent, tech monitoring */
+export const midnight = `
+	--dt-bg: #0b0e14;
+	--dt-surface: #10141c;
+	--dt-border: rgba(148, 163, 184, 0.07);
+	--dt-border-day: rgba(148, 163, 184, 0.14);
+	--dt-text: rgba(226, 232, 240, 0.85);
+	--dt-text-2: rgba(148, 163, 184, 0.55);
+	--dt-text-3: rgba(100, 116, 139, 0.55);
+	--dt-accent: #ef4444;
+	--dt-accent-dim: rgba(239, 68, 68, 0.18);
+	--dt-glow: rgba(239, 68, 68, 0.35);
+	--dt-today-bg: rgba(239, 68, 68, 0.02);
+	--dt-btn-text: #fff;
+	--dt-scrollbar: rgba(148, 163, 184, 0.12);
+	--dt-success: rgba(74, 222, 128, 0.7);
+	--dt-serif: Georgia, 'Times New Roman', serif;
+	--dt-hm-empty: rgba(80, 80, 120, 0.06);
+	--dt-hm-low: rgba(239, 68, 68, 0.15);
+	--dt-hm-mid: rgba(239, 68, 68, 0.3);
+	--dt-hm-high: rgba(239, 68, 68, 0.5);
+	--dt-hm-max: rgba(239, 68, 68, 0.72);
+`;
+/** Desert Parchment — warm analog planner, burnt sienna on aged paper */
+export const parchment = `
+	--dt-bg: #f0e9dd;
+	--dt-surface: #e8dfd0;
+	--dt-border: rgba(139, 110, 70, 0.12);
+	--dt-border-day: rgba(139, 110, 70, 0.22);
+	--dt-text: rgba(55, 40, 22, 0.88);
+	--dt-text-2: rgba(110, 85, 52, 0.62);
+	--dt-text-3: rgba(139, 110, 70, 0.42);
+	--dt-accent: #b85c2f;
+	--dt-accent-dim: rgba(184, 92, 47, 0.14);
+	--dt-glow: rgba(184, 92, 47, 0.25);
+	--dt-today-bg: rgba(184, 92, 47, 0.04);
+	--dt-btn-text: #fdf6ee;
+	--dt-scrollbar: rgba(139, 110, 70, 0.15);
+	--dt-success: rgba(76, 153, 76, 0.7);
+	--dt-serif: Georgia, 'Times New Roman', serif;
+	--dt-mono: 'Courier New', 'Courier', monospace;
+	--dt-sans: 'Outfit', Georgia, serif;
+	--dt-hm-empty: rgba(139, 110, 70, 0.06);
+	--dt-hm-low: rgba(184, 92, 47, 0.15);
+	--dt-hm-mid: rgba(184, 92, 47, 0.3);
+	--dt-hm-high: rgba(184, 92, 47, 0.5);
+	--dt-hm-max: rgba(184, 92, 47, 0.72);
+`;
+/** Soft Indigo — calm productivity, muted lavender with indigo markers */
+export const indigo = `
+	--dt-bg: #f7f6fc;
+	--dt-surface: #eeedf8;
+	--dt-border: rgba(99, 102, 241, 0.08);
+	--dt-border-day: rgba(99, 102, 241, 0.14);
+	--dt-text: rgba(30, 27, 55, 0.82);
+	--dt-text-2: rgba(75, 70, 120, 0.55);
+	--dt-text-3: rgba(99, 102, 241, 0.3);
+	--dt-accent: #6366f1;
+	--dt-accent-dim: rgba(99, 102, 241, 0.12);
+	--dt-glow: rgba(99, 102, 241, 0.25);
+	--dt-today-bg: rgba(99, 102, 241, 0.03);
+	--dt-btn-text: #fff;
+	--dt-scrollbar: rgba(99, 102, 241, 0.1);
+	--dt-success: rgba(34, 197, 94, 0.7);
+	--dt-serif: Georgia, 'Times New Roman', serif;
+	--dt-sans: 'Outfit', system-ui, sans-serif;
+	--dt-hm-empty: rgba(99, 102, 241, 0.04);
+	--dt-hm-low: rgba(99, 102, 241, 0.12);
+	--dt-hm-mid: rgba(99, 102, 241, 0.28);
+	--dt-hm-high: rgba(99, 102, 241, 0.48);
+	--dt-hm-max: rgba(99, 102, 241, 0.7);
+`;
+/** All available presets keyed by name */
+export const presets = { midnight, parchment, indigo };
+/**
+ * Stage background color matching each theme.
+ * Useful for the container behind the timeline component.
+ */
+export const stageBg = {
+    midnight: '#080a0f',
+    parchment: '#e4dace',
+    indigo: '#efedf8',
+};