@websline/system-components 1.4.4 → 1.4.7

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}

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

@@ -16,6 +16,14 @@ declare const TagSelector: import("svelte").Component<{
      * Whether the component is disabled
      */
     disabled?: boolean;
+    /**
+     * The name of the icon to distinguish fixed tags from others
+     */
+    fixedValueIcon?: string | undefined;
+    /**
+     * The unremovable and always selected tags
+     */
+    fixedValues?: Array<string>;
     /**
      * The ID of the input element
      */
@@ -57,6 +65,14 @@ type Props = {
      * Whether the component is disabled
      */
     disabled?: boolean;
+    /**
+     * The name of the icon to distinguish fixed tags from others
+     */
+    fixedValueIcon?: string | undefined;
+    /**
+     * The unremovable and always selected tags
+     */
+    fixedValues?: Array<string>;
     /**
      * The ID of the input element
      */

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

@@ -3,6 +3,8 @@
 	import { tagSelectorVariants } from "./tagSelector.variants.js";
 
 	let {
+		fixedValueIcon,
+		fixedValues = [],
 		localValues,
 		onKeydown,
 		onOpenDropdown,
@@ -19,15 +21,23 @@
 </script>
 
 <div class={styles.valueList()}>
+	{#each fixedValues as s (s)}
+		<Tag class={styles.item()} iconStart={fixedValueIcon} size="big">{s}</Tag>
+	{/each}
+
 	{#each value as s (s)}
 		{@const opt = options.find((i) => i.id === s)}
-		<Tag class={styles.item()} icon="closeSmall" onclick={() => onRemoveItem(s)}>
+		<Tag
+			class={styles.item()}
+			iconEnd="closeSmall"
+			onclick={() => onRemoveItem(s)}
+			size="big">
 			{opt?.label ?? s}
 		</Tag>
 	{/each}
 
 	{#if !localValues.disabled}
-		<Tag class={styles.searchField()} icon="add" variant="outline">
+		<Tag class={styles.searchField()} iconEnd="add" size="big" variant="outline">
 			<input
 				bind:value={query}
 				autocomplete="off"

package/dist/components/molecules/tagSelector/ValueList.svelte.d.ts

@@ -4,6 +4,8 @@ type ValueList = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const ValueList: import("svelte").Component<{
+    fixedValueIcon: any;
+    fixedValues?: any[];
     localValues: any;
     onKeydown: any;
     onOpenDropdown: any;
@@ -15,6 +17,8 @@ declare const ValueList: import("svelte").Component<{
     value?: any[];
 } & Record<string, any>, {}, "query">;
 type $$ComponentProps = {
+    fixedValueIcon: any;
+    fixedValues?: any[];
     localValues: any;
     onKeydown: any;
     onOpenDropdown: any;

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

@@ -6,9 +6,9 @@ const tagSelectorVariants = tv({
 		base: "relative min-h-10 p-1",
 		valueList: "flex flex-wrap gap-1",
 		item: "h-7.5",
-		searchField: "relative h-7.5 w-30",
+		searchField: "relative h-7.5 w-30 flex-row-reverse gap-0",
 		searchInput:
-			"absolute inset-0 appearance-none border-0 bg-transparent pr-1 pl-7 ui-tag-badge placeholder-current focus:ring-0",
+			"absolute inset-0 appearance-none border-0 bg-transparent pr-8 pl-3 ui-tag-badge placeholder-current focus:ring-0",
 		dropdown:
 			"absolute z-1 w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
 		dropdownCheckmark: "ml-auto shrink-0",

package/dist/components/organisms/tooltip/Content.svelte

@@ -0,0 +1,51 @@
+<script>
+	import { Popover } from "bits-ui";
+	import { quintOut } from "svelte/easing";
+	import { scale } from "svelte/transition";
+	import { tooltipVariants } from "./tooltip.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 for the content
+	 * @property {boolean} [portalDisabled=false] Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
+	 * @property {string} [portalTarget='body'] Where to render the content when it is open. Defaults to the body.
+	 * @property {"top" | "right" | "bottom" | "left"} [side="top"] The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.
+	 * @property {number} [sideOffset=8] The distance in pixels from the anchor to the floating element.
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className = "",
+		portalDisabled = true,
+		portalTarget = "body",
+		side = "right",
+		sideOffset = 8,
+		...rest
+	} = $props();
+
+	let styles = tooltipVariants();
+</script>
+
+<Popover.Portal disabled={portalDisabled} to={portalTarget}>
+	<Popover.Content
+		align="center"
+		class={styles.base()}
+		forceMount
+		{side}
+		{sideOffset}
+		{...rest}>
+		{#snippet child({ open, props, wrapperProps })}
+			{#if open}
+				<div {...wrapperProps}>
+					<div {...props} in:scale={{ duration: 300, easing: quintOut, start: 0.75 }}>
+						<div class={styles.child({ class: className })}>
+							{@render children()}
+						</div>
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</Popover.Content>
+</Popover.Portal>