@websline/system-components 1.4.4 → 1.4.6

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

@@ -0,0 +1,42 @@
+export default Calendar;
+type Calendar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Omit<CalendarRootPropsWithoutHTML, "disabled" | "disableDaysOutsideMonth" | "isDateDisabled" | "numberOfMonths" | "pagedNavigation" | "weekStartsOn"> & Props>): void;
+};
+declare const Calendar: import("svelte").Component<Omit<import("bits-ui").CalendarRootPropsWithoutHTML, "disabled" | "disableDaysOutsideMonth" | "isDateDisabled" | "numberOfMonths" | "pagedNavigation" | "weekStartsOn"> & {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether to show the header or not
+     */
+    hideHeader?: boolean;
+    /**
+     * The maximum of months to display side by side
+     */
+    maxMonths?: number;
+}, {}, "value" | "ref">;
+import { Calendar } from "bits-ui";
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether to show the header or not
+     */
+    hideHeader?: boolean;
+    /**
+     * The maximum of months to display side by side
+     */
+    maxMonths?: number;
+};

package/dist/components/molecules/calendar/Container.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { Calendar } from "bits-ui";
+	import { getContext } from "svelte";
+	import { calendarVariants } from "./calendar.variant.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 */
+
+	/** @type {Props} */
+	let { children, class: className = "", ...rest } = $props();
+
+	let ctx = $derived.by(getContext("calendar-root-store"));
+	let styles = $derived(calendarVariants());
+</script>
+
+<div class={styles.gridWrapper({ class: className })} {...rest}>
+	{#each ctx.months as month, i (i)}
+		<Calendar.Grid class={styles.grid()}>
+			{@render children?.({ month })}
+		</Calendar.Grid>
+	{/each}
+</div>

package/dist/components/molecules/calendar/Container.svelte.d.ts

@@ -0,0 +1,25 @@
+export default Container;
+type Container = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Container: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+};

package/dist/components/molecules/calendar/DayCell.svelte

@@ -0,0 +1,47 @@
+<script>
+	import { Calendar } from "bits-ui";
+	import { getContext } from "svelte";
+	import { calendarVariants } from "./calendar.variant.js";
+
+	/**
+	 * @typedef {import("bits-ui").CalendarCellPropsWithoutHTML} CalendarCellPropsWithoutHTML
+	 *
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 */
+
+	/** @type {CalendarCellPropsWithoutHTML & Props} */
+	let { children, class: className = "", date, month, ...rest } = $props();
+
+	let ctx = $derived.by(getContext("calendar-root-store"));
+	let styles = $derived(calendarVariants());
+
+	const handleHover = () => {
+		ctx.hoverValue = date;
+	};
+
+	const handleLeave = () => {
+		const hoverValue = ctx.hoverValue;
+		setTimeout(() => {
+			if (hoverValue !== ctx.hoverValue) return;
+			ctx.hoverValue = null;
+		}, 150);
+	};
+</script>
+
+<Calendar.Cell
+	class={styles.dateCell({ class: className })}
+	{date}
+	month={month.value}
+	onmouseenter={handleHover}
+	onmouseleave={handleLeave}
+	{...rest}>
+	<Calendar.Day class={styles.dateDay()}>
+		{#if children}
+			{@render children()}
+		{:else}
+			{date.day}
+		{/if}
+	</Calendar.Day>
+</Calendar.Cell>

package/dist/components/molecules/calendar/RootContext.svelte

@@ -0,0 +1,28 @@
+<script>
+	// NOTE: this is an internal component to pass the props as context
+	import { setContext } from "svelte";
+
+	let {
+		children,
+		hoverValue = $bindable(),
+		maxDays,
+		months,
+		value,
+		weekdays,
+	} = $props();
+
+	setContext("calendar-root-store", () => ({
+		maxDays,
+		months,
+		value,
+		weekdays,
+		get hoverValue() {
+			return hoverValue;
+		},
+		set hoverValue(value) {
+			hoverValue = value;
+		},
+	}));
+</script>
+
+{@render children?.()}

package/dist/components/molecules/calendar/RootContext.svelte.d.ts

@@ -0,0 +1,21 @@
+export default RootContext;
+type RootContext = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const RootContext: import("svelte").Component<{
+    children: any;
+    hoverValue?: any;
+    maxDays: any;
+    months: any;
+    value: any;
+    weekdays: any;
+}, {}, "hoverValue">;
+type $$ComponentProps = {
+    children: any;
+    hoverValue?: any;
+    maxDays: any;
+    months: any;
+    value: any;
+    weekdays: any;
+};

package/dist/components/molecules/calendar/WeekRow.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { Calendar } from "bits-ui";
+	import { getContext } from "svelte";
+	import { calendarVariants } from "./calendar.variant.js";
+
+	/**
+	 * @typedef {import("bits-ui").CalendarGridRowPropsWithoutHTML} CalendarGridRowPropsWithoutHTML
+	 * @typedef {import("bits-ui").CalendarRootPropsWithoutHTML} CalendarRootProps
+	 *
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {CalendarRootProps["minValue"][]} weekDates
+	 */
+
+	/** @type {CalendarGridRowPropsWithoutHTML & Props} */
+	let { children, class: className = "", weekDates, ...rest } = $props();
+
+	let ctx = $derived.by(getContext("calendar-root-store"));
+
+	/**
+	 * The left/right margin or nothing
+	 * @type {[number, number] | undefined}
+	 */
+	let range = $derived.by(() => {
+		if (!Array.isArray(ctx.value) || ctx.maxDays !== 2 || ctx.value.length > 2)
+			return;
+
+		let dates = [...ctx.value];
+		if (dates.length === 1 && ctx.hoverValue) {
+			dates.push(ctx.hoverValue);
+		}
+		if (dates.length !== 2) return;
+		dates.sort();
+
+		const [startOffset, endOffset] = [
+			[dates[0], weekDates[0]],
+			[dates[1], weekDates.at(-1)],
+		].map(([date, weekday]) => date.compare(weekday) / 7);
+
+		if (startOffset >= 1 || endOffset <= -1) return;
+
+		// 1.06 is to prevent the range bg from getting past the selected dates
+		return [
+			startOffset < 0 ? 0 : startOffset * 1.06, // left
+			endOffset > 0 ? 0 : endOffset * -1.06, // right
+		].map((value) => Math.round(value * 1e5) / 1e3);
+	});
+
+	let styles = $derived(calendarVariants());
+</script>
+
+<Calendar.GridRow class={styles.gridRow({ class: className })} {...rest}>
+	{#each weekDates as date, i (i)}
+		{@render children?.({ date })}
+	{/each}
+	{#if range}
+		<div class={styles.rangeWrapper()}>
+			<div
+				class={styles.rangeBg()}
+				style={`margin-left:${range[0]}%;margin-right:${range[1]}%`}>
+			</div>
+		</div>
+	{/if}
+</Calendar.GridRow>

package/dist/components/molecules/calendar/Weekdays.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { Calendar } from "bits-ui";
+	import { getContext } from "svelte";
+	import { calendarVariants } from "./calendar.variant.js";
+
+	/**
+	 * @typedef {import("bits-ui").CalendarGridHeadPropsWithoutHTML} CalendarGridHeadPropsWithoutHTML
+	 *
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 */
+
+	/** @type {Omit<CalendarGridHeadPropsWithoutHTML, "child" | "children"> & Props} */
+	let { class: className = "", ...rest } = $props();
+
+	let ctx = $derived.by(getContext("calendar-root-store"));
+	let styles = $derived(calendarVariants());
+</script>
+
+<Calendar.GridHead class={styles.gridHead({ class: className })} {...rest}>
+	<Calendar.GridRow class={styles.gridRow()}>
+		{#each ctx.weekdays as day, i (i)}
+			<Calendar.HeadCell class={styles.gridHeadCell()} style="font-weight:inherit"
+				>{day}</Calendar.HeadCell>
+		{/each}
+	</Calendar.GridRow>
+</Calendar.GridHead>

package/dist/components/molecules/calendar/Weekdays.svelte.d.ts

@@ -0,0 +1,17 @@
+export default Weekdays;
+type Weekdays = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Omit<CalendarGridHeadPropsWithoutHTML, "children" | "child"> & Props>): void;
+};
+declare const Weekdays: import("svelte").Component<Omit<import("bits-ui").CalendarGridHeadPropsWithoutHTML, "children" | "child"> & {
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+};

package/dist/components/molecules/calendar/calendar.variant.d.ts

@@ -0,0 +1,79 @@
+export const calendarVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            heading?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            dateCell?: import("tailwind-variants").ClassValue;
+            dateDay?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            gridHead?: import("tailwind-variants").ClassValue;
+            gridHeadCell?: import("tailwind-variants").ClassValue;
+            gridRow?: import("tailwind-variants").ClassValue;
+            gridWrapper?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            headerBtn?: import("tailwind-variants").ClassValue;
+            rangeBg?: import("tailwind-variants").ClassValue;
+            rangeWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            heading?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            dateCell?: import("tailwind-variants").ClassValue;
+            dateDay?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            gridHead?: import("tailwind-variants").ClassValue;
+            gridHeadCell?: import("tailwind-variants").ClassValue;
+            gridRow?: import("tailwind-variants").ClassValue;
+            gridWrapper?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            headerBtn?: import("tailwind-variants").ClassValue;
+            rangeBg?: import("tailwind-variants").ClassValue;
+            rangeWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
+}, {
+    base: string;
+    dateCell: string[];
+    dateDay: string[];
+    grid: string;
+    gridHead: string;
+    gridHeadCell: string;
+    gridRow: string;
+    gridWrapper: string;
+    header: string;
+    headerBtn: string[];
+    heading: string;
+    rangeBg: string;
+    rangeWrapper: string;
+}, undefined, any, {
+    base: string;
+    dateCell: string[];
+    dateDay: string[];
+    grid: string;
+    gridHead: string;
+    gridHeadCell: string;
+    gridRow: string;
+    gridWrapper: string;
+    header: string;
+    headerBtn: string[];
+    heading: string;
+    rangeBg: string;
+    rangeWrapper: string;
+}, import("tailwind-variants").TVReturnType<any, {
+    base: string;
+    dateCell: string[];
+    dateDay: string[];
+    grid: string;
+    gridHead: string;
+    gridHeadCell: string;
+    gridRow: string;
+    gridWrapper: string;
+    header: string;
+    headerBtn: string[];
+    heading: string;
+    rangeBg: string;
+    rangeWrapper: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/calendar/calendar.variant.js

@@ -0,0 +1,36 @@
+import { tv } from "../../../utils/tailwind.js";
+
+const calendarVariants = tv({
+	slots: {
+		base: "w-fit rounded-lg bg-white shadow-sm",
+		dateCell: [
+			"group relative z-1 cursor-pointer p-1 ui-select-label",
+			"data-disabled:pointer-events-none data-disabled:text-neutral-400",
+			"data-unavailable:pointer-events-none data-unavailable:text-neutral-400 data-unavailable:line-through",
+		],
+		dateDay: [
+			"grid size-8 place-items-center rounded-full",
+			"group-hover:bg-neutral-900 group-hover:text-neutral-100",
+			"data-selected:bg-neutral-900 data-selected:text-neutral-100",
+			// Today marker:
+			"before:absolute before:top-2 before:hidden before:size-0.75 before:rounded-full before:bg-current data-today:before:block",
+		],
+		grid: "block border-l border-neutral-300 p-1 select-none first:border-0",
+		gridHead: "mb-1 ui-select-label text-neutral-500",
+		gridHeadCell: "py-1",
+		gridRow:
+			"relative flex items-center justify-around px-4 py-1 text-center data-readonly:pointer-events-none",
+		gridWrapper: "flex flex-wrap",
+		header:
+			"flex items-center justify-between gap-2 border-b border-neutral-300 px-6 py-4",
+		headerBtn: [
+			"inline-flex size-8 cursor-pointer items-center justify-center",
+			"data-disabled:pointer-events-none data-disabled:opacity-40",
+		],
+		heading: "ui-select-label",
+		rangeBg: "h-full rounded-2xl bg-neutral-100",
+		rangeWrapper: "absolute inset-0 mx-6 my-2",
+	},
+});
+
+export { calendarVariants };

package/dist/components/molecules/calendar/index.d.ts

@@ -0,0 +1,8 @@
+import Root from "./Calendar.svelte";
+import Container from "./Container.svelte";
+import DayCell from "./DayCell.svelte";
+export const MonthGrid: import("svelte").Component<Calendar.GridBodyProps, {}, "ref">;
+import Weekdays from "./Weekdays.svelte";
+import WeekRow from "./WeekRow.svelte";
+import { Calendar } from "bits-ui";
+export { Root, Container, DayCell, Weekdays, WeekRow };

package/dist/components/molecules/calendar/index.js

@@ -0,0 +1,10 @@
+import { Calendar } from "bits-ui";
+import Root from "./Calendar.svelte";
+import Container from "./Container.svelte";
+import DayCell from "./DayCell.svelte";
+import Weekdays from "./Weekdays.svelte";
+import WeekRow from "./WeekRow.svelte";
+
+const MonthGrid = Calendar.GridBody;
+
+export { Root, Container, DayCell, MonthGrid, Weekdays, WeekRow };

package/dist/components/molecules/formField/FormField.svelte

@@ -14,7 +14,7 @@
 	 * @property {string} [helperText=""] The helper text for the form field
 	 * @property {string} [id=""] The id attribute for the form field (passed down to the input)
 	 * @property {string} [label=""] The label text for the form field
-	 * @property {"stacked" | "inline"} [layout="stacked"] The layout of the input and label
+	 * @property {"stacked" | "inline" | "checkable"} [layout="stacked"] The layout of the input and label
 	 * @property {boolean} [required=false] Whether the form field is required (passed down to the input)
 	 */
 

package/dist/components/molecules/formField/FormField.svelte.d.ts

@@ -39,7 +39,7 @@ declare const FormField: import("svelte").Component<{
     /**
      * The layout of the input and label
      */
-    layout?: "stacked" | "inline";
+    layout?: "stacked" | "inline" | "checkable";
     /**
      * Whether the form field is required (passed down to the input)
      */
@@ -81,7 +81,7 @@ type Props = {
     /**
      * The layout of the input and label
      */
-    layout?: "stacked" | "inline";
+    layout?: "stacked" | "inline" | "checkable";
     /**
      * Whether the form field is required (passed down to the input)
      */

package/dist/components/molecules/formField/formField.variants.d.ts

@@ -1,10 +1,10 @@
 export const formFieldVariants: import("tailwind-variants").TVReturnType<{
-    disabled: {
-        true: {
+    layout: {
+        checkable: {
+            base: string;
+            label: string;
             helperText: string;
         };
-    };
-    layout: {
         inline: {
             base: string;
             helperText: string;
@@ -15,12 +15,12 @@ export const formFieldVariants: import("tailwind-variants").TVReturnType<{
     label: string;
     helperText: string;
 }, undefined, {
-    disabled: {
-        true: {
+    layout: {
+        checkable: {
+            base: string;
+            label: string;
             helperText: string;
         };
-    };
-    layout: {
         inline: {
             base: string;
             helperText: string;
@@ -31,12 +31,12 @@ export const formFieldVariants: import("tailwind-variants").TVReturnType<{
     label: string;
     helperText: string;
 }, import("tailwind-variants").TVReturnType<{
-    disabled: {
-        true: {
+    layout: {
+        checkable: {
+            base: string;
+            label: string;
             helperText: string;
         };
-    };
-    layout: {
         inline: {
             base: string;
             helperText: string;

package/dist/components/molecules/formField/formField.variants.js

@@ -7,18 +7,34 @@ const formFieldVariants = tv({
 		helperText: "-mt-1 ml-4",
 	},
 	variants: {
-		disabled: {
-			true: {
-				helperText: "opacity-40",
-			},
-		},
 		layout: {
+			checkable: {
+				base: "grid-cols-[min-content_auto] items-center",
+				label: "order-2 text-current",
+				helperText: "order-3 col-2 ml-0",
+			},
 			inline: {
 				base: "items-center sm:grid-cols-[minmax(120px,auto)_1fr]",
 				helperText: "sm:col-2",
 			},
 		},
 	},
+	compoundVariants: [
+		{
+			disabled: true,
+			layout: ["inline", "stacked"],
+			class: {
+				helperText: "opacity-40",
+			},
+		},
+		{
+			disabled: true,
+			layout: "checkable",
+			class: {
+				base: "opacity-40",
+			},
+		},
+	],
 });
 
 export { formFieldVariants };

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte

@@ -198,11 +198,9 @@
 
 	$effect(() => {
 		if (!editor) return;
-
-		const current = editor.getHTML();
 		const next = content ?? "";
-
-		if (current !== next) {
+		const matches = next === editor.getText() || next === editor.getHTML();
+		if (!matches) {
 			isContentPropUpdate = true;
 			editor.commands.setContent(next, false);
 		}

package/dist/components/molecules/selectorCard/SelectorCard.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { settled } from "svelte";
 	import { selectorCardVariants } from "./selectorCard.variants.js";
-	import { Switch, Radio, Label, utils } from "../../../index.js";
+	import { Checkbox, Switch, Radio, Label, utils } from "../../../index.js";
 
 	/**
 	 * @typedef {Object} Props
@@ -15,7 +15,7 @@
 	 * @property {string} [label=""] Label to display in the card
 	 * @property {string} [name] The name of the card, used for form submission
 	 * @property {boolean} [required=false] Whether the card is required
-	 * @property {"radio" | "switch"} [type="radio"] The type of card
+	 * @property {"checkbox" | "radio" | "switch"} [type="radio"] The type of card
 	 * @property {string} [value=""] The value of the card
 	 */
 
@@ -79,6 +79,12 @@
 			bind:checked
 			class={styles.input()}
 			{...inputProps} />
+	{:else if type === "checkbox"}
+		<Checkbox
+			{@attach utils.attachNode(bindInputRef)}
+			bind:checked
+			class={styles.input()}
+			{...inputProps} />
 	{/if}
 	<div class={styles.content()}>
 		{#if label}

package/dist/components/molecules/selectorCard/SelectorCard.svelte.d.ts

@@ -47,7 +47,7 @@ declare const SelectorCard: import("svelte").Component<{
     /**
      * The type of card
      */
-    type?: "radio" | "switch";
+    type?: "checkbox" | "radio" | "switch";
     /**
      * The value of the card
      */
@@ -97,7 +97,7 @@ type Props = {
     /**
      * The type of card
      */
-    type?: "radio" | "switch";
+    type?: "checkbox" | "radio" | "switch";
     /**
      * The value of the card
      */

package/dist/components/molecules/tagSelector/TagSelector.svelte

@@ -10,6 +10,8 @@
 	 * @property {boolean} [autofocus=false] Whether the input should be autofocused on mount
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
 	 * @property {boolean} [disabled=false] Whether the component is disabled
+	 * @property {string|undefined} [fixedValueIcon] The name of the icon to distinguish fixed tags from others
+	 * @property {Array<string>} [fixedValues=[]] The unremovable and always selected tags
 	 * @property {string} [id=""] The ID of the input element
 	 * @property {string} [labelCreate=""] The label for the create new tag option
 	 * @property {string} [name] The name of the input, used for form submission
@@ -23,6 +25,8 @@
 		autofocus = false,
 		class: className = "",
 		disabled = false,
+		fixedValueIcon,
+		fixedValues = [],
 		id = "",
 		labelCreate = "",
 		name,
@@ -140,6 +144,12 @@
 			return;
 		}
 
+		if (fixedValues.find((i) => i.toLowerCase() === lower)) {
+			// is already a fixed (pre-selected) value
+			refocusInput();
+			return;
+		}
+
 		const selectedMatch = value.find(
 			(id) => typeof id === "string" && id.toLowerCase() === lower,
 		);
@@ -223,6 +233,8 @@
 	{/if}
 	<ValueList
 		{@attach utils.attachNode(bindInputRef)}
+		{fixedValueIcon}
+		{fixedValues}
 		{localValues}
 		onKeydown={handleKey}
 		onOpenDropdown={openDropdown}