@dryui/ui 0.0.1

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+	orientation?: 'horizontal' | 'vertical';
+	loop?: boolean;
+	autoplay?: number | false;
+	children: Snippet;
+}
+declare const CarouselRoot: import('svelte').Component<Props, {}, ''>;
+type CarouselRoot = ReturnType<typeof CarouselRoot>;
+export default CarouselRoot;

package/dist/carousel/carousel-slide.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getCarouselCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+	const ctx = getCarouselCtx();
+	const index = ctx.registerSlide();
+
+	$effect(() => {
+		return () => ctx.unregisterSlide();
+	});
+</script>
+
+<div
+	role="group"
+	aria-roledescription="slide"
+	aria-label="Slide {index + 1} of {ctx.totalSlides}"
+	data-carousel-slide=""
+	data-active={ctx.activeIndex === index ? '' : undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-carousel-slide] {
+		scroll-snap-align: start;
+	}
+</style>

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

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

package/dist/carousel/carousel-thumbnails.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getCarouselCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+		position?: 'bottom' | 'left' | 'right';
+		children: Snippet<[{ index: number; isActive: boolean; scrollTo: (index: number) => void }]>;
+	}
+
+	let { position = 'bottom', class: className, children, ...rest }: Props = $props();
+	const ctx = getCarouselCtx();
+</script>
+
+<div
+	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
+			type="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)}
+		>
+			{@render children({ index: i, isActive: ctx.activeIndex === i, scrollTo: ctx.scrollTo })}
+		</button>
+	{/each}
+</div>
+
+<style>
+	[data-carousel-thumbnails] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		gap: var(--dry-space-2, 0.5rem);
+		padding: var(--dry-space-2, 0.5rem) 0;
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+
+	[data-carousel-thumbnails]::-webkit-scrollbar {
+		display: none;
+	}
+
+	[data-carousel-thumbnails][data-position='bottom'] {
+		justify-self: center;
+	}
+
+	[data-carousel-thumbnails][data-position='left'],
+	[data-carousel-thumbnails][data-position='right'] {
+		grid-auto-flow: row;
+		grid-auto-columns: unset;
+		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>

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

@@ -0,0 +1,9 @@
+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/carousel/carousel-viewport.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getCarouselCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+	const ctx = getCarouselCtx();
+	let el: HTMLDivElement;
+
+	$effect(() => {
+		if (el) {
+			ctx.registerViewport(el);
+
+			const observer = new IntersectionObserver(
+				(entries) => {
+					for (const entry of entries) {
+						if (entry.isIntersecting) {
+							const index = Array.from(el.children).indexOf(entry.target as HTMLElement);
+							if (index >= 0) ctx.syncActiveIndex(index);
+						}
+					}
+				},
+				{ root: el, threshold: 0.5 }
+			);
+
+			for (const child of el.children) observer.observe(child);
+			return () => observer.disconnect();
+		}
+	});
+</script>
+
+<div
+	bind:this={el}
+	data-carousel-viewport=""
+	data-orientation={ctx.orientation}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-carousel-viewport] {
+		--dry-carousel-slide-size: 100%;
+
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: minmax(0, var(--dry-carousel-slide-size));
+		overflow: auto;
+		scroll-snap-type: x mandatory;
+		gap: var(--dry-carousel-gap);
+		scrollbar-width: none;
+	}
+
+	[data-carousel-viewport]::-webkit-scrollbar {
+		display: none;
+	}
+
+	[data-carousel-viewport][data-orientation='vertical'] {
+		grid-auto-flow: row;
+		grid-auto-columns: unset;
+		grid-auto-rows: var(--dry-carousel-slide-size);
+		overflow: hidden auto;
+		scroll-snap-type: y mandatory;
+		height: 100%;
+	}
+</style>

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

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

package/dist/carousel/context.svelte.d.ts

@@ -0,0 +1,16 @@
+interface CarouselContext {
+    readonly activeIndex: number;
+    readonly totalSlides: number;
+    readonly orientation: 'horizontal' | 'vertical';
+    readonly canScrollPrev: boolean;
+    readonly canScrollNext: boolean;
+    scrollTo: (index: number) => void;
+    syncActiveIndex: (index: number) => void;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    registerViewport: (el: HTMLElement) => void;
+    registerSlide: () => number;
+    unregisterSlide: () => void;
+}
+export declare const setCarouselCtx: (ctx: CarouselContext) => CarouselContext, getCarouselCtx: () => CarouselContext;
+export {};

package/dist/carousel/context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '@dryui/primitives';
+export const [setCarouselCtx, getCarouselCtx] = createContext('carousel');

package/dist/carousel/index.d.ts

@@ -0,0 +1,25 @@
+export type {
+	CarouselRootProps,
+	CarouselViewportProps,
+	CarouselSlideProps,
+	CarouselPrevProps,
+	CarouselNextProps,
+	CarouselDotsProps,
+	CarouselThumbnailsProps
+} from '@dryui/primitives';
+import CarouselRoot from './carousel-root.svelte';
+import CarouselViewport from './carousel-viewport.svelte';
+import CarouselSlide from './carousel-slide.svelte';
+import CarouselPrev from './carousel-prev.svelte';
+import CarouselNext from './carousel-next.svelte';
+import CarouselDots from './carousel-dots.svelte';
+import CarouselThumbnails from './carousel-thumbnails.svelte';
+export declare const Carousel: {
+	Root: typeof CarouselRoot;
+	Viewport: typeof CarouselViewport;
+	Slide: typeof CarouselSlide;
+	Prev: typeof CarouselPrev;
+	Next: typeof CarouselNext;
+	Dots: typeof CarouselDots;
+	Thumbnails: typeof CarouselThumbnails;
+};

package/dist/carousel/index.js

@@ -0,0 +1,16 @@
+import CarouselRoot from './carousel-root.svelte';
+import CarouselViewport from './carousel-viewport.svelte';
+import CarouselSlide from './carousel-slide.svelte';
+import CarouselPrev from './carousel-prev.svelte';
+import CarouselNext from './carousel-next.svelte';
+import CarouselDots from './carousel-dots.svelte';
+import CarouselThumbnails from './carousel-thumbnails.svelte';
+export const Carousel = {
+    Root: CarouselRoot,
+    Viewport: CarouselViewport,
+    Slide: CarouselSlide,
+    Prev: CarouselPrev,
+    Next: CarouselNext,
+    Dots: CarouselDots,
+    Thumbnails: CarouselThumbnails
+};

package/dist/chart/chart-area.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import { getChartCtx } from './context.svelte.js';
+
+	interface Props extends SVGAttributes<SVGGElement> {
+		strokeWidth?: number;
+		showDots?: boolean;
+		dotRadius?: number;
+		color?: string;
+	}
+
+	let {
+		strokeWidth = 2,
+		showDots = false,
+		dotRadius = 3,
+		color = 'currentColor',
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const ctx = getChartCtx();
+
+	const chartWidth = $derived(ctx.width - ctx.padding.left - ctx.padding.right);
+	const chartHeight = $derived(ctx.height - ctx.padding.top - ctx.padding.bottom);
+	const valueRange = $derived(ctx.maxValue - ctx.minValue || 1);
+
+	const points = $derived(
+		ctx.data.map((point, i) => {
+			const x = ctx.padding.left + (i / Math.max(ctx.data.length - 1, 1)) * chartWidth;
+			const y =
+				ctx.padding.top + chartHeight - ((point.value - ctx.minValue) / valueRange) * chartHeight;
+			return { x, y, point };
+		})
+	);
+
+	const lineD = $derived(points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' '));
+
+	const baseline = $derived(ctx.padding.top + chartHeight);
+
+	const areaD = $derived(
+		lineD +
+			` L ${points[points.length - 1]?.x ?? 0} ${baseline}` +
+			` L ${points[0]?.x ?? 0} ${baseline} Z`
+	);
+</script>
+
+<g role="list" aria-label="Area chart data" data-chart-area class={className} {...rest}>
+	<path d={areaD} fill={color} stroke="none" data-part="area-fill" />
+	<path
+		d={lineD}
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		data-part="area-line"
+	/>
+	{#if showDots}
+		{#each points as p}
+			<circle
+				cx={p.x}
+				cy={p.y}
+				r={dotRadius}
+				fill={p.point.color ?? color}
+				role="listitem"
+				aria-label="{p.point.label}: {p.point.value}"
+			/>
+		{/each}
+	{/if}
+</g>
+
+<style>
+	[data-chart-area] {
+		color: var(--dry-chart-line-color);
+	}
+</style>

package/dist/chart/chart-area.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SVGAttributes } from 'svelte/elements';
+interface Props extends SVGAttributes<SVGGElement> {
+	strokeWidth?: number;
+	showDots?: boolean;
+	dotRadius?: number;
+	color?: string;
+}
+declare const ChartArea: import('svelte').Component<Props, {}, ''>;
+type ChartArea = ReturnType<typeof ChartArea>;
+export default ChartArea;

package/dist/chart/chart-bars.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import { getChartCtx } from './context.svelte.js';
+
+	interface Props extends Omit<SVGAttributes<SVGGElement>, 'onclick'> {
+		radius?: number;
+		onclick?: (event: { label: string; value: number; index: number }) => void;
+	}
+
+	let { radius = 2, onclick, class: className, ...rest }: Props = $props();
+
+	const ctx = getChartCtx();
+	ctx.hasBars = true;
+
+	const chartWidth = $derived(ctx.width - ctx.padding.left - ctx.padding.right);
+	const chartHeight = $derived(ctx.height - ctx.padding.top - ctx.padding.bottom);
+	const valueRange = $derived(ctx.maxValue - ctx.minValue || 1);
+
+	const bars = $derived(
+		ctx.data.map((point, i) => {
+			const barWidth = (chartWidth / ctx.data.length) * 0.7;
+			const gap = (chartWidth / ctx.data.length) * 0.3;
+			const x = ctx.padding.left + i * (barWidth + gap) + gap / 2;
+			const barHeight = (point.value / valueRange) * chartHeight;
+			const y = ctx.padding.top + chartHeight - barHeight;
+
+			return { x, y, width: barWidth, height: Math.max(0, barHeight), point, index: i };
+		})
+	);
+
+	function handleClick(bar: (typeof bars)[number]) {
+		onclick?.({ label: bar.point.label, value: bar.point.value, index: bar.index });
+	}
+</script>
+
+<g role="list" aria-label="Bar chart data" data-chart-bars class={className} {...rest}>
+	{#each bars as bar}
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<rect
+			x={bar.x}
+			y={bar.y}
+			width={bar.width}
+			height={bar.height}
+			rx={radius}
+			fill={bar.point.color ?? 'currentColor'}
+			role={onclick ? 'button' : 'listitem'}
+			tabindex={onclick ? 0 : undefined}
+			aria-label="{bar.point.label}: {bar.point.value}"
+			data-part="bar"
+			data-clickable={onclick ? '' : undefined}
+			onclick={onclick ? () => handleClick(bar) : undefined}
+			onkeydown={onclick
+				? (e: KeyboardEvent) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.preventDefault();
+							handleClick(bar);
+						}
+					}
+				: undefined}
+		/>
+	{/each}
+</g>
+
+<style>
+	[data-chart-bars] {
+		color: var(--dry-chart-bar-color);
+	}
+</style>

package/dist/chart/chart-bars.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SVGAttributes } from 'svelte/elements';
+interface Props extends Omit<SVGAttributes<SVGGElement>, 'onclick'> {
+	radius?: number;
+	onclick?: (event: { label: string; value: number; index: number }) => void;
+}
+declare const ChartBars: import('svelte').Component<Props, {}, ''>;
+type ChartBars = ReturnType<typeof ChartBars>;
+export default ChartBars;

package/dist/chart/chart-donut.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SVGAttributes } from 'svelte/elements';
+	import { getChartCtx } from './context.svelte.js';
+
+	interface Props extends Omit<SVGAttributes<SVGGElement>, 'onclick'> {
+		innerRadius?: number;
+		outerRadius?: number;
+		label?: Snippet<[{ total: number }]>;
+		onclick?: (event: { label: string; value: number; index: number }) => void;
+	}
+
+	let {
+		innerRadius = 60,
+		outerRadius = 80,
+		label,
+		onclick,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const ctx = getChartCtx();
+
+	const cx = $derived(ctx.width / 2);
+	const cy = $derived(ctx.height / 2);
+	const radius = $derived((innerRadius + outerRadius) / 2);
+	const strokeW = $derived(outerRadius - innerRadius);
+	const circumference = $derived(2 * Math.PI * radius);
+
+	const segments = $derived(
+		(() => {
+			const total = ctx.total || 1;
+			let cumulative = 0;
+			return ctx.data.map((point, i) => {
+				const fraction = point.value / total;
+				const dashLength = fraction * circumference;
+				const offset = -(cumulative / total) * circumference;
+				cumulative += point.value;
+				return {
+					dasharray: `${dashLength} ${circumference - dashLength}`,
+					dashoffset: offset,
+					color: point.color ?? 'currentColor',
+					point,
+					index: i
+				};
+			});
+		})()
+	);
+
+	function handleClick(seg: (typeof segments)[number]) {
+		onclick?.({ label: seg.point.label, value: seg.point.value, index: seg.index });
+	}
+</script>
+
+<g role="list" aria-label="Donut chart data" data-chart-donut class={className} {...rest}>
+	{#each segments as seg}
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<circle
+			{cx}
+			{cy}
+			r={radius}
+			fill="none"
+			stroke={seg.color}
+			stroke-width={strokeW}
+			stroke-dasharray={seg.dasharray}
+			stroke-dashoffset={seg.dashoffset}
+			transform="rotate(-90 {cx} {cy})"
+			role={onclick ? 'button' : 'listitem'}
+			tabindex={onclick ? 0 : undefined}
+			aria-label="{seg.point.label}: {seg.point.value}"
+			data-part="donut-segment"
+			data-clickable={onclick ? '' : undefined}
+			onclick={onclick ? () => handleClick(seg) : undefined}
+			onkeydown={onclick
+				? (e: KeyboardEvent) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.preventDefault();
+							handleClick(seg);
+						}
+					}
+				: undefined}
+		/>
+	{/each}
+	{#if label}
+		<foreignObject
+			x={cx - innerRadius}
+			y={cy - innerRadius}
+			width={innerRadius * 2}
+			height={innerRadius * 2}
+		>
+			<div data-chart-donut-label data-part="donut-label">
+				{@render label({ total: ctx.total })}
+			</div>
+		</foreignObject>
+	{/if}
+</g>
+
+<style>
+	[data-chart-donut] {
+		color: var(--dry-chart-bar-color);
+	}
+
+	[data-chart-donut-label] {
+		display: grid;
+		place-items: center;
+		height: 100%;
+	}
+</style>

package/dist/chart/chart-donut.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+interface Props extends Omit<SVGAttributes<SVGGElement>, 'onclick'> {
+	innerRadius?: number;
+	outerRadius?: number;
+	label?: Snippet<[{ total: number }]>;
+	onclick?: (event: { label: string; value: number; index: number }) => void;
+}
+declare const ChartDonut: import('svelte').Component<Props, {}, ''>;
+type ChartDonut = ReturnType<typeof ChartDonut>;
+export default ChartDonut;

package/dist/chart/chart-horizontal-bar.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import { getChartCtx } from './context.svelte.js';
+
+	interface Props extends SVGAttributes<SVGGElement> {
+		radius?: number;
+	}
+
+	let { radius = 2, class: className, ...rest }: Props = $props();
+
+	const ctx = getChartCtx();
+	ctx.hasHorizontalBars = true;
+
+	const chartWidth = $derived(ctx.width - ctx.padding.left - ctx.padding.right);
+	const chartHeight = $derived(ctx.height - ctx.padding.top - ctx.padding.bottom);
+	const valueRange = $derived(ctx.maxValue - ctx.minValue || 1);
+
+	const bars = $derived(
+		ctx.data.map((point, i) => {
+			const barHeight = (chartHeight / ctx.data.length) * 0.7;
+			const gap = (chartHeight / ctx.data.length) * 0.3;
+			const y = ctx.padding.top + i * (barHeight + gap) + gap / 2;
+			const barWidth = ((point.value - ctx.minValue) / valueRange) * chartWidth;
+			const x = ctx.padding.left;
+
+			return { x, y, width: Math.max(0, barWidth), height: barHeight, point };
+		})
+	);
+</script>
+
+<g
+	role="list"
+	aria-label="Horizontal bar chart data"
+	data-chart-horizontal-bar
+	class={className}
+	{...rest}
+>
+	{#each bars as bar}
+		<rect
+			x={bar.x}
+			y={bar.y}
+			width={bar.width}
+			height={bar.height}
+			rx={radius}
+			fill={bar.point.color ?? 'currentColor'}
+			role="listitem"
+			aria-label="{bar.point.label}: {bar.point.value}"
+			data-part="horizontal-bar"
+		/>
+		<text
+			x={bar.x - 8}
+			y={bar.y + bar.height / 2 + 4}
+			text-anchor="end"
+			font-size="11"
+			fill="currentColor"
+			opacity="0.6"
+		>
+			{bar.point.label}
+		</text>
+	{/each}
+</g>
+
+<style>
+	[data-chart-horizontal-bar] {
+		color: var(--dry-chart-bar-color);
+	}
+</style>

package/dist/chart/chart-horizontal-bar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SVGAttributes } from 'svelte/elements';
+interface Props extends SVGAttributes<SVGGElement> {
+	radius?: number;
+}
+declare const ChartHorizontalBar: import('svelte').Component<Props, {}, ''>;
+type ChartHorizontalBar = ReturnType<typeof ChartHorizontalBar>;
+export default ChartHorizontalBar;