@x33025/sveltely 0.0.58 → 0.1.0

package/dist/components/Library/Button/Button.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+		label?: string;
+		icon?: Component<{ class?: string; size?: number | string }>;
+		iconSize?: number | string;
+		iconColor?: string;
+		variant?: 'default' | 'solid' | 'ghost';
+	} & StyleProps & Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
+
+	let {
+		children,
+		label,
+		icon,
+		iconSize,
+		iconColor,
+		variant = 'default',
+		disabled = false,
+		type = 'button',
+		...restProps
+	}: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+
+	const toRem = (value: number | string | undefined) =>
+		value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
+
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'button'));
+	const iconStyle = $derived.by(() => {
+		const declarations: string[] = [];
+		if (iconColor !== undefined) {
+			declarations.push(`color: ${iconColor};`);
+		}
+		if (iconSize !== undefined) {
+			const size = toRem(iconSize);
+			declarations.push(`width: ${size};`, `height: ${size};`);
+		}
+		return declarations.join(' ');
+	});
+	const iconOnly = $derived(!children && !label);
+</script>
+
+<button
+	{type}
+	class="button inline-flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-50 {iconOnly
+		? 'button-icon-only'
+		: ''}"
+	data-variant={variant}
+	style={rootStyle}
+	{disabled}
+	{...props}
+>
+	{#if icon}
+		{@const Icon = icon}
+		<span class="button-icon-frame inline-grid shrink-0 place-items-center" style={iconStyle}>
+			<Icon class="button-icon" />
+		</span>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{:else if label}
+		<span>{label}</span>
+	{/if}
+</button>
+
+<style>
+	.button {
+		--button-font-size: var(--sveltely-font-size);
+		--button-scale: calc(var(--button-font-size) / 1rem);
+		--button-icon-size: calc(var(--button-font-size) * 1.143);
+		border: 1px solid var(--button-border-color, var(--sveltely-border-color));
+		border-radius: var(--button-border-radius, var(--sveltely-border-radius));
+		background: var(--button-background, white);
+		color: var(--button-color, var(--color-zinc-800));
+		gap: var(--button-gap, var(--sveltely-gap));
+		font-size: var(--button-font-size);
+		line-height: 1.25;
+		padding:
+			var(--button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--button-scale)))
+			var(--button-padding-x, calc(var(--sveltely-padding-x) * var(--button-scale)));
+		transition: color 150ms, border-color 150ms, background-color 150ms;
+	}
+
+	.button[data-variant='default']:hover {
+		background: var(--button-hover-background, var(--sveltely-hover-color));
+	}
+
+	.button[data-variant='solid'] {
+		border-color: var(--button-solid-border-color, var(--sveltely-primary-color));
+		background: var(--button-solid-background, var(--sveltely-primary-color));
+		color: var(--button-solid-color, white);
+	}
+
+	.button[data-variant='solid']:hover {
+		background: var(--button-solid-hover-background, var(--sveltely-active-hover-color));
+	}
+
+	.button[data-variant='ghost'] {
+		border-color: transparent;
+		background: transparent;
+	}
+
+	.button[data-variant='ghost']:hover {
+		background: var(--button-ghost-hover-background, var(--sveltely-hover-color));
+	}
+
+	.button-icon-only {
+		padding:
+			var(--button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--button-scale)))
+			var(--button-padding-x, calc(var(--sveltely-padding-x) * 0.67 * var(--button-scale)));
+		min-width: calc((var(--button-padding-x, calc(var(--sveltely-padding-x) * 0.67 * var(--button-scale))) * 2) + 1rem);
+		min-height: calc((var(--button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--button-scale))) * 2) + 1rem);
+	}
+
+	.button-icon-frame {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--button-icon-size);
+		height: var(--button-icon-size);
+	}
+
+	.button-icon {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/components/Library/Button/Button.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+    label?: string;
+    icon?: Component<{
+        class?: string;
+        size?: number | string;
+    }>;
+    iconSize?: number | string;
+    iconColor?: string;
+    variant?: 'default' | 'solid' | 'ghost';
+} & StyleProps & Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
+declare const Button: Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Library/Button/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Button.svelte';

package/dist/components/Library/Button/index.js

@@ -0,0 +1 @@
+export { default } from './Button.svelte';

package/dist/components/Library/Calendar/Calendar.demo.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Calendar',
+		description: 'Compact month calendar with token-driven spacing and radius.',
+		columnSpan: 2,
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import Calendar from './Calendar.svelte';
+
+	let value = $state<Date | null>(new Date());
+	let month = $state(new Date());
+	let weekStart = $state<'monday' | 'sunday'>('monday');
+</script>
+
+<div class="vstack gap-2">
+	<div class="hstack gap-2">
+		<button type="button" onclick={() => (weekStart = 'monday')}>Monday start</button>
+		<button type="button" onclick={() => (weekStart = 'sunday')}>Sunday start</button>
+	</div>
+	<Calendar bind:value bind:month {weekStart} />
+	<p class="text-xs text-zinc-500">
+		Selected: {value ? value.toLocaleDateString() : 'none'} | Month: {month.toLocaleDateString(undefined, {
+			month: 'long',
+			year: 'numeric'
+		})} | Week starts: {weekStart}
+	</p>
+</div>

package/dist/components/Library/Calendar/Calendar.demo.svelte.d.ts

@@ -0,0 +1,10 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+    rowSpan: number;
+};
+import Calendar from './Calendar.svelte';
+declare const Calendar: import("svelte").Component<Record<string, never>, {}, "">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/Library/Calendar/Calendar.svelte

@@ -0,0 +1,310 @@
+<script lang="ts">
+	import { ChevronLeftIcon, ChevronRightIcon } from '@lucide/svelte';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	const startOfDay = (value: Date) =>
+		new Date(value.getFullYear(), value.getMonth(), value.getDate());
+
+	const startOfMonth = (value: Date) =>
+		new Date(value.getFullYear(), value.getMonth(), 1);
+
+	type CalendarCell = {
+		key: string;
+		label: string;
+		isCurrentMonth: boolean;
+		isToday: boolean;
+		isWeekend: boolean;
+		value?: Date;
+		isSelected: boolean;
+	};
+
+	type Props = {
+		value?: Date | null;
+		month?: Date;
+		weekdayLabels?: string[];
+		weekStart?: 'monday' | 'sunday';
+	} & StyleProps & Record<string, unknown>;
+
+	const defaultWeekdayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+	const today = new Date();
+
+	let {
+		value = $bindable<Date | null>(startOfDay(today)),
+		month = $bindable<Date>(startOfMonth(today)),
+		weekdayLabels = defaultWeekdayLabels,
+		weekStart = 'monday',
+		...restProps
+	}: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'calendar'));
+
+	const orderedWeekdayLabels = $derived(
+		weekStart === 'sunday'
+			? [weekdayLabels[6], ...weekdayLabels.slice(0, 6)]
+			: weekdayLabels
+	);
+
+	const weekendColumnIndexes = $derived(
+		weekStart === 'sunday' ? [0, 6] : [5, 6]
+	);
+
+	function shiftMonth(offset: number) {
+		month = new Date(month.getFullYear(), month.getMonth() + offset, 1);
+	}
+
+	function selectDate(nextValue: Date) {
+		value = startOfDay(nextValue);
+	}
+
+	const displayYear = $derived(month.getFullYear());
+	const displayMonth = $derived(month.getMonth());
+	const todayYear = today.getFullYear();
+	const todayMonth = today.getMonth();
+	const todayDate = today.getDate();
+
+	const monthLabel = $derived(
+		month.toLocaleDateString(undefined, {
+			month: 'long',
+			year: 'numeric'
+		})
+	);
+
+	const cells = $derived.by(() => {
+		const firstDay = new Date(displayYear, displayMonth, 1);
+		const daysInMonth = new Date(displayYear, displayMonth + 1, 0).getDate();
+		const leadingEmptyDays =
+			weekStart === 'sunday' ? firstDay.getDay() : (firstDay.getDay() + 6) % 7;
+
+		return Array.from({ length: leadingEmptyDays + daysInMonth }, (_, index): CalendarCell => {
+			const dayNumber = index - leadingEmptyDays + 1;
+			if (dayNumber < 1) {
+				return {
+					key: `empty-${index}`,
+					label: '',
+					isCurrentMonth: false,
+					isToday: false,
+					isWeekend: false,
+					isSelected: false
+				};
+			}
+
+			const cellDate = new Date(displayYear, displayMonth, dayNumber);
+			const dayOfWeek = cellDate.getDay();
+
+			return {
+				key: `day-${dayNumber}`,
+				label: String(dayNumber),
+				isCurrentMonth: true,
+				value: cellDate,
+				isToday:
+					displayYear === todayYear &&
+					displayMonth === todayMonth &&
+					dayNumber === todayDate,
+				isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
+				isSelected:
+					value !== null &&
+					cellDate.getFullYear() === value.getFullYear() &&
+					cellDate.getMonth() === value.getMonth() &&
+					cellDate.getDate() === value.getDate()
+			};
+		});
+	});
+</script>
+
+<div class="calendar vstack" style={rootStyle} {...props}>
+	<div class="calendar-grid">
+		<button class="calendar-nav-button" type="button" aria-label="Previous month" onclick={() => shiftMonth(-1)}>
+			<ChevronLeftIcon class="calendar-nav-icon" strokeWidth={2} />
+		</button>
+		<div class="calendar-title-cell">
+			<h2 class="calendar-title">{monthLabel}</h2>
+		</div>
+		<button class="calendar-nav-button" type="button" aria-label="Next month" onclick={() => shiftMonth(1)}>
+			<ChevronRightIcon class="calendar-nav-icon" strokeWidth={2} />
+		</button>
+		{#each orderedWeekdayLabels as weekday, index}
+			<div
+				class="calendar-weekday"
+				class:calendar-weekday-weekend={weekendColumnIndexes.includes(index)}
+			>
+				{weekday}
+			</div>
+		{/each}
+
+		{#each cells as cell (cell.key)}
+			{#if cell.isCurrentMonth && cell.value}
+				<button
+					type="button"
+					class="calendar-day"
+					class:calendar-day-today={cell.isToday}
+					class:calendar-day-selected={cell.isSelected}
+					class:calendar-day-weekend={cell.isWeekend}
+					aria-pressed={cell.isSelected}
+					onclick={() => selectDate(cell.value!)}
+				>
+					{cell.label}
+				</button>
+			{:else}
+				<div class="calendar-day calendar-day-empty">
+					{cell.label}
+				</div>
+			{/if}
+		{/each}
+	</div>
+</div>
+
+<style>
+	.calendar {
+		--calendar-font-size: calc(var(--sveltely-font-size) * 0.971);
+		--calendar-scale: calc(var(--calendar-font-size) / 1rem);
+		--calendar-cell-core-size: max(2ch, calc(2ch * var(--calendar-scale)));
+		--calendar-weekend-color: var(--color-zinc-500);
+		--calendar-weekend-header-color: var(--color-zinc-400);
+		--calendar-weekend-selected-color: white;
+		--calendar-cell-width: calc(var(--calendar-cell-core-size) + (var(--sveltely-padding-x) * 2.2));
+		--calendar-cell-height: calc(var(--calendar-cell-core-size) + (var(--sveltely-padding-y) * 2.2));
+		--calendar-title-size: calc(var(--calendar-font-size) * 1.03);
+		--calendar-weekday-size: calc(var(--calendar-font-size) * 0.75);
+		font-size: var(--calendar-font-size);
+		gap: calc(var(--sveltely-gap) * 1.25);
+		width: fit-content;
+		max-width: 100%;
+	}
+
+	.calendar-title-cell {
+		grid-column: span 5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		text-align: center;
+	}
+
+	.calendar-title {
+		margin: 0;
+		font-size: var(--calendar-title-size);
+		line-height: 1.4;
+		font-weight: 600;
+		color: var(--color-zinc-900);
+	}
+
+	.calendar-nav-button {
+		box-sizing: border-box;
+		display: inline-flex;
+		flex: 0 0 var(--calendar-cell-width);
+		align-items: center;
+		justify-content: center;
+		width: var(--calendar-cell-width);
+		min-width: var(--calendar-cell-width);
+		max-width: var(--calendar-cell-width);
+		height: var(--calendar-cell-height);
+		min-height: var(--calendar-cell-height);
+		max-height: var(--calendar-cell-height);
+		border: 1px solid color-mix(in oklab, var(--sveltely-border-color) 75%, white);
+		border-radius: var(--sveltely-border-radius);
+		background: color-mix(in oklab, white 92%, var(--color-zinc-100));
+		padding: 0;
+		color: var(--color-zinc-600);
+		cursor: pointer;
+		appearance: none;
+	}
+
+	.calendar-nav-button:focus-visible {
+		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 24%, white);
+		outline-offset: 2px;
+	}
+
+	.calendar-nav-button:hover {
+		background: var(--sveltely-hover-color);
+	}
+
+	.calendar-nav-icon {
+		width: calc(var(--calendar-font-size) * 1.143);
+		height: calc(var(--calendar-font-size) * 1.143);
+	}
+
+	.calendar-grid {
+		display: grid;
+		grid-template-columns: repeat(7, var(--calendar-cell-width));
+		grid-auto-rows: var(--calendar-cell-height);
+		gap: calc(var(--sveltely-gap) * 0.5);
+		align-items: stretch;
+	}
+
+	.calendar-weekday {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		padding: 0;
+		font-size: var(--calendar-weekday-size);
+		line-height: 1;
+		text-align: center;
+		color: var(--color-zinc-500);
+	}
+
+	.calendar-weekday-weekend {
+		color: var(--calendar-weekend-header-color);
+	}
+
+	.calendar-day {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		border: 1px solid color-mix(in oklab, var(--sveltely-border-color) 75%, white);
+		border-radius: var(--sveltely-border-radius);
+		background: color-mix(in oklab, white 92%, var(--color-zinc-100));
+		padding: 0;
+		font-size: calc(var(--calendar-font-size) * 0.85);
+		line-height: 1;
+		color: var(--color-zinc-700);
+		cursor: pointer;
+		appearance: none;
+	}
+
+	.calendar-day-weekend {
+		color: var(--calendar-weekend-color);
+	}
+
+	.calendar-day:focus-visible {
+		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 24%, white);
+		outline-offset: 2px;
+	}
+
+	.calendar-day:hover {
+		background: var(--sveltely-hover-color);
+	}
+
+	.calendar-day-empty {
+		border-color: transparent;
+		background: transparent;
+		color: transparent;
+		cursor: default;
+	}
+
+	.calendar-day-today {
+		border-color: color-mix(in oklab, var(--sveltely-primary-color) 18%, white);
+	}
+
+	.calendar-day-selected {
+		border-color: var(--sveltely-primary-color);
+		background: var(--sveltely-primary-color);
+		color: white;
+	}
+
+	.calendar-day-selected:hover {
+		background: var(--sveltely-active-hover-color);
+	}
+
+	.calendar-day-selected.calendar-day-weekend {
+		color: var(--calendar-weekend-selected-color);
+	}
+</style>

package/dist/components/Library/Calendar/Calendar.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    value?: Date | null;
+    month?: Date;
+    weekdayLabels?: string[];
+    weekStart?: 'monday' | 'sunday';
+} & StyleProps & Record<string, unknown>;
+declare const Calendar: import("svelte").Component<Props, {}, "value" | "month">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/Library/Calendar/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Calendar.svelte';

package/dist/components/Library/Calendar/index.js

@@ -0,0 +1 @@
+export { default } from './Calendar.svelte';

package/dist/components/Library/Checkbox/Checkbox.demo.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Checkbox',
+		description: 'Token-driven checkbox with bindable checked state.'
+	};
+</script>
+
+<script lang="ts">
+	import Checkbox from './Checkbox.svelte';
+
+	let notificationsEnabled = $state(true);
+	let weeklySummaryEnabled = $state(false);
+</script>
+
+<div class="vstack gap-3">
+	<Checkbox bind:checked={notificationsEnabled} label="Enable notifications" />
+	<Checkbox bind:checked={weeklySummaryEnabled}>
+		<span>Send weekly summary email</span>
+	</Checkbox>
+</div>

package/dist/components/Library/Checkbox/Checkbox.demo.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import Checkbox from './Checkbox.svelte';
+declare const Checkbox: import("svelte").Component<Record<string, never>, {}, "">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/Library/Checkbox/Checkbox.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { CheckIcon } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		checked?: boolean;
+		label?: string;
+		children?: Snippet;
+	} & StyleProps & Omit<HTMLInputAttributes, 'type' | 'children' | 'class' | 'style' | 'checked'>;
+
+	let {
+		checked = $bindable(false),
+		label,
+		children,
+		disabled = false,
+		...restProps
+	}: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'checkbox'));
+</script>
+
+<label
+	class="checkbox inline-flex items-center"
+	style={rootStyle}
+	data-disabled={disabled ? 'true' : 'false'}
+>
+	<span class="checkbox-control">
+		<input bind:checked type="checkbox" {disabled} {...props} />
+		<span class="checkbox-mark" aria-hidden="true">
+			<CheckIcon class="checkbox-icon" />
+		</span>
+	</span>
+
+	{#if children || label}
+		<span class="checkbox-label">
+			{#if children}
+				{@render children()}
+			{:else if label}
+				{label}
+			{/if}
+		</span>
+	{/if}
+</label>
+
+<style>
+	.checkbox {
+		--checkbox-font-size: var(--sveltely-font-size);
+		--checkbox-scale: calc(var(--checkbox-font-size) / 1rem);
+		--checkbox-box-size: calc(
+			(var(--checkbox-font-size) * 0.92) + (var(--sveltely-padding-y) * 0.28 * var(--checkbox-scale))
+		);
+		--checkbox-icon-size: calc(var(--checkbox-box-size) * 0.64);
+		gap: var(--checkbox-gap, var(--sveltely-gap));
+		font-size: var(--checkbox-font-size);
+		line-height: 1.25;
+		color: var(--checkbox-color, var(--color-zinc-800));
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.checkbox[data-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.checkbox-control {
+		position: relative;
+		flex: 0 0 auto;
+		inline-size: var(--checkbox-box-size);
+		block-size: var(--checkbox-box-size);
+	}
+
+	.checkbox-control input {
+		position: absolute;
+		inset: 0;
+		margin: 0;
+		opacity: 0;
+		cursor: inherit;
+	}
+
+	.checkbox-mark {
+		inline-size: 100%;
+		block-size: 100%;
+		border: 1px solid var(--checkbox-border-color, var(--sveltely-border-color));
+		border-radius: var(--checkbox-border-radius, calc(var(--sveltely-border-radius) * 0.5));
+		background: var(--checkbox-background, var(--sveltely-inactive-color));
+		color: transparent;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		transition: color 150ms, border-color 150ms, background-color 150ms;
+	}
+
+	.checkbox:hover .checkbox-mark {
+		background: var(--checkbox-hover-background, var(--sveltely-inactive-hover-color));
+	}
+
+	.checkbox-control input:checked + .checkbox-mark {
+		border-color: var(--checkbox-checked-border-color, var(--sveltely-active-color));
+		background: var(--checkbox-checked-background, var(--sveltely-active-color));
+		color: var(--checkbox-checked-color, white);
+	}
+
+	.checkbox:hover .checkbox-control input:checked + .checkbox-mark {
+		background: var(
+			--checkbox-checked-hover-background,
+			var(--sveltely-active-hover-color)
+		);
+		border-color: var(
+			--checkbox-checked-hover-border-color,
+			var(--sveltely-active-hover-color)
+		);
+	}
+
+	.checkbox-control input:focus-visible + .checkbox-mark {
+		outline: 2px solid color-mix(in oklab, var(--sveltely-primary-color) 24%, white);
+		outline-offset: 2px;
+	}
+
+	.checkbox-icon {
+		display: block;
+		width: var(--checkbox-icon-size);
+		height: var(--checkbox-icon-size);
+	}
+
+	.checkbox-label {
+		min-width: 0;
+	}
+</style>