@websline/system-components 1.4.6 → 1.4.7

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

@@ -52,6 +52,7 @@
 		error,
 		id,
 		name,
+		onchange,
 		required,
 		value = "on",
 		...rest
@@ -77,6 +78,7 @@
 		} else {
 			checked = e.target.checked;
 		}
+		onchange?.(e);
 	};
 
 	$effect(() => {

package/dist/index.d.ts

@@ -12,7 +12,6 @@ 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";

package/dist/index.js

@@ -17,7 +17,6 @@ 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";

package/package.json

@@ -1,100 +1,109 @@
 {
-  "name": "@websline/system-components",
-  "version": "1.4.6",
-  "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.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"
-  ],
-  "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"
+}

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

@@ -1,114 +0,0 @@
-<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

@@ -1,97 +0,0 @@
-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

@@ -1,36 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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 };