@websline/system-components 1.4.3 → 1.4.6

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/inputDate/InputDate.svelte

@@ -0,0 +1,114 @@
+<script>
+	import { Popover } from "bits-ui";
+	import { getContext } from "svelte";
+	import { IconButton } from "../../../index.js";
+	import Picker from "./Picker.svelte";
+	import { inputVariants } from "./input.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string|import("svelte").SvelteComponent|Function} [adornmentStart=""] Content to display at the start of the input (e.g., icon or text)
+	 * @property {import("svelte").SvelteComponent} [children] Additional content to render inside the input component
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [disabled] Whether the input is disabled
+	 * @property {boolean} [error] Whether the input has an error state
+	 * @property {string} [id] The ID of the input element
+	 * @property {string} [name] The name of the input, used for form submission
+	 * @property {string} [placeholder=""] Placeholder text for the input
+	 * @property {boolean} [readonly=false] Whether the input is read-only
+	 * @property {boolean} [required] Whether the input is required
+	 * @property {string} [value=""] The value of the input, bound to the component
+	 */
+
+	/** @type {Props} */
+	let {
+		adornmentStart = "",
+		children,
+		class: className = "",
+		disabled,
+		error,
+		id,
+		name,
+		placeholder = "",
+		readonly = false,
+		required,
+		value = $bindable(),
+		// TODO
+		preventScroll = false,
+		portalDisabled = true,
+		portalTarget = "body",
+		side = "bottom",
+		sideOffset = 8,
+		...rest
+	} = $props();
+
+	let store = getContext("form-field-store") ?? null;
+
+	let localValues = $derived.by(() => {
+		const storeValues = typeof store === "function" ? store() : {};
+
+		return {
+			disabled: disabled ?? storeValues.disabled ?? false,
+			error: error ?? storeValues.error ?? false,
+			id: id ?? storeValues.id ?? "",
+			required: required ?? storeValues.required ?? false,
+		};
+	});
+
+	let styles = $derived(
+		inputVariants({
+			disabled: localValues.disabled,
+			error: localValues.error,
+		}),
+	);
+</script>
+
+<Popover.Root>
+	<div class={styles.base({ class: className })}>
+		{#if adornmentStart}
+			<div class={styles.adornmentStart()}>
+				{#if typeof adornmentStart === "function"}
+					{@render adornmentStart()}
+				{:else}
+					{adornmentStart}
+				{/if}
+			</div>
+		{/if}
+
+		{#if children}
+			<!-- The date picker -->
+			<Picker
+				{children}
+				{preventScroll}
+				{portalDisabled}
+				{portalTarget}
+				{side}
+				{sideOffset} />
+		{/if}
+
+		<input
+			class={styles.input()}
+			disabled={localValues.disabled}
+			id={localValues.id}
+			{name}
+			{placeholder}
+			{readonly}
+			required={localValues.required}
+			{...rest}
+			bind:value />
+
+		<div class={styles.adornmentEnd()}>
+			<Popover.Trigger>
+				{#snippet child({ props })}
+					<IconButton
+						color="transparent"
+						icon="calendar"
+						iconSize={24}
+						shape="square"
+						size="small"
+						{...props} />
+				{/snippet}
+			</Popover.Trigger>
+		</div>
+	</div>
+</Popover.Root>

package/dist/components/atoms/inputDate/InputDate.svelte.d.ts

@@ -0,0 +1,97 @@
+export default InputDate;
+type InputDate = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const InputDate: import("svelte").Component<{
+    /**
+     * Content to display at the start of the input (e.g., icon or text)
+     */
+    adornmentStart?: string | import("svelte").SvelteComponent | Function;
+    /**
+     * Additional content to render inside the input component
+     */
+    children?: import("svelte").SvelteComponent;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input has an error state
+     */
+    error?: boolean;
+    /**
+     * The ID of the input element
+     */
+    id?: string;
+    /**
+     * The name of the input, used for form submission
+     */
+    name?: string;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is read-only
+     */
+    readonly?: boolean;
+    /**
+     * Whether the input is required
+     */
+    required?: boolean;
+    /**
+     * The value of the input, bound to the component
+     */
+    value?: string;
+}, {}, "value">;
+type Props = {
+    /**
+     * Content to display at the start of the input (e.g., icon or text)
+     */
+    adornmentStart?: string | import("svelte").SvelteComponent | Function;
+    /**
+     * Additional content to render inside the input component
+     */
+    children?: import("svelte").SvelteComponent;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input has an error state
+     */
+    error?: boolean;
+    /**
+     * The ID of the input element
+     */
+    id?: string;
+    /**
+     * The name of the input, used for form submission
+     */
+    name?: string;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is read-only
+     */
+    readonly?: boolean;
+    /**
+     * Whether the input is required
+     */
+    required?: boolean;
+    /**
+     * The value of the input, bound to the component
+     */
+    value?: string;
+};

package/dist/components/atoms/inputDate/Picker.svelte

@@ -0,0 +1,36 @@
+<script>
+	import { Popover } from "bits-ui";
+	import { quintOut } from "svelte/easing";
+	import { scale } from "svelte/transition";
+
+	let {
+		children,
+		preventScroll = false,
+		portalDisabled = true,
+		portalTarget = "body",
+		side = "bottom",
+		sideOffset = 8,
+		...rest
+	} = $props();
+</script>
+
+<Popover.Portal disabled={portalDisabled} to={portalTarget}>
+	<Popover.Content
+		align="end"
+		alignOffset={0}
+		forceMount
+		{preventScroll}
+		{side}
+		{sideOffset}
+		{...rest}>
+		{#snippet child({ open, props, wrapperProps })}
+			{#if open}
+				<div {...wrapperProps}>
+					<div {...props} in:scale={{ duration: 300, easing: quintOut, start: 0.75 }}>
+						{@render children()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</Popover.Content>
+</Popover.Portal>

package/dist/components/atoms/inputDate/Picker.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Picker;
+type Picker = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Picker: import("svelte").Component<{
+    children: any;
+    preventScroll?: boolean;
+    portalDisabled?: boolean;
+    portalTarget?: string;
+    side?: string;
+    sideOffset?: number;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    children: any;
+    preventScroll?: boolean;
+    portalDisabled?: boolean;
+    portalTarget?: string;
+    side?: string;
+    sideOffset?: number;
+} & Record<string, any>;

package/dist/components/atoms/inputDate/input.variants.d.ts

@@ -0,0 +1,64 @@
+export const inputVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            input: string;
+        };
+    };
+}, {
+    adornmentStart: string;
+    adornmentEnd: string;
+    base: string;
+    input: string;
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>>;

package/dist/components/atoms/inputDate/input.variants.js

@@ -0,0 +1,20 @@
+import { inputBaseVariant, tv } from "../../../utils/tailwind.js";
+
+const inputVariants = tv({
+	extend: inputBaseVariant,
+	slots: {
+		adornmentStart:
+			"pointer-events-none shrink-0 body-small text-neutral-900 dark:text-neutral-200",
+		adornmentEnd: "shrink-0 body-small text-neutral-900 dark:text-neutral-200",
+		base: "flex h-10 items-center gap-2 pr-1",
+		input:
+			"h-full w-full appearance-none border-0 bg-transparent p-0 [font-size:inherit] leading-[inherit] focus:shadow-none focus:ring-0 focus:outline-0",
+	},
+	variants: {
+		disabled: {
+			true: { input: "cursor-not-allowed" },
+		},
+	},
+});
+
+export { inputVariants };

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";
@@ -27,6 +57,7 @@
 		...rest
 	} = $props();
 
+	let element = $state();
 	let store = getContext("form-field-store") ?? null;
 
 	let localValues = $derived.by(() => {
@@ -39,10 +70,31 @@
 			required: required ?? storeValues.required ?? false,
 		};
 	});
+
+	const handleChange = (e) => {
+		if (name?.length) {
+			checkValues(name);
+		} else {
+			checked = e.target.checked;
+		}
+	};
+
+	$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 +105,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>