@websline/system-components 1.4.4 → 1.4.7

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

@@ -21,6 +21,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 +38,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

@@ -31,6 +31,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 +53,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,100 +1,109 @@
 {
-  "name": "@websline/system-components",
-  "version": "1.4.4",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Websline/websline.system-components.git"
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "style": "./dist/index.css"
-    },
-    "./assets/*": "./dist/assets/*",
-    "./components/*": "./dist/components/*",
-    "./utils/*": "./dist/utils/*",
-    "./webfonts.css": {
-      "style": "./dist/webfonts.css"
-    }
-  },
-  "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",
-    "dompurify": "^3.3.3",
-    "tailwind-variants": "^3.2.2"
-  },
-  "peerDependencies": {
-    "svelte": "^5.38.7"
-  },
-  "devDependencies": {
-    "@eslint/compat": "^2.0.3",
-    "@eslint/js": "^10.0.1",
-    "@storybook/addon-a11y": "^10.3.3",
-    "@storybook/addon-docs": "^10.3.3",
-    "@storybook/addon-svelte-csf": "^5.1.2",
-    "@storybook/sveltekit": "^10.3.3",
-    "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.55.0",
-    "@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",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.3.3",
-    "eslint-plugin-svelte": "^3.16.0",
-    "globals": "^17.4.0",
-    "playwright": "^1.58.2",
-    "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",
-    "svelte": "^5.55.1",
-    "tailwindcss": "^4.2.2",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.2",
-    "vitest-browser-svelte": "^2.1.0"
-  },
-  "keywords": [
-    "svelte"
-  ],
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
-    "test:unit": "vitest",
-    "test": "npm run test:unit -- --run",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  }
-}
+	"name": "@websline/system-components",
+	"version": "1.4.7",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Websline/websline.system-components.git"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"prepare": "node scripts/generate-barrels.js && svelte-kit sync || echo ''",
+		"prepack": "pnpm prepare && svelte-package && publint",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"style": "./dist/index.css"
+		},
+		"./assets/*": "./dist/assets/*",
+		"./components/*": "./dist/components/*",
+		"./utils/*": "./dist/utils/*",
+		"./webfonts.css": {
+			"style": "./dist/webfonts.css"
+		}
+	},
+	"dependencies": {
+		"@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"
+	},
+	"peerDependencies": {
+		"svelte": "^5.38.7"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^2.0.4",
+		"@eslint/js": "^10.0.1",
+		"@storybook/addon-a11y": "^10.3.4",
+		"@storybook/addon-docs": "^10.3.4",
+		"@storybook/addon-svelte-csf": "^5.1.2",
+		"@storybook/sveltekit": "^10.3.4",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@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.2",
+		"@vitest/browser": "^4.1.3",
+		"eslint": "^10.2.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-storybook": "^10.3.4",
+		"eslint-plugin-svelte": "^3.17.0",
+		"globals": "^17.4.0",
+		"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.4",
+		"svelte": "^5.55.1",
+		"tailwindcss": "^4.2.2",
+		"typescript": "^5.9.3",
+		"vite": "^8.0.6",
+		"vitest": "^4.1.3",
+		"vitest-browser-svelte": "^2.1.0"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"@tailwindcss/oxide",
+			"esbuild"
+		]
+	},
+	"packageManager": "pnpm@10.20.0"
+}