@webamoki/web-svelte 0.1.1 → 0.3.1

package/dist/components/ui/choice/Choice.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	export interface ChoiceProps<V, K extends string | number | symbol>
+		extends ChoiceInternalProps<V, K> {
+		value?: V;
+		onChange?: (value: V) => void;
+	}
+</script>
+
+<script lang="ts" generics="V, K extends string | number | symbol">
+	import ChoiceInternal, {
+		type ChoiceInternalProps as ChoiceInternalProps
+	} from './ChoiceInternal.svelte';
+
+	let { value = $bindable(undefined), onChange, ...props }: ChoiceProps<V, K> = $props();
+
+	function handleItemClick(item: V) {
+		value = item;
+		// Trigger event
+		onChange?.(item);
+	}
+
+	function isActive(item: V) {
+		return value === item;
+	}
+</script>
+
+<ChoiceInternal {handleItemClick} {isActive} {...props} />

package/dist/components/ui/choice/Choice.svelte.d.ts

@@ -0,0 +1,29 @@
+export interface ChoiceProps<V, K extends string | number | symbol> extends ChoiceInternalProps<V, K> {
+    value?: V;
+    onChange?: (value: V) => void;
+}
+import { type ChoiceInternalProps as ChoiceInternalProps } from './ChoiceInternal.svelte';
+declare function $$render<V, K extends string | number | symbol>(): {
+    props: ChoiceProps<V, K>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V, K extends string | number | symbol> {
+    props(): ReturnType<typeof $$render<V, K>>['props'];
+    events(): ReturnType<typeof $$render<V, K>>['events'];
+    slots(): ReturnType<typeof $$render<V, K>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, K>['props']>, ReturnType<__sveltets_Render<V, K>['events']>, ReturnType<__sveltets_Render<V, K>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, K>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, K>['exports']>;
+    <V, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<V, K>['props']> & {}): ReturnType<__sveltets_Render<V, K>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const Choice: $$IsomorphicComponent;
+type Choice<V, K extends string | number | symbol> = InstanceType<typeof Choice<V, K>>;
+export default Choice;

package/dist/components/ui/choice/ChoiceInternal.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+	export interface ChoiceInternalProps<T, K extends string | number | symbol>
+		extends Partial<FormAttrs> {
+		items: readonly T[];
+		getKey: (item: T) => K;
+		getLabel: (item: T) => string;
+		vertical?: boolean;
+	}
+</script>
+
+<script lang="ts" generics="T, K extends string | number | symbol">
+	import type { FormAttrs } from '../../form/FieldWrapper.svelte';
+	import { cn } from '../../../shadcn/utils.js';
+
+	interface Props extends ChoiceInternalProps<T, K> {
+		handleItemClick: (item: T) => void;
+		isActive: (item: T) => boolean;
+	}
+
+	let {
+		items = [],
+		getKey,
+		getLabel,
+		vertical,
+		handleItemClick,
+		isActive,
+		disabled,
+		readonly,
+		'aria-invalid': ariaInvalid,
+		...control
+	}: Props = $props();
+</script>
+
+<div
+	{...control}
+	class={cn(
+		'w-fit rounded-lg border border-border bg-muted p-1 text-sm leading-[0.01em] font-semibold shadow-inner',
+		'grid gap-1',
+		vertical ? 'grid-flow-row auto-rows-fr' : 'auto-cols-fr grid-flow-col',
+		disabled || readonly ? 'pointer-events-none' : 'cursor-pointer',
+		disabled && 'opacity-50',
+		ariaInvalid && 'border-destructive'
+	)}
+>
+	{#each items as item (getKey(item))}
+		<button
+			type="button"
+			onclick={() => {
+				if (disabled || readonly) return;
+				handleItemClick(item);
+			}}
+			data-state={isActive(item) ? 'active' : 'inactive'}
+			class="h-8 cursor-pointer rounded-lg bg-transparent p-2 text-muted-foreground hover:text-foreground hover:outline-2 focus-visible:outline-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+			>{getLabel(item)}
+		</button>
+	{/each}
+</div>

package/dist/components/ui/choice/ChoiceInternal.svelte.d.ts

@@ -0,0 +1,34 @@
+export interface ChoiceInternalProps<T, K extends string | number | symbol> extends Partial<FormAttrs> {
+    items: readonly T[];
+    getKey: (item: T) => K;
+    getLabel: (item: T) => string;
+    vertical?: boolean;
+}
+import type { FormAttrs } from '../../form/FieldWrapper.svelte';
+declare function $$render<T, K extends string | number | symbol>(): {
+    props: ChoiceInternalProps<T, K> & {
+        handleItemClick: (item: T) => void;
+        isActive: (item: T) => boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T, K extends string | number | symbol> {
+    props(): ReturnType<typeof $$render<T, K>>['props'];
+    events(): ReturnType<typeof $$render<T, K>>['events'];
+    slots(): ReturnType<typeof $$render<T, K>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, K>['props']>, ReturnType<__sveltets_Render<T, K>['events']>, ReturnType<__sveltets_Render<T, K>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, K>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, K>['exports']>;
+    <T, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<T, K>['props']> & {}): ReturnType<__sveltets_Render<T, K>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ChoiceInternal: $$IsomorphicComponent;
+type ChoiceInternal<T, K extends string | number | symbol> = InstanceType<typeof ChoiceInternal<T, K>>;
+export default ChoiceInternal;

package/dist/components/ui/choice/ChoiceMulti.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	export interface ChoiceMultiProps<V, K extends string | number | symbol>
+		extends ChoiceInternalProps<V, K> {
+		value: V[];
+		onAdd?: (value: V) => void;
+		onRemove?: (value: V) => void;
+	}
+</script>
+
+<script lang="ts" generics="V, K extends string | number | symbol">
+	import ChoiceInternal, { type ChoiceInternalProps } from './ChoiceInternal.svelte';
+	import * as sorted from 'sorted-array-functions';
+
+	let {
+		value = $bindable([]),
+		onAdd,
+		onRemove,
+		items,
+		...props
+	}: ChoiceMultiProps<V, K> = $props();
+
+	const valueIndex = new Map<V, number>(items.map((item, index) => [item, index] as const));
+
+	function compareItems(a: V, b: V) {
+		const index1 = valueIndex.get(a);
+		if (index1 === undefined) return 1;
+		const index2 = valueIndex.get(b);
+		if (index2 === undefined) return -1;
+
+		return Math.sign(index1 - index2) as -1 | 0 | 1;
+	}
+
+	function contains(item: V) {
+		// Sorted contains function
+		return sorted.has(value, item, compareItems);
+	}
+
+	function handleItemClick(item: V) {
+		// Toggle add or remove
+		if (!contains(item)) {
+			sorted.add(value, item, compareItems);
+			// Trigger event
+			onAdd?.(item);
+		} else {
+			sorted.remove(value, item, compareItems);
+			// Trigger event
+			onRemove?.(item);
+		}
+
+		// Re-assign value to trigger state update
+		value = value;
+	}
+</script>
+
+<ChoiceInternal {handleItemClick} isActive={contains} {items} {...props} />

package/dist/components/ui/choice/ChoiceMulti.svelte.d.ts

@@ -0,0 +1,30 @@
+export interface ChoiceMultiProps<V, K extends string | number | symbol> extends ChoiceInternalProps<V, K> {
+    value: V[];
+    onAdd?: (value: V) => void;
+    onRemove?: (value: V) => void;
+}
+import { type ChoiceInternalProps } from './ChoiceInternal.svelte';
+declare function $$render<V, K extends string | number | symbol>(): {
+    props: ChoiceMultiProps<V, K>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V, K extends string | number | symbol> {
+    props(): ReturnType<typeof $$render<V, K>>['props'];
+    events(): ReturnType<typeof $$render<V, K>>['events'];
+    slots(): ReturnType<typeof $$render<V, K>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, K>['props']>, ReturnType<__sveltets_Render<V, K>['events']>, ReturnType<__sveltets_Render<V, K>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, K>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, K>['exports']>;
+    <V, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<V, K>['props']> & {}): ReturnType<__sveltets_Render<V, K>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ChoiceMulti: $$IsomorphicComponent;
+type ChoiceMulti<V, K extends string | number | symbol> = InstanceType<typeof ChoiceMulti<V, K>>;
+export default ChoiceMulti;

package/dist/components/ui/choice/WeekdayChoice.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+	export interface WeekdayChoiceProps {
+		value?: Day;
+		onChange?: (value: Day) => void;
+		vertical?: boolean;
+		longLabels?: boolean;
+		letterLabels?: boolean;
+		disabled?: boolean | null;
+		readonly?: boolean | null;
+	}
+</script>
+
+<script lang="ts">
+	import { Days, formatDayLetter, formatDayShort, type Day } from '../../../utils/index.js';
+	import { identity } from 'ramda';
+
+	import Choice from './Choice.svelte';
+
+	let { value = $bindable(undefined), ...props }: WeekdayChoiceProps = $props();
+
+	let getLabel = $derived.by(() => {
+		if (props.longLabels) return identity;
+		if (props.letterLabels) return formatDayLetter;
+		return formatDayShort;
+	});
+</script>
+
+<Choice items={Days} bind:value {getLabel} getKey={identity} {...props} />

package/dist/components/ui/choice/WeekdayChoice.svelte.d.ts

@@ -0,0 +1,13 @@
+export interface WeekdayChoiceProps {
+    value?: Day;
+    onChange?: (value: Day) => void;
+    vertical?: boolean;
+    longLabels?: boolean;
+    letterLabels?: boolean;
+    disabled?: boolean | null;
+    readonly?: boolean | null;
+}
+import { type Day } from '../../../utils/index.js';
+declare const WeekdayChoice: import("svelte").Component<WeekdayChoiceProps, {}, "value">;
+type WeekdayChoice = ReturnType<typeof WeekdayChoice>;
+export default WeekdayChoice;

package/dist/components/ui/choice/WeekdayChoiceMulti.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+	import { identity } from 'ramda';
+
+	export interface WeekdayChoiceMultiProps {
+		value: Day[];
+		onAdd?: (value: Day) => void;
+		onRemove?: (value: Day) => void;
+		vertical?: boolean;
+		longLabels?: boolean;
+		letterLabels?: boolean;
+		disabled?: boolean | null;
+		readonly?: boolean | null;
+	}
+</script>
+
+<script lang="ts">
+	import ChoiceMulti from './ChoiceMulti.svelte';
+	import { Days, formatDayLetter, formatDayShort, type Day } from '../../../utils/index.js';
+
+	let { value = $bindable([]), ...props }: WeekdayChoiceMultiProps = $props();
+
+	let getLabel = $derived.by(() => {
+		if (props.longLabels) return identity;
+		if (props.letterLabels) return formatDayLetter;
+		return formatDayShort;
+	});
+</script>
+
+<ChoiceMulti items={Days} bind:value {getLabel} getKey={identity} {...props} />

package/dist/components/ui/choice/WeekdayChoiceMulti.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface WeekdayChoiceMultiProps {
+    value: Day[];
+    onAdd?: (value: Day) => void;
+    onRemove?: (value: Day) => void;
+    vertical?: boolean;
+    longLabels?: boolean;
+    letterLabels?: boolean;
+    disabled?: boolean | null;
+    readonly?: boolean | null;
+}
+import { type Day } from '../../../utils/index.js';
+declare const WeekdayChoiceMulti: import("svelte").Component<WeekdayChoiceMultiProps, {}, "value">;
+type WeekdayChoiceMulti = ReturnType<typeof WeekdayChoiceMulti>;
+export default WeekdayChoiceMulti;

package/dist/highlight.d.ts

@@ -0,0 +1 @@
+export declare function highlight(code: string, lang?: string, theme?: string): Promise<string>;

package/dist/highlight.js

@@ -0,0 +1,9 @@
+import { bundledLanguages, bundledThemes, createHighlighter } from 'shiki';
+const highlighterPromise = createHighlighter({
+    themes: Object.keys(bundledThemes), // all bundled themes
+    langs: Object.keys(bundledLanguages) // all bundled languages
+});
+export async function highlight(code, lang = 'svelte', theme = 'nord') {
+    const highlighter = await highlighterPromise;
+    return highlighter.codeToHtml(code, { lang, theme });
+}

package/dist/utils/datetime/index.d.ts

@@ -0,0 +1,168 @@
+import { CalendarDate, Time, ZonedDateTime, type DateDuration } from '@internationalized/date';
+export declare const Days: readonly ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+export type Day = (typeof Days)[number];
+export declare const Day: import("arktype/internal/methods/string.ts").StringType<"Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday", {}>;
+/**
+ * Gets the day of the week for a given date.
+ * @param date - The date to get the day of the week for.
+ * @returns The day of the week
+ */
+export declare function getDayOfDate(date: CalendarDate): Day;
+/**
+ * Checks if a given date is a specific day of the week.
+ * @param date - The date to check.
+ * @param dayOfWeek - The day of the week to check against.
+ * @returns True if the date is the specified day, false otherwise.
+ */
+export declare function isDateDay(date: CalendarDate, dayOfWeek: Day): boolean;
+/**
+ * Checks if a given date is today.
+ * @param date - The date to check.
+ * @returns True if the date is today, false otherwise.
+ */
+export declare function isDateToday(date: CalendarDate, timezone: string): boolean;
+/**
+ * Calculates the age from a date of birth.
+ * @param dob - The date of birth.
+ * @returns The age in years.
+ * @throws Error if the date of birth is in the future.
+ */
+export declare function ageFromDob(dob: CalendarDate, timezone: string): number;
+/**
+ * Gets the date of the next occurrence of a day of the week.
+ * @param dayOfWeek - The day of the week to get the next occurrence for.
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The date of the next occurrence of the specified day.
+ */
+export declare function getNextDateOfDay(dayOfWeek: Day, startDate: CalendarDate): CalendarDate;
+/**
+ * Gets the most recent occurrence of a day of the week.
+ * @param dayOfWeek - The day of the week
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The most recent date for the specified day.
+ * @throws An error if the day of the week is invalid.
+ */
+export declare function getLastDateOfDay(dayOfWeek: Day, startDate: CalendarDate): CalendarDate;
+/**
+ * Gets an array of the last dates of the day of the week.
+ * @param dayOfWeek - The day of the week.
+ * @param count - The number of dates to get.
+ * @param startDate - The date to check from. Inclusive.
+ * @returns The array of dates from oldest to most recent.
+ * @throws An error if the day of the week is invalid.
+ */
+export declare function getLastDatesOfDay(dayOfWeek: Day, count: number, startDate: CalendarDate): CalendarDate[];
+/**
+ * Gets an array of dates of the last few months (first day) from a date.
+ * @param count - The number of months to get.
+ * @param startDate - The date to start from (defaults to today).
+ * @returns The array of dates from oldest to most recent.
+ */
+export declare function getLastMonths(count: number, startDate: CalendarDate): CalendarDate[];
+/**
+ * Checks if two time ranges overlap, boundaries are not considered overlapping.
+ * @param start1 - The start time of the first range.
+ * @param end1 - The end time of the first range.
+ * @param start2 - The start time of the second range.
+ * @param end2 - The end time of the second range.
+ * @returns True if the ranges overlap, false otherwise.
+ */
+export declare function checkOverlap(start1: Time, end1: Time, start2: Time, end2: Time): boolean;
+/**
+ * Determines if the given dates are within the given duration of each other.
+ * @param date1 - The first date in order.
+ * @param date2 - The second date in order.
+ * @param duration - The duration to check against. Inclusive of boundaries.
+ * @returns True if the dates are within duration, false otherwise.
+ */
+export declare function datesWithin(date1: CalendarDate, date2: CalendarDate, duration: DateDuration): boolean;
+/**
+ * Calculates the difference in weeks between two dates.
+ * @param date1 - The first date in order.
+ * @param date2 - The second date in order.
+ */
+export declare function dateDiffWeeks(date1: CalendarDate, date2: CalendarDate): number;
+/**
+ * Formats a day of the week.
+ * @param day - The day of the week to format.
+ * @example "Monday" -> "Mon"
+ * @returns Formatted string of the day of the week.
+ */
+export declare function formatDayShort(day: Day): string;
+/**
+ * Formats a day of the week.
+ * @param day - The day of the week to format.
+ * @example "Monday" -> "M"
+ * @returns Formatted letter of the day of the week.
+ */
+export declare function formatDayLetter(day: Day): string;
+/**
+ * @param date The CalendarDate object to format.
+ * @returns string of date in shortened format
+ * @example "Oct 5"
+ */
+export declare function formatDateShort(date: CalendarDate): string;
+/**
+ * @param date The CalendarDate object to format.
+ * @returns The formatted date string.
+ * @example "5 Oct 2023"
+ */
+export declare function formatDateFull(date: CalendarDate): string;
+/**
+ * ISO format
+ * @param date The CalendarDate object to format.
+ * @returns The formatted date string in YYYY-MM-DD format.
+ * @example "2023-10-05"
+ */
+export declare function formatDateISO(date: CalendarDate): string;
+/**
+ * @param date The CalendarDate object to format.
+ * @returns The formatted date string in dd/mm/yyyy format.
+ * @example "05/10/2023"
+ */
+export declare function formatDateNum(date: CalendarDate): string;
+/**
+ * Formats the month only.
+ * @param date - The date to format.
+ * @returns The formatted month string.
+ * @example "Oct"
+ */
+export declare function formatMonth(date: CalendarDate): string;
+/**
+ * Gives time in HH:MM format
+ * @param time
+ * @returns string of time in that format
+ */
+export declare function formatTimeShort(time: Time): string;
+/**
+ * Gives time in HH:MM:SS format
+ * @param time
+ * @returns string of time in that format
+ */
+export declare function formatTimeFull(time: Time): string;
+/**
+ * Calculates the end time given a starting time and duration.
+ * @param timeStart starting time
+ * @param durationMinutes duration in minutes
+ * @returns end time in HH:MM format
+ */
+export declare function formatTimeEnd(timeStart: Time, durationMinutes: number): string;
+/**
+ * Formats a full date and time.
+ * @param datetime The ZonedDateTime object to format.
+ * @returns The formatted date and time string.
+ * @example "05/10/2023 14:30:00"
+ */
+export declare function formatAbsolute(datetime: ZonedDateTime): string;
+/**
+ * Unfreezes a CalendarDate object from a snapshot.
+ * @param raw - The snapshot of the CalendarDate object.
+ * @returns The unfrozen CalendarDate object.
+ */
+export declare function unfreezeDate(raw: $state.Snapshot<CalendarDate>): CalendarDate;
+/**
+ * Unfreezes a Time object from a snapshot.
+ * @param raw - The snapshot of the Time object.
+ * @returns The unfrozen Time object.
+ */
+export declare function unfreezeTime(raw: $state.Snapshot<Time>): Time;