@dryui/ui 0.3.0 → 0.4.0

package/dist/calendar/calendar-button-grid.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getCalendarCtx } from './context.svelte.js';
+	import {
+		getCalendarDays,
+		isSameDay,
+		isToday,
+		isDateInRange,
+		formatDate
+	} from '@dryui/primitives';
+	import {
+		generateWeekdayLabels,
+		splitIntoWeeks,
+		getDayISOString,
+		handleCalendarKeydown,
+		focusCalendarDay
+	} from '../internal/calendar-grid-utils.js';
+
+	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 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 result = handleCalendarKeydown(e, day, {
+			onSelect: (d) => {
+				if (isDateInRange(d, ctx.min, ctx.max)) ctx.select(d);
+			},
+			onEscape: () => {},
+			setFocusedDate: (d) => ctx.setFocusedDate(d),
+			weekStartDay: ctx.weekStartDay,
+			min: ctx.min,
+			max: ctx.max
+		});
+		if (result?.type === 'navigate') {
+			requestAnimationFrame(() => focusCalendarDay(containerEl, result.newDate));
+		}
+	}
+
+	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 (label)}
+				<div data-calendar-columnheader role="columnheader" aria-label={label}>
+					<span aria-hidden="true">{label}</span>
+				</div>
+			{/each}
+		</div>
+
+		{#each weeks as week, wi (wi)}
+			<div data-calendar-row role="row">
+				{#each week as day (day.getTime())}
+					{@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
+							variant="trigger"
+							size="icon-sm"
+							type="button"
+							role="gridcell"
+							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}
+							{disabled}
+							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);
+		color: var(--dry-calendar-muted-color, var(--dry-color-text-weak));
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+
+	[data-calendar-cell] {
+		display: grid;
+		place-items: center;
+	}
+</style>

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

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

package/dist/calendar/calendar-button-next.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CalendarNavButton from './calendar-nav-button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let props: Props = $props();
+</script>
+
+<CalendarNavButton direction="next" {...props} />

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

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

package/dist/calendar/calendar-button-prev.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CalendarNavButton from './calendar-nav-button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let props: Props = $props();
+</script>
+
+<CalendarNavButton direction="prev" {...props} />

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

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

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

@@ -1,4 +1,8 @@
-import type { CalendarHeaderProps } from './index.js';
-declare const CalendarHeader: import('svelte').Component<CalendarHeaderProps, {}, ''>;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+}
+declare const CalendarHeader: import("svelte").Component<Props, {}, "">;
 type CalendarHeader = ReturnType<typeof CalendarHeader>;
 export default CalendarHeader;

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

@@ -1,4 +1,6 @@
-import type { CalendarHeadingProps } from './index.js';
-declare const CalendarHeading: import('svelte').Component<CalendarHeadingProps, {}, ''>;
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+}
+declare const CalendarHeading: import("svelte").Component<Props, {}, "">;
 type CalendarHeading = ReturnType<typeof CalendarHeading>;
 export default CalendarHeading;

package/dist/calendar/calendar-nav-button.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import NavArrowButton from '../internal/nav-arrow-button.svelte';
+	import { getCalendarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		direction: 'prev' | 'next';
+		children?: Snippet;
+	}
+
+	let { direction, children, ...rest }: Props = $props();
+
+	const ctx = getCalendarCtx();
+</script>
+
+<NavArrowButton
+	{direction}
+	variant="trigger"
+	size="icon-sm"
+	label={direction === 'prev' ? 'Previous month' : 'Next month'}
+	disabled={ctx.disabled}
+	onclick={() => (direction === 'prev' ? ctx.prevMonth() : ctx.nextMonth())}
+	{children}
+	{...rest}
+/>

package/dist/calendar/calendar-nav-button.svelte.d.ts

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

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

@@ -1,4 +1,13 @@
-import type { CalendarRootProps } from './index.js';
-declare const CalendarRoot: import('svelte').Component<CalendarRootProps, {}, 'value'>;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    value?: Date | null;
+    locale?: string;
+    min?: Date | null;
+    max?: Date | null;
+    disabled?: boolean;
+    children: Snippet;
+}
+declare const CalendarRoot: import("svelte").Component<Props, {}, "value">;
 type CalendarRoot = ReturnType<typeof CalendarRoot>;
 export default CalendarRoot;

package/dist/calendar/index.d.ts

@@ -1,9 +1,9 @@
 export type { CalendarRootProps, CalendarHeaderProps, CalendarGridProps, CalendarPrevProps, CalendarNextProps, CalendarHeadingProps } from '@dryui/primitives';
 import CalendarRoot from './calendar-root.svelte';
 import CalendarHeader from './calendar-header.svelte';
-import CalendarGrid from './calendar-grid.svelte';
-import CalendarPrev from './calendar-prev.svelte';
-import CalendarNext from './calendar-next.svelte';
+import CalendarGrid from './calendar-button-grid.svelte';
+import CalendarPrev from './calendar-button-prev.svelte';
+import CalendarNext from './calendar-button-next.svelte';
 import CalendarHeading from './calendar-heading.svelte';
 export declare const Calendar: {
     Root: typeof CalendarRoot;

package/dist/calendar/index.js

@@ -1,8 +1,8 @@
 import CalendarRoot from './calendar-root.svelte';
 import CalendarHeader from './calendar-header.svelte';
-import CalendarGrid from './calendar-grid.svelte';
-import CalendarPrev from './calendar-prev.svelte';
-import CalendarNext from './calendar-next.svelte';
+import CalendarGrid from './calendar-button-grid.svelte';
+import CalendarPrev from './calendar-button-prev.svelte';
+import CalendarNext from './calendar-button-next.svelte';
 import CalendarHeading from './calendar-heading.svelte';
 export const Calendar = {
     Root: CalendarRoot,

package/dist/card/card-content.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
-	noPadding?: boolean;
+    children: Snippet;
+    noPadding?: boolean;
 }
-declare const CardContent: import('svelte').Component<Props, {}, ''>;
+declare const CardContent: import("svelte").Component<Props, {}, "">;
 type CardContent = ReturnType<typeof CardContent>;
 export default CardContent;

package/dist/card/card-footer.svelte.d.ts

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

package/dist/card/card-header.svelte.d.ts

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

package/dist/card/card-root.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 	interface Props extends HTMLAttributes<HTMLElement> {
-		as?: 'div' | 'a' | 'button';
+		as?: 'div' | 'button';
 		selected?: boolean;
 		disabled?: boolean;
 		orientation?: 'vertical' | 'horizontal';
@@ -25,20 +25,37 @@
 	}: Props = $props();
 </script>
 
-<svelte:element
-	this={as}
-	class={className}
-	data-card
-	data-selected={selected ? '' : undefined}
-	data-orientation={orientation}
-	data-variant={variant !== 'default' ? variant : undefined}
-	data-size={size !== 'default' ? size : undefined}
-	data-disabled={disabled ? '' : undefined}
-	aria-disabled={disabled || undefined}
-	{...rest}
->
-	{@render children()}
-</svelte:element>
+{#if as === 'button'}
+	<button
+		class={className}
+		data-card
+		data-selected={selected ? '' : undefined}
+		data-orientation={orientation}
+		data-variant={variant !== 'default' ? variant : undefined}
+		data-size={size !== 'default' ? size : undefined}
+		data-disabled={disabled ? '' : undefined}
+		{disabled}
+		aria-disabled={disabled || undefined}
+		type="button"
+		{...rest as HTMLButtonAttributes}
+	>
+		{@render children()}
+	</button>
+{:else}
+	<div
+		class={className}
+		data-card
+		data-selected={selected ? '' : undefined}
+		data-orientation={orientation}
+		data-variant={variant !== 'default' ? variant : undefined}
+		data-size={size !== 'default' ? size : undefined}
+		data-disabled={disabled ? '' : undefined}
+		aria-disabled={disabled || undefined}
+		{...rest}
+	>
+		{@render children()}
+	</div>
+{/if}
 
 <style>
 	[data-card] {
@@ -73,37 +90,35 @@
 			var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-raised)));
 	}
 
-	/* ── Clickable card (button or link) ───────────────────────────────────── */
+	/* ── Clickable card (button) ───────────────────────────────────────────── */
 
-	[data-card]:is(a, button) {
-		cursor: pointer;
-		text-decoration: none;
+	button[data-card] {
+		appearance: none;
+		border: none;
+		padding: 0;
+		font: inherit;
 		color: inherit;
 		text-align: inherit;
+		cursor: pointer;
 		transition:
 			box-shadow var(--dry-duration-normal, 200ms) ease,
 			transform var(--dry-duration-fast, 100ms) ease;
 	}
 
-	[data-card]:is(a, button):hover {
+	button[data-card]:hover {
 		box-shadow: var(--dry-shadow-md, 0 4px 6px -1px rgb(15 23 42 / 0.1));
 		border-color: var(--dry-color-stroke-strong);
 	}
 
-	[data-card]:is(a, button):active {
+	button[data-card]:active {
 		transform: scale(0.99);
 	}
 
-	[data-card]:is(a, button):focus-visible {
+	button[data-card]:focus-visible {
 		outline: 2px solid var(--dry-color-focus-ring);
 		outline-offset: 2px;
 	}
 
-	[data-card]:is(button) {
-		border: none;
-		font: inherit;
-	}
-
 	[data-card][data-disabled] {
 		cursor: not-allowed;
 	}

package/dist/card/card-root.svelte.d.ts

@@ -1,13 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLElement> {
-	as?: 'div' | 'a' | 'button';
-	selected?: boolean;
-	orientation?: 'vertical' | 'horizontal';
-	variant?: 'default' | 'elevated' | 'interactive';
-	size?: 'default' | 'sm';
-	children: Snippet;
+    as?: 'div' | 'button';
+    selected?: boolean;
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    variant?: 'default' | 'elevated' | 'interactive';
+    size?: 'default' | 'sm';
+    children: Snippet;
 }
-declare const CardRoot: import('svelte').Component<Props, {}, ''>;
+declare const CardRoot: import("svelte").Component<Props, {}, "">;
 type CardRoot = ReturnType<typeof CardRoot>;
 export default CardRoot;

package/dist/carousel/carousel-button-dots.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	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 (i)}
+		<Button
+			variant="toggle"
+			size="icon-sm"
+			type="button"
+			role="tab"
+			aria-selected={ctx.activeIndex === i}
+			aria-pressed={ctx.activeIndex === i}
+			aria-label="Go to slide {i + 1}"
+			onclick={() => ctx.scrollTo(i)}
+		>
+			<span class="dot"></span>
+		</Button>
+	{/each}
+</div>
+
+<style>
+	[data-carousel-dots] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		gap: var(--dry-space-2);
+		justify-self: center;
+		padding-top: var(--dry-space-3);
+	}
+
+	.dot {
+		display: inline-grid;
+		height: var(--dry-space-2_5);
+		aspect-ratio: 1;
+		border-radius: 9999px;
+		background: currentColor;
+		opacity: 0.4;
+	}
+
+	[aria-selected='true'] .dot {
+		opacity: 1;
+	}
+</style>

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

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

package/dist/carousel/carousel-button-next.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CarouselNavButton from './carousel-nav-button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let props: Props = $props();
+</script>
+
+<CarouselNavButton direction="next" {...props} />

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

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

package/dist/carousel/carousel-button-prev.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CarouselNavButton from './carousel-nav-button.svelte';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let props: Props = $props();
+</script>
+
+<CarouselNavButton direction="prev" {...props} />

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

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

package/dist/carousel/{carousel-thumbnails.svelte → carousel-button-thumbnails.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getCarouselCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -16,13 +17,13 @@
 	role="tablist"
 	aria-label="Slide thumbnails"
 	data-carousel-thumbnails
-	data-part="thumbnails"
 	data-position={position}
 	class={className}
 	{...rest}
 >
-	{#each Array(ctx.totalSlides) as _, i}
-		<button
+	{#each Array(ctx.totalSlides) as _, i (i)}
+		<Button
+			variant="bare"
 			type="button"
 			role="tab"
 			aria-selected={ctx.activeIndex === i}
@@ -31,7 +32,7 @@
 			onclick={() => ctx.scrollTo(i)}
 		>
 			{@render children({ index: i, isActive: ctx.activeIndex === i, scrollTo: ctx.scrollTo })}
-		</button>
+		</Button>
 	{/each}
 </div>
 
@@ -61,31 +62,4 @@
 		overflow-y: auto;
 		overflow-x: hidden;
 	}
-
-	[data-carousel-thumbnails] button {
-		all: unset;
-		cursor: pointer;
-		border-radius: var(--dry-radius-md, 0.375rem);
-		overflow: hidden;
-		opacity: 0.5;
-		transition:
-			opacity var(--dry-duration-fast, 0.2s) var(--dry-ease-default, ease),
-			outline-color var(--dry-duration-fast, 0.2s) var(--dry-ease-default, ease);
-		outline: 2px solid transparent;
-		outline-offset: 2px;
-	}
-
-	[data-carousel-thumbnails] button:hover {
-		opacity: 0.8;
-	}
-
-	[data-carousel-thumbnails] button[data-active] {
-		opacity: 1;
-		outline-color: var(--dry-color-fill-brand, #3b82f6);
-	}
-
-	[data-carousel-thumbnails] button:focus-visible {
-		outline-color: var(--dry-color-focus-ring, var(--dry-color-fill-brand, #3b82f6));
-		opacity: 1;
-	}
 </style>