@websline/system-components 1.4.6 → 1.4.8

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/components/molecules/richTextEditor/RichTextEditor.svelte

@@ -8,8 +8,10 @@
 		content = "",
 		fieldName = "",
 		hideToolbar = false,
+		initialFocus = true,
 		oninput,
 		placeholder = "",
+		readonly = false,
 		size = "medium",
 		toolbarConfig = {
 			bold: {
@@ -48,7 +50,7 @@
 	let htmlInputValue = $state();
 	let isContentPropUpdate = false;
 
-	let styles = $derived(richTextEditorVariants({ hideToolbar, size }));
+	let styles = $derived(richTextEditorVariants({ hideToolbar, readonly, size }));
 
 	setContext("richt-text-editor", () => editor);
 
@@ -132,6 +134,7 @@
 		});
 
 		editor = new Editor({
+			editable: !readonly,
 			element: element,
 			extensions: [
 				StarterKit.configure({
@@ -183,7 +186,7 @@
 			},
 		});
 
-		editor.commands.focus("end");
+		!readonly && initialFocus && editor.commands.focus("end");
 	};
 
 	$effect(() => {

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte.d.ts

@@ -8,8 +8,10 @@ declare const RichTextEditor: import("svelte").Component<{
     content?: string;
     fieldName?: string;
     hideToolbar?: boolean;
+    initialFocus?: boolean;
     oninput: any;
     placeholder?: string;
+    readonly?: boolean;
     size?: string;
     toolbarConfig?: Record<string, any>;
 } & Record<string, any>, {}, "">;
@@ -18,8 +20,10 @@ type $$ComponentProps = {
     content?: string;
     fieldName?: string;
     hideToolbar?: boolean;
+    initialFocus?: boolean;
     oninput: any;
     placeholder?: string;
+    readonly?: boolean;
     size?: string;
     toolbarConfig?: Record<string, any>;
 } & Record<string, any>;

package/dist/components/molecules/richTextEditor/richTextEditor.variants.d.ts

@@ -4,6 +4,12 @@ export const richTextEditorVariants: import("tailwind-variants").TVReturnType<{
             field: string;
         };
     };
+    readonly: {
+        true: {
+            base: string;
+            toolbar: string;
+        };
+    };
     size: {
         small: {
             field: string;
@@ -25,6 +31,12 @@ export const richTextEditorVariants: import("tailwind-variants").TVReturnType<{
             field: string;
         };
     };
+    readonly: {
+        true: {
+            base: string;
+            toolbar: string;
+        };
+    };
     size: {
         small: {
             field: string;
@@ -46,6 +58,12 @@ export const richTextEditorVariants: import("tailwind-variants").TVReturnType<{
             field: string;
         };
     };
+    readonly: {
+        true: {
+            base: string;
+            toolbar: string;
+        };
+    };
     size: {
         small: {
             field: string;

package/dist/components/molecules/richTextEditor/richTextEditor.variants.js

@@ -4,10 +4,10 @@ const richTextEditorVariants = tv({
 	slots: {
 		base: "body-small text-neutral-800 dark:text-white",
 		toolbar:
-			"pointer flex gap-0.5 rounded-t-sm border border-b-0 border-neutral-300 px-5 py-2 dark:border-neutral-700",
+			"pointer flex gap-0.5 rounded-t-lg border border-b-0 border-neutral-300 px-5 py-2 dark:border-neutral-700",
 		field: [
 			"[&>div]:transition-[border] [&>div]:duration-300",
-			"[&>div]:rounded-b-sm [&>div]:border [&>div]:border-neutral-300 [&>div]:outline-none dark:[&>div]:border-neutral-700",
+			"[&>div]:rounded-b-lg [&>div]:border [&>div]:border-neutral-300 [&>div]:outline-none dark:[&>div]:border-neutral-700",
 			"[&>div]:h-full [&>div]:overflow-auto [&>div]:p-5",
 			"[&>div>p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
 			"[&>div>p.is-editor-empty:first-child::before]:float-left",
@@ -22,7 +22,13 @@ const richTextEditorVariants = tv({
 	variants: {
 		hideToolbar: {
 			true: {
-				field: "[&>div]:rounded-t-sm",
+				field: "[&>div]:rounded-t-lg",
+			},
+		},
+		readonly: {
+			true: {
+				base: "cursor-not-allowed",
+				toolbar: "pointer-events-none *:opacity-40",
 			},
 		},
 		size: {

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,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "publishConfig": {
     "access": "public"
   },

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