@websline/system-components 1.4.4 → 1.4.6

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>

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

@@ -0,0 +1,57 @@
+export default Content;
+type Content = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Content: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes for the content
+     */
+    class?: string;
+    /**
+     * Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
+     */
+    portalDisabled?: boolean;
+    /**
+     * Where to render the content when it is open. Defaults to the body.
+     */
+    portalTarget?: string;
+    /**
+     * The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.
+     */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * The distance in pixels from the anchor to the floating element.
+     */
+    sideOffset?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes for the content
+     */
+    class?: string;
+    /**
+     * Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
+     */
+    portalDisabled?: boolean;
+    /**
+     * Where to render the content when it is open. Defaults to the body.
+     */
+    portalTarget?: string;
+    /**
+     * The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.
+     */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * The distance in pixels from the anchor to the floating element.
+     */
+    sideOffset?: number;
+};

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

@@ -0,0 +1,15 @@
+<script>
+	import { Popover } from "bits-ui";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 */
+
+	/** @type {Props} */
+	let { children, ...rest } = $props();
+</script>
+
+<Popover.Root {...rest}>
+	{@render children()}
+</Popover.Root>

package/dist/components/organisms/tooltip/Tooltip.svelte.d.ts

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

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

@@ -0,0 +1,13 @@
+<script>
+	import { Popover } from "bits-ui";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [openOnHover=true] Whether the tooltip should open on hover
+	 */
+
+	/** @type {Props & Omit<import("bits-ui").PopoverTriggerPropsWithoutHTML, "openOnHover">} */
+	let { openOnHover = true, ...rest } = $props();
+</script>
+
+<Popover.Trigger {openOnHover} {...rest} />

package/dist/components/organisms/tooltip/Trigger.svelte.d.ts

@@ -0,0 +1,17 @@
+export default Trigger;
+type Trigger = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Omit<PopoverTriggerPropsWithoutHTML, "openOnHover">>): void;
+};
+declare const Trigger: import("svelte").Component<{
+    /**
+     * Whether the tooltip should open on hover
+     */
+    openOnHover?: boolean;
+} & Omit<import("bits-ui").DatePickerTriggerPropsWithoutHTML, "openOnHover">, {}, "">;
+type Props = {
+    /**
+     * Whether the tooltip should open on hover
+     */
+    openOnHover?: boolean;
+};

package/dist/components/organisms/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import Root from "./Tooltip.svelte";
+import Trigger from "./Trigger.svelte";
+import Content from "./Content.svelte";
+export { Root, Trigger, Content };

package/dist/components/organisms/tooltip/index.js

@@ -0,0 +1,5 @@
+import Root from "./Tooltip.svelte";
+import Trigger from "./Trigger.svelte";
+import Content from "./Content.svelte";
+
+export { Root, Trigger, Content };

package/dist/components/organisms/tooltip/tooltip.variant.d.ts

@@ -0,0 +1,24 @@
+export const tooltipVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            child?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            child?: import("tailwind-variants").ClassValue;
+        };
+    };
+}, {
+    base: string[];
+    child: string;
+}, undefined, any, {
+    base: string[];
+    child: string;
+}, import("tailwind-variants").TVReturnType<any, {
+    base: string[];
+    child: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/organisms/tooltip/tooltip.variant.js

@@ -0,0 +1,20 @@
+import { tv } from "../../../utils/tailwind.js";
+
+const tooltipVariants = tv({
+	slots: {
+		base: [
+			"relative rounded-sm bg-current p-2 ui-caption-helper text-neutral-800 drop-shadow-sm dark:text-neutral-200",
+
+			// arrow styles
+			"after:absolute after:size-3 after:rotate-45 after:rounded-[3px] after:bg-current",
+			// 🔥 using side data attr. as the component may choose the opposite side if the provided one is too cramped
+			"data-[side=top]:after:-bottom-1 data-[side=top]:after:left-1/2 data-[side=top]:after:-translate-x-1/2",
+			"data-[side=bottom]:after:-top-1 data-[side=bottom]:after:left-1/2 data-[side=bottom]:after:-translate-x-1/2",
+			"data-[side=left]:after:top-1/2 data-[side=left]:after:-right-1 data-[side=left]:after:-translate-y-1/2",
+			"data-[side=right]:after:top-1/2 data-[side=right]:after:-left-1 data-[side=right]:after:-translate-y-1/2",
+		],
+		child: "text-neutral-100 dark:text-neutral-900",
+	},
+});
+
+export { tooltipVariants };

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { addIconsToRegistry } from "./components/atoms/icon/index.js";
 export { default as Icon } from "./components/atoms/icon/Icon.svelte";
 export { default as IconButton } from "./components/atoms/actions/iconButton/IconButton.svelte";
 export { default as Input } from "./components/atoms/input/Input.svelte";
+export { default as InputDate } from "./components/atoms/inputDate/InputDate.svelte";
 export { default as Label } from "./components/atoms/label/Label.svelte";
 export { default as ProgressBar } from "./components/atoms/feedback/progressBar/ProgressBar.svelte";
 export { default as Radio } from "./components/atoms/radio/Radio.svelte";
@@ -21,6 +22,7 @@ export { default as Switch } from "./components/atoms/switch/Switch.svelte";
 export { default as Tag } from "./components/atoms/tag/Tag.svelte";
 export { default as Textarea } from "./components/atoms/textarea/Textarea.svelte";
 export { default as XScroll } from "./components/atoms/utils/xScroll/XScroll.svelte";
+export * as Calendar from "./components/molecules/calendar/index.js";
 export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";
 export { default as ComboBox } from "./components/molecules/comboBox/ComboBox.svelte";
 export { default as FormActions } from "./components/molecules/formActions/FormActions.svelte";
@@ -37,3 +39,4 @@ export * as Dialog from "./components/organisms/dialog/index.js";
 export * as Modal from "./components/organisms/modal/index.js";
 export { default as NotificationGroup } from "./components/organisms/notificationGroup/NotificationGroup.svelte";
 export * as Popover from "./components/organisms/popover/index.js";
+export * as Tooltip from "./components/organisms/tooltip/index.js";

package/dist/index.js

@@ -17,6 +17,7 @@ export { addIconsToRegistry } from "./components/atoms/icon/index.js";
 export { default as Icon } from "./components/atoms/icon/Icon.svelte";
 export { default as IconButton } from "./components/atoms/actions/iconButton/IconButton.svelte";
 export { default as Input } from "./components/atoms/input/Input.svelte";
+export { default as InputDate } from "./components/atoms/inputDate/InputDate.svelte";
 export { default as Label } from "./components/atoms/label/Label.svelte";
 export { default as ProgressBar } from "./components/atoms/feedback/progressBar/ProgressBar.svelte";
 export { default as Radio } from "./components/atoms/radio/Radio.svelte";
@@ -31,6 +32,7 @@ export { default as XScroll } from "./components/atoms/utils/xScroll/XScroll.sve
  * Molecules
  */
 
+export * as Calendar from "./components/molecules/calendar/index.js";
 export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";
 export { default as ComboBox } from "./components/molecules/comboBox/ComboBox.svelte";
 export { default as FormActions } from "./components/molecules/formActions/FormActions.svelte";
@@ -52,3 +54,4 @@ export * as Dialog from "./components/organisms/dialog/index.js";
 export * as Modal from "./components/organisms/modal/index.js";
 export { default as NotificationGroup } from "./components/organisms/notificationGroup/NotificationGroup.svelte";
 export * as Popover from "./components/organisms/popover/index.js";
+export * as Tooltip from "./components/organisms/tooltip/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "publishConfig": {
     "access": "public"
   },
@@ -33,16 +33,16 @@
     }
   },
   "dependencies": {
-    "@tiptap/core": "^3.21.0",
-    "@tiptap/extension-color": "^3.21.0",
-    "@tiptap/extension-highlight": "^3.21.0",
-    "@tiptap/extension-link": "^3.21.0",
-    "@tiptap/extension-placeholder": "^3.21.0",
-    "@tiptap/extension-text-align": "^3.21.0",
-    "@tiptap/extension-text-style": "^3.21.0",
-    "@tiptap/pm": "^3.21.0",
-    "@tiptap/starter-kit": "^3.21.0",
-    "bits-ui": "^2.16.5",
+    "@tiptap/core": "^3.22.2",
+    "@tiptap/extension-color": "^3.22.2",
+    "@tiptap/extension-highlight": "^3.22.2",
+    "@tiptap/extension-link": "^3.22.2",
+    "@tiptap/extension-placeholder": "^3.22.2",
+    "@tiptap/extension-text-align": "^3.22.2",
+    "@tiptap/extension-text-style": "^3.22.2",
+    "@tiptap/pm": "^3.22.2",
+    "@tiptap/starter-kit": "^3.22.2",
+    "bits-ui": "^2.17.2",
     "dompurify": "^3.3.3",
     "tailwind-variants": "^3.2.2"
   },
@@ -50,38 +50,38 @@
     "svelte": "^5.38.7"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.3",
+    "@eslint/compat": "^2.0.4",
     "@eslint/js": "^10.0.1",
-    "@storybook/addon-a11y": "^10.3.3",
-    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-a11y": "^10.3.4",
+    "@storybook/addon-docs": "^10.3.4",
     "@storybook/addon-svelte-csf": "^5.1.2",
-    "@storybook/sveltekit": "^10.3.3",
+    "@storybook/sveltekit": "^10.3.4",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "^2.56.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.2",
-    "@types/node": "^25.5.0",
-    "@vitest/browser": "^4.1.2",
-    "eslint": "^10.1.0",
+    "@types/node": "^25.5.2",
+    "@vitest/browser": "^4.1.3",
+    "eslint": "^10.2.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.3.3",
-    "eslint-plugin-svelte": "^3.16.0",
+    "eslint-plugin-storybook": "^10.3.4",
+    "eslint-plugin-svelte": "^3.17.0",
     "globals": "^17.4.0",
-    "playwright": "^1.58.2",
+    "playwright": "^1.59.1",
     "postcss-url": "^10.1.3",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.18",
-    "storybook": "^10.3.3",
+    "storybook": "^10.3.4",
     "svelte": "^5.55.1",
     "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.2",
+    "vite": "^8.0.6",
+    "vitest": "^4.1.3",
     "vitest-browser-svelte": "^2.1.0"
   },
   "keywords": [