@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/Button.svelte

@@ -0,0 +1,132 @@
+<script module lang="ts">
+	/**
+	 * What .btn is made of, classified. The props follow the families the
+	 * project registers: a family's `.css.d.ts` narrows them to what it ships
+	 * (variants.ts, ADR 0015).
+	 *
+	 * AXES are mutually exclusive and named after what they impact. FLAGS are
+	 * independent booleans. PARTS are class names the component renders itself
+	 * and never exposes. The build fails if a .btn-* class in a family's CSS
+	 * appears in none of the three.
+	 */
+	export const PREFIX = 'btn';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
+		shape: ['square', 'circle'],
+		width: ['wide', 'block'],
+		/* The fill/border/text treatments. daisyUI ships them as flat
+		   combinations rather than as orthogonal axes — `dash` is `outline`
+		   plus a dashed border — so they are one axis, and `variant` is the
+		   name we keep for an exclusive group with no better one. */
+		variant: ['outline', 'dash', 'soft', 'ghost', 'link', 'classic', 'surface'],
+		/* sunflower only: the hard shadow is the family, so moving or removing
+		   it is its own axis and combines with everything above. */
+		shadow: ['none', 'reverse']
+	} as const;
+
+	export const FLAGS = {
+		active: 'Draw the button as if it were the current choice.'
+	} as const;
+	/* `ripple` is a part for now, not a flag: its prop carries behaviour (the
+	   waves), so it is written by hand below, and offered whether or not the
+	   family ships .btn-ripple. It leaves Button for an
+	   attachment later. */
+	export const PARTS = ['ripple', 'ripple-wave', 'disabled'] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	// `size` is ours — the HTML attribute of the same name is a character
+	// count our CSS overrides anyway. Any axis whose name collides with an
+	// attribute of the element we render must be Omitted like this, or renamed.
+	interface Props
+		extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>,
+			Omit<HTMLButtonAttributes & HTMLAnchorAttributes, 'size' | 'color' | 'onpointerdown'> {
+		/** Expanding wave from the pointer on press. */
+		ripple?: boolean;
+		/** Renders an <a> instead of a <button>. */
+		href?: string;
+		class?: string;
+		children?: Snippet;
+		/* Ours, because the ripple rides on it: the element may be a <button>
+		   or an <a>, so the inherited overloaded signature cannot type it. */
+		onpointerdown?: (event: PointerEvent & { currentTarget: EventTarget & HTMLElement }) => void;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name against the AXES block. That is what keeps this half of
+	// the file free of any axis by name — drop an axis up there and
+	// nothing down here has to know.
+	let {
+		ripple = false,
+		disabled = false,
+		href,
+		onpointerdown,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+
+	let classes = $derived(
+		cx(
+			PREFIX,
+			applied.classes,
+			ripple && `${PREFIX}-ripple`,
+			// An <a> cannot be disabled, so the class carries what the attribute
+			// would have: it is the only way the two states cannot drift apart.
+			href && disabled && `${PREFIX}-disabled`,
+			klass
+		)
+	);
+
+	// Live ripple waves; each renders a .btn-ripple-wave positioned at the
+	// press point and removed when its animation ends.
+	let waves = $state<{ id: number; x: number; y: number; size: number }[]>([]);
+	let waveId = 0;
+
+	function press(e: PointerEvent & { currentTarget: EventTarget & HTMLElement }) {
+		if (ripple) {
+			const rect = e.currentTarget.getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			const y = e.clientY - rect.top;
+			// Radius reaching the farthest corner, so the wave always covers it.
+			const r = 2 * Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));
+			waves.push({ id: waveId++, x, y, size: r });
+		}
+		onpointerdown?.(e);
+	}
+</script>
+
+{#snippet body()}
+	{@render children?.()}
+	{#each waves as wave (wave.id)}
+		<span
+			class={`${PREFIX}-ripple-wave`}
+			style="--ripple-x:{wave.x}px;--ripple-y:{wave.y}px;--ripple-size:{wave.size}px"
+			onanimationend={() => (waves = waves.filter((w) => w.id !== wave.id))}
+		></span>
+	{/each}
+{/snippet}
+
+{#if href}
+	<a
+		{...applied.rest}
+		href={disabled ? undefined : href}
+		class={classes}
+		aria-disabled={disabled ? 'true' : undefined}
+		onpointerdown={press}
+	>
+		{@render body()}
+	</a>
+{:else}
+	<button {...applied.rest} class={classes} {disabled} onpointerdown={press}>
+		{@render body()}
+	</button>
+{/if}

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

@@ -0,0 +1,40 @@
+/**
+ * What .btn is made of, classified. The props follow the families the
+ * project registers: a family's `.css.d.ts` narrows them to what it ships
+ * (variants.ts, ADR 0015).
+ *
+ * AXES are mutually exclusive and named after what they impact. FLAGS are
+ * independent booleans. PARTS are class names the component renders itself
+ * and never exposes. The build fails if a .btn-* class in a family's CSS
+ * appears in none of the three.
+ */
+export declare const PREFIX = "btn";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"];
+    readonly shape: readonly ["square", "circle"];
+    readonly width: readonly ["wide", "block"];
+    readonly variant: readonly ["outline", "dash", "soft", "ghost", "link", "classic", "surface"];
+    readonly shadow: readonly ["none", "reverse"];
+};
+export declare const FLAGS: {
+    readonly active: "Draw the button as if it were the current choice.";
+};
+export declare const PARTS: readonly ["ripple", "ripple-wave", "disabled"];
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLButtonAttributes & HTMLAnchorAttributes, 'size' | 'color' | 'onpointerdown'> {
+    /** Expanding wave from the pointer on press. */
+    ripple?: boolean;
+    /** Renders an <a> instead of a <button>. */
+    href?: string;
+    class?: string;
+    children?: Snippet;
+    onpointerdown?: (event: PointerEvent & {
+        currentTarget: EventTarget & HTMLElement;
+    }) => void;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Calendar.svelte

@@ -0,0 +1,193 @@
+<script module lang="ts">
+	/** What .calendar is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    `.calendar` is the only class we own. The calendar inside is drawn by
+	    air-datepicker (vendored, src/lib/vendor/air-datepicker), whose class
+	    names — `.air-datepicker-cell`, `.-selected-`… — are its own: a family
+	    styles them from under `.calendar`, it does not own them. */
+	export const PREFIX = 'calendar';
+
+	export const AXES = {
+		/* The selected day and the range. */
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A date picker, drawn by air-datepicker (https://air-datepicker.com).
+	 *
+	 * Inline by default: the calendar sits in the page. With `inline={false}`
+	 * it is a field (`.input`) that opens the calendar under it; the calendar
+	 * is then appended to this component's own `.calendar` element rather
+	 * than to <body>, so it stays under the class every family styles.
+	 *
+	 * `value` is a Date (or null) — an array of Dates with `range` or
+	 * `multiple`. Anything air-datepicker can do that has no prop here goes
+	 * through `options`, applied last.
+	 */
+	import { untrack } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import AirDatepicker from '../vendor/air-datepicker/index.js';
+	import type {
+		AirDatepickerLocale,
+		AirDatepickerOptions,
+		AirDatepickerViews,
+		AirDatepickerViewsSingle,
+		AirDatepickerButtonPresets
+	} from '../vendor/air-datepicker/index.js';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	type Value = Date | Date[] | null;
+
+	// `color` is ours — the HTML attribute of the same name is long obsolete.
+	interface Props
+		extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>,
+			Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+		/** The picked date, or dates with `range` / `multiple`. Bindable. */
+		value?: Value;
+		/** Pick a start and an end. */
+		range?: boolean;
+		/** Pick several dates — at most this many when a number. */
+		multiple?: boolean | number;
+		/** In the page (default), or as a field that opens it. */
+		inline?: boolean;
+		/** The field's placeholder and name, when not inline. */
+		placeholder?: string;
+		name?: string;
+		/** The field cannot be opened, when not inline. */
+		disabled?: boolean;
+		/** Bounds: dates outside cannot be picked. */
+		min?: Date;
+		max?: Date;
+		/** Month and day names. English unless given (see vendor/air-datepicker/locale). */
+		locale?: AirDatepickerLocale;
+		/** First day of the week: 0 Sunday … 6 Saturday. Defaults to the locale's. */
+		firstDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+		/** The view it opens on, and the finest one a pick can be made in. */
+		view?: AirDatepickerViews;
+		minView?: AirDatepickerViews;
+		/** Hours and minutes too. */
+		timepicker?: boolean;
+		/** Buttons under the calendar. */
+		buttons?: AirDatepickerButtonPresets[];
+		/** How a date is written in the field (air-datepicker tokens). */
+		dateFormat?: string;
+		/** Anything else air-datepicker accepts. Applied last. */
+		options?: AirDatepickerOptions<HTMLElement>;
+		/** Called with the new value after every pick. */
+		onChange?: (value: Value) => void;
+		/** The air-datepicker instance, for what no prop covers. Bindable. */
+		picker?: AirDatepicker<HTMLElement>;
+		class?: string;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		value = $bindable(null),
+		range = false,
+		multiple = false,
+		inline = true,
+		placeholder,
+		name,
+		disabled = false,
+		min,
+		max,
+		locale,
+		firstDay,
+		view = 'days',
+		minView = 'days',
+		timepicker = false,
+		buttons,
+		dateFormat,
+		options,
+		onChange,
+		picker = $bindable(),
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	let host: HTMLDivElement | undefined = $state();
+	let field: HTMLInputElement | undefined = $state();
+
+	const asList = (v: Value): Date[] => (v == null ? [] : Array.isArray(v) ? v : [v]);
+	const same = (a: Date[], b: Date[]) =>
+		a.length === b.length && a.every((d, i) => d.getTime() === b[i]!.getTime());
+
+	/** Everything air-datepicker is told, but the dates and the callback. */
+	let settings = $derived<AirDatepickerOptions<HTMLElement>>({
+		range,
+		multipleDates: multiple,
+		minDate: min,
+		maxDate: max,
+		...(locale ? { locale } : {}),
+		...(firstDay !== undefined ? { firstDay } : {}),
+		view,
+		minView,
+		timepicker,
+		...(buttons ? { buttons } : {}),
+		...(dateFormat ? { dateFormat } : {}),
+		// A popup closes on a pick when one date is all there is to pick.
+		autoClose: !range && !multiple && !timepicker,
+		position: 'bottom left',
+		...options
+	});
+
+	function picked({ date }: { date: Date | Date[] }) {
+		const next: Value = range || multiple ? asList(date as Value) : ((date as Date | undefined) ?? null);
+		if (same(asList(next), asList(value))) return;
+		value = next;
+		onChange?.(next);
+	}
+
+	// One instance per element: built when the element is there, rebuilt only
+	// when switching between inline and field.
+	$effect(() => {
+		const el = inline ? host : field;
+		if (!el || !host) return;
+		const instance = new AirDatepicker<HTMLElement>(el, {
+			...untrack(() => settings),
+			inline,
+			// The popup is placed against, and appended to, our own element.
+			container: inline ? undefined : host,
+			selectedDates: untrack(() => asList(value)),
+			onSelect: picked
+		});
+		picker = instance;
+		return () => {
+			instance.destroy();
+			picker = undefined;
+		};
+	});
+
+	// Settings changed: the instance takes them as they are.
+	$effect(() => {
+		const next = settings;
+		untrack(() => picker?.update(next, { silent: true }));
+	});
+
+	// The value changed from outside: select it, without echoing it back.
+	$effect(() => {
+		const wanted = asList(value);
+		untrack(() => {
+			if (!picker || same(wanted, picker.selectedDates)) return;
+			picker.clear({ silent: true });
+			if (wanted.length) picker.selectDate(wanted, { silent: true });
+		});
+	});
+</script>
+
+<div {...applied.rest} bind:this={host} class={classes}>
+	{#if !inline}
+		<input bind:this={field} class="input" {placeholder} {name} {disabled} readonly />
+	{/if}
+</div>

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

@@ -0,0 +1,60 @@
+/** What .calendar is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    `.calendar` is the only class we own. The calendar inside is drawn by
+    air-datepicker (vendored, src/lib/vendor/air-datepicker), whose class
+    names — `.air-datepicker-cell`, `.-selected-`… — are its own: a family
+    styles them from under `.calendar`, it does not own them. */
+export declare const PREFIX = "calendar";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+import type { HTMLAttributes } from 'svelte/elements';
+import AirDatepicker from '../vendor/air-datepicker/index.js';
+import type { AirDatepickerLocale, AirDatepickerOptions, AirDatepickerViews, AirDatepickerButtonPresets } from '../vendor/air-datepicker/index.js';
+import { type AxisProps } from '../variants.js';
+type Value = Date | Date[] | null;
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** The picked date, or dates with `range` / `multiple`. Bindable. */
+    value?: Value;
+    /** Pick a start and an end. */
+    range?: boolean;
+    /** Pick several dates — at most this many when a number. */
+    multiple?: boolean | number;
+    /** In the page (default), or as a field that opens it. */
+    inline?: boolean;
+    /** The field's placeholder and name, when not inline. */
+    placeholder?: string;
+    name?: string;
+    /** The field cannot be opened, when not inline. */
+    disabled?: boolean;
+    /** Bounds: dates outside cannot be picked. */
+    min?: Date;
+    max?: Date;
+    /** Month and day names. English unless given (see vendor/air-datepicker/locale). */
+    locale?: AirDatepickerLocale;
+    /** First day of the week: 0 Sunday … 6 Saturday. Defaults to the locale's. */
+    firstDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** The view it opens on, and the finest one a pick can be made in. */
+    view?: AirDatepickerViews;
+    minView?: AirDatepickerViews;
+    /** Hours and minutes too. */
+    timepicker?: boolean;
+    /** Buttons under the calendar. */
+    buttons?: AirDatepickerButtonPresets[];
+    /** How a date is written in the field (air-datepicker tokens). */
+    dateFormat?: string;
+    /** Anything else air-datepicker accepts. Applied last. */
+    options?: AirDatepickerOptions<HTMLElement>;
+    /** Called with the new value after every pick. */
+    onChange?: (value: Value) => void;
+    /** The air-datepicker instance, for what no prop covers. Bindable. */
+    picker?: AirDatepicker<HTMLElement>;
+    class?: string;
+}
+declare const Calendar: import("svelte").Component<Props, {}, "value" | "picker">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/Card.svelte

@@ -0,0 +1,69 @@
+<script module lang="ts">
+	/** What .card is made of, classified. */
+	export const PREFIX = 'card';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	/** `border` and `dash` are exclusive in practice but not by construction:
+	    a card with both simply takes the last rule, and neither is a look you
+	    reach for by accident. */
+	export const FLAGS = {
+		border: 'Draw an edge the family does not draw by default.',
+		dash: 'Draw that edge dashed.',
+		side: 'Put the figure beside the body instead of above it.',
+		'image-full': 'Let the figure fill the card, with the body laid over it.'
+	} as const;
+	export const PARTS = ['title', 'body', 'actions'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A box with, optionally, a title, a body and a row of actions.
+	 *
+	 * Every part is optional. A card with nothing but children is a card, and
+	 * that is the common case — which is why `body` wraps the children rather
+	 * than being a snippet you have to remember to pass.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	/* `title` is an HTML attribute too, and a tooltip is not a heading — so
+	   the DOM one is dropped rather than shadowed silently. */
+	interface Props
+		extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>,
+			Omit<HTMLAttributes<HTMLElement>, 'title'> {
+		title?: Snippet;
+		/** A row of buttons, at the end of the body. */
+		actions?: Snippet;
+		/** An image or anything else that spans the card, above the body. */
+		figure?: Snippet;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		actions,
+		figure,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<div class={classes} {...applied.rest}>
+	{#if figure}
+		<figure>{@render figure()}</figure>
+	{/if}
+	<div class="card-body">
+		{#if title}<h2 class="card-title">{@render title()}</h2>{/if}
+		{@render children?.()}
+		{#if actions}<div class="card-actions">{@render actions()}</div>{/if}
+	</div>
+</div>

package/dist/components/Card.svelte.d.ts

@@ -0,0 +1,37 @@
+/** What .card is made of, classified. */
+export declare const PREFIX = "card";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+/** `border` and `dash` are exclusive in practice but not by construction:
+    a card with both simply takes the last rule, and neither is a look you
+    reach for by accident. */
+export declare const FLAGS: {
+    readonly border: "Draw an edge the family does not draw by default.";
+    readonly dash: "Draw that edge dashed.";
+    readonly side: "Put the figure beside the body instead of above it.";
+    readonly 'image-full': "Let the figure fill the card, with the body laid over it.";
+};
+export declare const PARTS: readonly ["title", "body", "actions"];
+/**
+     * A box with, optionally, a title, a body and a row of actions.
+     *
+     * Every part is optional. A card with nothing but children is a card, and
+     * that is the common case — which is why `body` wraps the children rather
+     * than being a snippet you have to remember to pass.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: Snippet;
+    /** A row of buttons, at the end of the body. */
+    actions?: Snippet;
+    /** An image or anything else that spans the card, above the body. */
+    figure?: Snippet;
+    class?: string;
+    children?: Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;