@websline/system-components 1.4.4 → 1.4.7

package/dist/components/atoms/checkbox/checkbox.variants.d.ts

@@ -5,7 +5,7 @@ export const checkboxVariants: import("tailwind-variants").TVReturnType<{
     error: {
         true: string;
     };
-}, undefined, "size-4 cursor-pointer rounded border border-current bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:text-white", {
+}, undefined, "size-4 cursor-pointer rounded-xs border border-neutral-300 bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:border-neutral-600 dark:text-white", {
     disabled: {
         true: string;
     };
@@ -19,4 +19,4 @@ export const checkboxVariants: import("tailwind-variants").TVReturnType<{
     error: {
         true: string;
     };
-}, undefined, "size-4 cursor-pointer rounded border border-current bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:text-white", unknown, unknown, undefined>>;
+}, undefined, "size-4 cursor-pointer rounded-xs border border-neutral-300 bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:border-neutral-600 dark:text-white", unknown, unknown, undefined>>;

package/dist/components/atoms/checkbox/checkbox.variants.js

@@ -1,7 +1,7 @@
 import { tv } from "../../../utils/tailwind.js";
 
 const checkboxVariants = tv({
-	base: "size-4 cursor-pointer rounded border border-current bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:text-white",
+	base: "size-4 cursor-pointer rounded-xs border border-neutral-300 bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:border-neutral-600 dark:text-white",
 	variants: {
 		disabled: {
 			true: "cursor-not-allowed",

package/dist/components/atoms/icon/components/Lightning.svelte

@@ -0,0 +1,26 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=1.5] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg 
+  {height}
+	{width}
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  {...rest}>
+  <path 
+    d="M7.77843 2.5H15.0512L10.6067 7.75H16.6673L6.97035 17.5L8.99055 10.375H3.33398L7.77843 2.5Z"
+    stroke={color}
+    stroke-width={strokeWidth} 
+    stroke-linejoin="round"/>
+</svg>

package/dist/components/atoms/icon/components/Lightning.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Lightning;
+type Lightning = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Lightning: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/index.d.ts

@@ -60,6 +60,7 @@ export { default as Info } from "./Info.svelte";
 export { default as Intergration } from "./Intergration.svelte";
 export { default as Italic } from "./Italic.svelte";
 export { default as Layout } from "./Layout.svelte";
+export { default as Lightning } from "./Lightning.svelte";
 export { default as Link } from "./Link.svelte";
 export { default as LinkAi } from "./LinkAi.svelte";
 export { default as ListOrdered } from "./ListOrdered.svelte";

package/dist/components/atoms/icon/components/index.js

@@ -60,6 +60,7 @@ export { default as Info } from "./Info.svelte";
 export { default as Intergration } from "./Intergration.svelte";
 export { default as Italic } from "./Italic.svelte";
 export { default as Layout } from "./Layout.svelte";
+export { default as Lightning } from "./Lightning.svelte";
 export { default as Link } from "./Link.svelte";
 export { default as LinkAi } from "./LinkAi.svelte";
 export { default as ListOrdered } from "./ListOrdered.svelte";

package/dist/components/atoms/radio/Radio.svelte

@@ -1,3 +1,33 @@
+<script module>
+	/** @type {Map<string, Set>} valueCheckers */
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const valueCheckers = new Map();
+
+	const checkValues = (name) => {
+		const checkers = valueCheckers.get(name);
+		for (const fn of checkers?.values() ?? []) {
+			fn?.();
+		}
+	};
+
+	const addValueUpdater = (name, checker) => {
+		let checkerSet = valueCheckers.get(name);
+		if (!checkerSet) {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			checkerSet = new Set();
+			valueCheckers.set(name, checkerSet);
+		}
+		checkerSet.add(checker);
+
+		return () => {
+			checkerSet.delete(checker);
+			if (!checkerSet.size) {
+				valueCheckers.delete(name);
+			}
+		};
+	};
+</script>
+
 <script>
 	import { getContext } from "svelte";
 	import { radioVariants } from "./radio.variants.js";
@@ -22,11 +52,13 @@
 		error,
 		id,
 		name,
+		onchange,
 		required,
 		value = "on",
 		...rest
 	} = $props();
 
+	let element = $state();
 	let store = getContext("form-field-store") ?? null;
 
 	let localValues = $derived.by(() => {
@@ -39,10 +71,32 @@
 			required: required ?? storeValues.required ?? false,
 		};
 	});
+
+	const handleChange = (e) => {
+		if (name?.length) {
+			checkValues(name);
+		} else {
+			checked = e.target.checked;
+		}
+		onchange?.(e);
+	};
+
+	$effect(() => {
+		let offUpdater;
+		if (name) {
+			offUpdater = addValueUpdater(name, () => {
+				checked = element?.checked || false;
+			});
+		}
+
+		return () => {
+			offUpdater?.();
+		};
+	});
 </script>
 
 <input
-	onchange={(e) => (checked = !checked ? e.target.checked : checked)}
+	bind:this={element}
 	{checked}
 	class={radioVariants({
 		checked,
@@ -53,7 +107,8 @@
 	disabled={localValues.disabled}
 	id={localValues.id}
 	{name}
+	onchange={handleChange}
 	required={localValues.required}
-	type="checkbox"
+	type="radio"
 	{value}
 	{...rest} />

package/dist/components/atoms/tag/Tag.svelte

@@ -6,8 +6,8 @@
 	 * @typedef {Object} Props
 	 * @property {import('svelte').Snippet} [children] Content inside the tag – can be text, HTML, or Svelte components
 	 * @property {string} [class=""] Additional CSS classes for the tag
-	 * @property {string} [icon=""] Name of the icon to display
-	 * @property {"start" | "end"} [iconPosition="start"] Position of the icon relative to the content
+	 * @property {string} [iconEnd=""] Name of the icon to display at the end
+	 * @property {string} [iconStart=""] Name of the icon to display at the start
 	 * @property {boolean} [selected=false] Whether the tag is in a visually selected state
 	 * @property {"round" | "round-big"} [shape="round"] Shape of the tag
 	 * @property {"small" | "big"} [size="small"] Size of the tag
@@ -18,8 +18,8 @@
 	let {
 		children,
 		class: className,
-		icon = "",
-		iconPosition = "start",
+		iconEnd = "",
+		iconStart = "",
 		selected = false,
 		shape = "round",
 		size = "small",
@@ -31,7 +31,6 @@
 <button
 	class={tagVariants({
 		class: className,
-		iconPosition,
 		selected,
 		shape,
 		size,
@@ -39,10 +38,13 @@
 	})}
 	type="button"
 	{...rest}>
-	{#if icon}
-		<Icon name={icon} size={14} />
+	{#if iconStart}
+		<Icon name={iconStart} size={14} />
 	{/if}
 	<span>
 		{@render children?.()}
 	</span>
+	{#if iconEnd}
+		<Icon name={iconEnd} size={14} />
+	{/if}
 </button>

package/dist/components/atoms/tag/Tag.svelte.d.ts

@@ -13,13 +13,13 @@ declare const Tag: import("svelte").Component<{
      */
     class?: string;
     /**
-     * Name of the icon to display
+     * Name of the icon to display at the end
      */
-    icon?: string;
+    iconEnd?: string;
     /**
-     * Position of the icon relative to the content
+     * Name of the icon to display at the start
      */
-    iconPosition?: "start" | "end";
+    iconStart?: string;
     /**
      * Whether the tag is in a visually selected state
      */
@@ -47,13 +47,13 @@ type Props = {
      */
     class?: string;
     /**
-     * Name of the icon to display
+     * Name of the icon to display at the end
      */
-    icon?: string;
+    iconEnd?: string;
     /**
-     * Position of the icon relative to the content
+     * Name of the icon to display at the start
      */
-    iconPosition?: "start" | "end";
+    iconStart?: string;
     /**
      * Whether the tag is in a visually selected state
      */

package/dist/components/atoms/tag/tag.variants.d.ts

@@ -1,7 +1,4 @@
 export const tagVariants: import("tailwind-variants").TVReturnType<{
-    iconPosition: {
-        end: string;
-    };
     selected: {
         true: string;
     };
@@ -18,9 +15,6 @@ export const tagVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
     };
 }, undefined, string[], {
-    iconPosition: {
-        end: string;
-    };
     selected: {
         true: string;
     };
@@ -37,9 +31,6 @@ export const tagVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
-    iconPosition: {
-        end: string;
-    };
     selected: {
         true: string;
     };

package/dist/components/atoms/tag/tag.variants.js

@@ -8,11 +8,8 @@ const tagVariants = tv({
 		"border border-neutral-100 hover:border-neutral-200 dark:border-neutral-700 hover:dark:border-neutral-700",
 	],
 	variants: {
-		iconPosition: {
-			end: "flex-row-reverse",
-		},
 		selected: {
-			true: "border-neutral-900 !bg-neutral-900 text-neutral-100 dark:border-blue-400 dark:!bg-blue-400",
+			true: "border-neutral-900 bg-neutral-900! text-neutral-100 dark:border-blue-400 dark:bg-blue-400!",
 		},
 		shape: {
 			round: "rounded-sm",

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

@@ -0,0 +1,95 @@
+<script>
+	import { Calendar } from "bits-ui";
+	import { Icon } from "../../../index.js";
+	import { calendarVariants } from "./calendar.variant.js";
+	import RootContext from "./RootContext.svelte";
+
+	/**
+	 * @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 {boolean} [hideHeader=false] Whether to show the header or not
+	 * @property {number} [maxMonths=false] The maximum of months to display side by side
+	 */
+
+	/** @type {Omit<CalendarRootProps, "disabled" | "disableDaysOutsideMonth" | "isDateDisabled" | "numberOfMonths" | "pagedNavigation" | "weekStartsOn"> & Props} */
+	let {
+		children: _children,
+		class: className = "",
+		hideHeader = false,
+		locale = "de",
+		maxDays = 2,
+		maxMonths = 1,
+		ref = $bindable(null),
+		type,
+		value = $bindable(),
+		weekdayFormat = "short",
+		...rest
+	} = $props();
+
+	let ro;
+	let numberOfMonths = $state(1);
+	let styles = $derived(calendarVariants());
+
+	const setValue = (newValue) => {
+		if (Array.isArray(newValue)) {
+			// make sure dates are sorted for the range selection
+			value = newValue.toSorted();
+		} else {
+			value = newValue;
+		}
+	};
+
+	const updateVisibleMonths = (table, parentElement) => {
+		numberOfMonths = Math.min(
+			Math.max(Math.floor(parentElement.offsetWidth / table.offsetWidth), 1),
+			maxMonths,
+		);
+	};
+
+	$effect(() => {
+		if (maxMonths > 1 && ref?.parentElement) {
+			const firstTable = ref.querySelector("[data-calendar-grid]");
+			ro = new ResizeObserver(() => {
+				updateVisibleMonths(firstTable, ref.parentElement);
+			});
+			ro.observe(ref.parentElement);
+		}
+
+		return () => {
+			numberOfMonths = 1;
+			ro?.disconnect();
+		};
+	});
+</script>
+
+<Calendar.Root
+	class={styles.base({ class: className })}
+	{locale}
+	{maxDays}
+	{numberOfMonths}
+	pagedNavigation
+	bind:ref
+	{type}
+	bind:value={() => value, setValue}
+	{weekdayFormat}
+	{...rest}>
+	{#snippet children({ months, weekdays })}
+		{#if !hideHeader}
+			<Calendar.Header class={styles.header({ class: className })} {...rest}>
+				<Calendar.PrevButton class={styles.headerBtn({ class: "rotate-90" })}>
+					<Icon name="chevronDown" size={20} />
+				</Calendar.PrevButton>
+				<Calendar.Heading class={styles.heading()} />
+				<Calendar.NextButton class={styles.headerBtn({ class: "rotate-270" })}>
+					<Icon name="chevronDown" size={20} />
+				</Calendar.NextButton>
+			</Calendar.Header>
+		{/if}
+		<RootContext {maxDays} {months} {value} {weekdays}>
+			{@render _children?.()}
+		</RootContext>
+	{/snippet}
+</Calendar.Root>

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;
+};