@dryui/ui 0.3.0 → 0.4.1

package/dist/calendar/calendar-grid.svelte

@@ -1,253 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { getCalendarCtx } from './context.svelte.js';
-	import {
-		getCalendarDays,
-		isSameDay,
-		isToday,
-		isDateInRange,
-		formatDate
-	} from '@dryui/primitives';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {}
-
-	let { class: className, ...rest }: Props = $props();
-
-	const ctx = getCalendarCtx();
-
-	let containerEl = $state<HTMLDivElement>();
-
-	const weekdayLabels = $derived(generateWeekdayLabels(ctx.locale, ctx.weekStartDay));
-
-	const calendarDays = $derived(getCalendarDays(ctx.viewYear, ctx.viewMonth, ctx.weekStartDay));
-
-	const monthYearLabel = $derived(
-		formatDate(new Date(ctx.viewYear, ctx.viewMonth, 1), ctx.locale, {
-			month: 'long',
-			year: 'numeric'
-		})
-	);
-
-	const weeks = $derived(splitIntoWeeks(calendarDays));
-
-	function generateWeekdayLabels(locale: string, weekStartDay: number): string[] {
-		const formatter = new Intl.DateTimeFormat(locale, { weekday: 'short' });
-		const labels: string[] = [];
-		for (let i = 0; i < 7; i++) {
-			const d = new Date(2024, 0, 7 + ((i + weekStartDay) % 7));
-			labels.push(formatter.format(d));
-		}
-		return labels;
-	}
-
-	function splitIntoWeeks(days: Date[]): Date[][] {
-		const weeks: Date[][] = [];
-		for (let i = 0; i < days.length; i += 7) {
-			weeks.push(days.slice(i, i + 7));
-		}
-		return weeks;
-	}
-
-	function getDayISOString(day: Date): string {
-		return `${day.getFullYear()}-${String(day.getMonth() + 1).padStart(2, '0')}-${String(day.getDate()).padStart(2, '0')}`;
-	}
-
-	function handleDayClick(day: Date) {
-		if (ctx.disabled) return;
-		if (!isDateInRange(day, ctx.min, ctx.max)) return;
-		ctx.select(day);
-	}
-
-	function handleDayKeydown(e: KeyboardEvent, day: Date) {
-		if (ctx.disabled) return;
-		const { key } = e;
-		let newDate: Date | null = null;
-
-		if (key === 'ArrowLeft') {
-			e.preventDefault();
-			newDate = new Date(day);
-			newDate.setDate(newDate.getDate() - 1);
-		} else if (key === 'ArrowRight') {
-			e.preventDefault();
-			newDate = new Date(day);
-			newDate.setDate(newDate.getDate() + 1);
-		} else if (key === 'ArrowUp') {
-			e.preventDefault();
-			newDate = new Date(day);
-			newDate.setDate(newDate.getDate() - 7);
-		} else if (key === 'ArrowDown') {
-			e.preventDefault();
-			newDate = new Date(day);
-			newDate.setDate(newDate.getDate() + 7);
-		} else if (key === 'Enter' || key === ' ') {
-			e.preventDefault();
-			if (isDateInRange(day, ctx.min, ctx.max)) ctx.select(day);
-			return;
-		} else return;
-
-		if (newDate && isDateInRange(newDate, ctx.min, ctx.max)) {
-			ctx.setFocusedDate(newDate);
-			requestAnimationFrame(() => {
-				const isoStr = getDayISOString(newDate!);
-				const btn = containerEl?.querySelector(
-					`[data-calendar-day="${isoStr}"]`
-				) as HTMLButtonElement;
-				btn?.focus();
-			});
-		}
-	}
-
-	function isDayDisabled(day: Date): boolean {
-		return !isDateInRange(day, ctx.min, ctx.max);
-	}
-</script>
-
-<div bind:this={containerEl} data-calendar-grid class={className} {...rest}>
-	<div role="grid" aria-label={monthYearLabel}>
-		<div data-calendar-row role="row">
-			{#each weekdayLabels as label}
-				<div data-calendar-columnheader role="columnheader" aria-label={label}>
-					<span aria-hidden="true">{label}</span>
-				</div>
-			{/each}
-		</div>
-
-		{#each weeks as week}
-			<div data-calendar-row role="row">
-				{#each week as day}
-					{@const isCurrent = day.getMonth() === ctx.viewMonth}
-					{@const selected = ctx.value ? isSameDay(day, ctx.value) : false}
-					{@const today = isToday(day)}
-					{@const disabled = isDayDisabled(day)}
-					{@const focused = isSameDay(day, ctx.focusedDate)}
-					{@const isoStr = getDayISOString(day)}
-					<div data-calendar-cell>
-						<button
-							role="gridcell"
-							type="button"
-							data-calendar-day-button
-							tabindex={focused ? 0 : -1}
-							aria-label={formatDate(day, ctx.locale, {
-								year: 'numeric',
-								month: 'long',
-								day: 'numeric'
-							})}
-							aria-selected={selected}
-							aria-disabled={disabled}
-							data-calendar-day={isoStr}
-							data-today={today ? '' : undefined}
-							data-selected={selected ? '' : undefined}
-							data-outside-month={!isCurrent ? '' : undefined}
-							data-disabled={disabled ? '' : undefined}
-							onclick={() => handleDayClick(day)}
-							onkeydown={(e) => handleDayKeydown(e, day)}
-						>
-							{day.getDate()}
-						</button>
-					</div>
-				{/each}
-			</div>
-		{/each}
-	</div>
-</div>
-
-<style>
-	[data-calendar-grid] {
-		--dry-calendar-grid-gap: 1px;
-		display: grid;
-		gap: var(--dry-space-2);
-	}
-
-	[role='grid'] {
-		display: grid;
-		gap: var(--dry-calendar-grid-gap);
-	}
-
-	[data-calendar-row] {
-		display: grid;
-		grid-template-columns: repeat(7, minmax(0, 1fr));
-		gap: var(--dry-calendar-grid-gap);
-	}
-
-	[data-calendar-columnheader] {
-		display: grid;
-		place-items: center;
-		min-height: var(--dry-space-8);
-		font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
-		color: var(--dry-calendar-muted-color, var(--dry-color-text-weak));
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-	}
-
-	[data-calendar-cell] {
-		display: grid;
-		grid-template-columns: var(--dry-calendar-day-size, 2.25rem);
-		place-items: center;
-	}
-
-	[data-calendar-day-button] {
-		display: inline-grid;
-		place-items: center;
-		min-height: var(--dry-calendar-day-size, 2.25rem);
-		aspect-ratio: 1;
-		border: none;
-		border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		font: inherit;
-		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
-		font-variant-numeric: tabular-nums;
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover:not([data-disabled]) {
-			background: var(--dry-calendar-day-hover-bg, var(--dry-color-bg-raised));
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: 1px;
-		}
-
-		&[data-today]:not([data-selected]) {
-			color: var(--dry-calendar-today-color, var(--dry-color-fill-brand));
-			font-weight: 600;
-		}
-
-		&[data-selected] {
-			background: var(--dry-calendar-selected-bg, var(--dry-color-fill-brand));
-			color: var(--dry-calendar-selected-color, var(--dry-color-on-brand));
-			font-weight: 600;
-		}
-
-		&[data-selected]:hover:not([data-disabled]) {
-			background: var(--dry-calendar-selected-hover-bg, var(--dry-color-fill-brand-hover));
-		}
-
-		&[data-in-range] {
-			background: var(
-				--dry-calendar-range-bg,
-				color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent)
-			);
-			border-radius: 0;
-		}
-
-		&[data-range-start],
-		&[data-range-end] {
-			border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
-		}
-
-		&[data-outside-month] {
-			color: var(--dry-calendar-outside-color, var(--dry-color-text-weak));
-			opacity: 0.6;
-		}
-
-		&[data-disabled] {
-			cursor: not-allowed;
-			opacity: 0.4;
-			pointer-events: none;
-		}
-	}
-</style>

package/dist/calendar/calendar-grid.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { CalendarGridProps } from './index.js';
-declare const CalendarGrid: import('svelte').Component<CalendarGridProps, {}, ''>;
-type CalendarGrid = ReturnType<typeof CalendarGrid>;
-export default CalendarGrid;

package/dist/calendar/calendar-next.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getCalendarCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children?: Snippet;
-	}
-
-	let { children, class: className, ...rest }: Props = $props();
-
-	const ctx = getCalendarCtx();
-</script>
-
-<button
-	type="button"
-	aria-label="Next month"
-	disabled={ctx.disabled}
-	data-calendar-nav
-	class={className}
-	onclick={() => ctx.nextMonth()}
-	{...rest}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		&#8250;
-	{/if}
-</button>
-
-<style>
-	[data-calendar-nav] {
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-space-8);
-		aspect-ratio: 1;
-		border: 1px solid transparent;
-		border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
-		background: transparent;
-		color: var(--dry-calendar-header-color, var(--dry-color-text-strong));
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover:not([disabled]) {
-			background: var(--dry-calendar-day-hover-bg, var(--dry-color-bg-raised));
-			border-color: var(--dry-color-stroke-strong);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: 1px;
-		}
-	}
-</style>

package/dist/calendar/calendar-next.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { CalendarNextProps } from './index.js';
-declare const CalendarNext: import('svelte').Component<CalendarNextProps, {}, ''>;
-type CalendarNext = ReturnType<typeof CalendarNext>;
-export default CalendarNext;

package/dist/calendar/calendar-prev.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getCalendarCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children?: Snippet;
-	}
-
-	let { children, class: className, ...rest }: Props = $props();
-
-	const ctx = getCalendarCtx();
-</script>
-
-<button
-	type="button"
-	aria-label="Previous month"
-	disabled={ctx.disabled}
-	data-calendar-nav
-	class={className}
-	onclick={() => ctx.prevMonth()}
-	{...rest}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		&#8249;
-	{/if}
-</button>
-
-<style>
-	[data-calendar-nav] {
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-space-8);
-		aspect-ratio: 1;
-		border: 1px solid transparent;
-		border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
-		background: transparent;
-		color: var(--dry-calendar-header-color, var(--dry-color-text-strong));
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default);
-
-		&:hover:not([disabled]) {
-			background: var(--dry-calendar-day-hover-bg, var(--dry-color-bg-raised));
-			border-color: var(--dry-color-stroke-strong);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: 1px;
-		}
-	}
-</style>

package/dist/calendar/calendar-prev.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { CalendarPrevProps } from './index.js';
-declare const CalendarPrev: import('svelte').Component<CalendarPrevProps, {}, ''>;
-type CalendarPrev = ReturnType<typeof CalendarPrev>;
-export default CalendarPrev;

package/dist/carousel/carousel-dots.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { getCarouselCtx } from './context.svelte.js';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {}
-
-	let { class: className, ...rest }: Props = $props();
-	const ctx = getCarouselCtx();
-</script>
-
-<div role="tablist" aria-label="Slide indicators" data-carousel-dots class={className} {...rest}>
-	{#each Array(ctx.totalSlides) as _, i}
-		<button
-			role="tab"
-			aria-selected={ctx.activeIndex === i}
-			aria-label="Go to slide {i + 1}"
-			data-active={ctx.activeIndex === i ? '' : undefined}
-			onclick={() => ctx.scrollTo(i)}
-		></button>
-	{/each}
-</div>
-
-<style>
-	[data-carousel-dots] {
-		--dry-carousel-indicator-size: var(--dry-space-2_5);
-		--dry-carousel-indicator-color: var(--dry-color-stroke-weak);
-		--dry-carousel-indicator-active-color: var(--dry-color-fill-brand);
-
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: minmax(var(--dry-space-12), max-content);
-		gap: var(--dry-space-2);
-		justify-self: center;
-		padding-top: var(--dry-space-3);
-	}
-
-	[data-carousel-dots] button {
-		height: var(--dry-carousel-indicator-size);
-		aspect-ratio: 1;
-		border-radius: var(--dry-radius-full);
-		border: none;
-		padding: 0;
-		background: var(--dry-carousel-indicator-color);
-		cursor: pointer;
-		transition: background var(--dry-duration-fast) var(--dry-ease-default);
-		min-height: var(--dry-space-12);
-		display: inline-grid;
-		place-items: center;
-	}
-
-	[data-carousel-dots] button[aria-selected='true'] {
-		background: var(--dry-carousel-indicator-active-color);
-	}
-
-	[data-carousel-dots] button:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-</style>

package/dist/carousel/carousel-dots.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {}
-declare const CarouselDots: import('svelte').Component<Props, {}, ''>;
-type CarouselDots = ReturnType<typeof CarouselDots>;
-export default CarouselDots;

package/dist/carousel/carousel-next.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getCarouselCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children?: Snippet;
-	}
-
-	let { class: className, children, disabled, ...rest }: Props = $props();
-	const ctx = getCarouselCtx();
-</script>
-
-<button
-	aria-label="Next slide"
-	disabled={disabled ?? !ctx.canScrollNext}
-	data-carousel-nav
-	class={className}
-	{...rest}
-	onclick={(e) => {
-		ctx.scrollNext();
-		rest.onclick?.(e);
-	}}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		&#8250;
-	{/if}
-</button>
-
-<style>
-	[data-carousel-nav] {
-		--dry-carousel-nav-size: var(--dry-space-12);
-
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-carousel-nav-size);
-		aspect-ratio: 1;
-		border-radius: var(--dry-radius-full);
-		border: 1px solid var(--dry-color-stroke-weak);
-		background: var(--dry-color-bg-raised);
-		color: var(--dry-color-text-strong);
-		cursor: pointer;
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			opacity var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-carousel-nav]:hover:not(:disabled) {
-		background: var(--dry-color-fill);
-	}
-
-	[data-carousel-nav]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-carousel-nav]:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-</style>

package/dist/carousel/carousel-next.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	children?: Snippet;
-}
-declare const CarouselNext: import('svelte').Component<Props, {}, ''>;
-type CarouselNext = ReturnType<typeof CarouselNext>;
-export default CarouselNext;

package/dist/carousel/carousel-prev.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getCarouselCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children?: Snippet;
-	}
-
-	let { class: className, children, disabled, ...rest }: Props = $props();
-	const ctx = getCarouselCtx();
-</script>
-
-<button
-	aria-label="Previous slide"
-	disabled={disabled ?? !ctx.canScrollPrev}
-	data-carousel-nav
-	class={className}
-	{...rest}
-	onclick={(e) => {
-		ctx.scrollPrev();
-		rest.onclick?.(e);
-	}}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		&#8249;
-	{/if}
-</button>
-
-<style>
-	[data-carousel-nav] {
-		--dry-carousel-nav-size: var(--dry-space-12);
-
-		display: inline-grid;
-		place-items: center;
-		height: var(--dry-carousel-nav-size);
-		aspect-ratio: 1;
-		border-radius: var(--dry-radius-full);
-		border: 1px solid var(--dry-color-stroke-weak);
-		background: var(--dry-color-bg-raised);
-		color: var(--dry-color-text-strong);
-		cursor: pointer;
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			opacity var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-carousel-nav]:hover:not(:disabled) {
-		background: var(--dry-color-fill);
-	}
-
-	[data-carousel-nav]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-carousel-nav]:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-</style>

package/dist/carousel/carousel-prev.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	children?: Snippet;
-}
-declare const CarouselPrev: import('svelte').Component<Props, {}, ''>;
-type CarouselPrev = ReturnType<typeof CarouselPrev>;
-export default CarouselPrev;

package/dist/carousel/carousel-thumbnails.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-	position?: 'bottom' | 'left' | 'right';
-	children: Snippet<[{ index: number; isActive: boolean; scrollTo: (index: number) => void }]>;
-}
-declare const CarouselThumbnails: import('svelte').Component<Props, {}, ''>;
-type CarouselThumbnails = ReturnType<typeof CarouselThumbnails>;
-export default CarouselThumbnails;

package/dist/checkbox/checkbox.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLInputAttributes, 'size'> {
-	checked?: boolean;
-	indeterminate?: boolean;
-	size?: 'sm' | 'md' | 'lg';
-	disabled?: boolean;
-}
-declare const Checkbox: import('svelte').Component<Props, {}, 'checked'>;
-type Checkbox = ReturnType<typeof Checkbox>;
-export default Checkbox;