@websline/system-components 1.4.7 → 1.5.0

package/dist/components/molecules/calendar/calendar.variant.d.ts

@@ -3,17 +3,17 @@ export const calendarVariants: import("tailwind-variants").TVReturnType<{
         [key: string]: import("tailwind-variants").ClassValue | {
             heading?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
-            dateCell?: import("tailwind-variants").ClassValue;
-            dateDay?: import("tailwind-variants").ClassValue;
             grid?: import("tailwind-variants").ClassValue;
             gridHead?: import("tailwind-variants").ClassValue;
             gridHeadCell?: import("tailwind-variants").ClassValue;
             gridRow?: import("tailwind-variants").ClassValue;
             gridWrapper?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            headerBtn?: import("tailwind-variants").ClassValue;
             rangeBg?: import("tailwind-variants").ClassValue;
             rangeWrapper?: import("tailwind-variants").ClassValue;
+            dateCell?: import("tailwind-variants").ClassValue;
+            dateDay?: import("tailwind-variants").ClassValue;
+            headerBtn?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
@@ -21,17 +21,17 @@ export const calendarVariants: import("tailwind-variants").TVReturnType<{
         [x: string]: import("tailwind-variants").ClassValue | {
             heading?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
-            dateCell?: import("tailwind-variants").ClassValue;
-            dateDay?: import("tailwind-variants").ClassValue;
             grid?: import("tailwind-variants").ClassValue;
             gridHead?: import("tailwind-variants").ClassValue;
             gridHeadCell?: import("tailwind-variants").ClassValue;
             gridRow?: import("tailwind-variants").ClassValue;
             gridWrapper?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            headerBtn?: import("tailwind-variants").ClassValue;
             rangeBg?: import("tailwind-variants").ClassValue;
             rangeWrapper?: import("tailwind-variants").ClassValue;
+            dateCell?: import("tailwind-variants").ClassValue;
+            dateDay?: import("tailwind-variants").ClassValue;
+            headerBtn?: import("tailwind-variants").ClassValue;
         };
     };
 }, {

package/dist/components/molecules/comboBox/ComboBox.svelte.d.ts

@@ -7,89 +7,89 @@ declare const ComboBox: import("svelte").Component<{
     /**
      * Whether the input should be autofocused on mount
      */
-    autofocus?: boolean;
+    autofocus?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the component is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the component has an error state
      */
-    error?: boolean;
+    error?: boolean | undefined;
     /**
      * The ID of the input element
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The name of the input, used for form submission
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The available tag options
      */
-    options?: Array<{
+    options?: {
         id: string | number;
         label: string;
-    }>;
+    }[] | undefined;
     /**
      * The placeholder text for the input
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
      * Whether the component is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * The currently selected tags, bound to the component
      */
-    value?: Array<string | number>;
+    value?: (string | number)[] | undefined;
 }, {}, "value">;
 type Props = {
     /**
      * Whether the input should be autofocused on mount
      */
-    autofocus?: boolean;
+    autofocus?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the component is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the component has an error state
      */
-    error?: boolean;
+    error?: boolean | undefined;
     /**
      * The ID of the input element
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The name of the input, used for form submission
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The available tag options
      */
-    options?: Array<{
+    options?: {
         id: string | number;
         label: string;
-    }>;
+    }[] | undefined;
     /**
      * The placeholder text for the input
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
      * Whether the component is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * The currently selected tags, bound to the component
      */
-    value?: Array<string | number>;
+    value?: (string | number)[] | undefined;
 };

package/dist/components/molecules/formActions/FormActions.svelte.d.ts

@@ -7,35 +7,35 @@ declare const FormActions: import("svelte").Component<{
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * If true, the default layout is disabled
      */
-    customLayout?: boolean;
+    customLayout?: boolean | undefined;
     /**
      * If true, the form actions will take the full width of its container
      */
-    fullWidth?: boolean;
+    fullWidth?: boolean | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * If true, the default layout is disabled
      */
-    customLayout?: boolean;
+    customLayout?: boolean | undefined;
     /**
      * If true, the form actions will take the full width of its container
      */
-    fullWidth?: boolean;
+    fullWidth?: boolean | undefined;
 };

package/dist/components/molecules/formField/FormField.svelte.d.ts

@@ -7,83 +7,83 @@ declare const FormField: import("svelte").Component<{
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the form field is disabled (passed down to the input)
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the form field has an error (passed down to the input)
      */
-    error?: boolean;
+    error?: boolean | undefined;
     /**
      * The error text for the form field
      */
-    errorText?: string;
+    errorText?: string | undefined;
     /**
      * The helper text for the form field
      */
-    helperText?: string;
+    helperText?: string | undefined;
     /**
      * The id attribute for the form field (passed down to the input)
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The label text for the form field
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * The layout of the input and label
      */
-    layout?: "stacked" | "inline" | "checkable";
+    layout?: "inline" | "stacked" | "checkable" | undefined;
     /**
      * Whether the form field is required (passed down to the input)
      */
-    required?: boolean;
+    required?: boolean | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the form field is disabled (passed down to the input)
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the form field has an error (passed down to the input)
      */
-    error?: boolean;
+    error?: boolean | undefined;
     /**
      * The error text for the form field
      */
-    errorText?: string;
+    errorText?: string | undefined;
     /**
      * The helper text for the form field
      */
-    helperText?: string;
+    helperText?: string | undefined;
     /**
      * The id attribute for the form field (passed down to the input)
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The label text for the form field
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * The layout of the input and label
      */
-    layout?: "stacked" | "inline" | "checkable";
+    layout?: "inline" | "stacked" | "checkable" | undefined;
     /**
      * Whether the form field is required (passed down to the input)
      */
-    required?: boolean;
+    required?: boolean | undefined;
 };

package/dist/components/molecules/formLayout/FormLayout.svelte.d.ts

@@ -7,27 +7,27 @@ declare const FormLayout: import("svelte").Component<{
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Gap between form elements (in Tailwind spacing scale)
      */
-    gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+    gap?: 0 | 3 | 1 | 2 | 8 | 4 | 6 | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Gap between form elements (in Tailwind spacing scale)
      */
-    gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+    gap?: 0 | 3 | 1 | 2 | 8 | 4 | 6 | undefined;
 };

package/dist/components/molecules/notifications/systemAlert/SystemAlert.svelte.d.ts

@@ -7,51 +7,51 @@ declare const SystemAlert: import("svelte").Component<{
     /**
      * Whether to automatically close the system alert after a duration
      */
-    autoClose?: boolean;
+    autoClose?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Icon to display in the system alert
      */
-    icon?: string;
+    icon?: string | undefined;
     /**
      * Message to display in the system alert
      */
-    message?: string;
+    message?: string | undefined;
     /**
      * Title to display in the system alert
      */
-    title?: string;
+    title?: string | undefined;
     /**
      * System alert variant
      */
-    variant?: "info" | "success" | "warning" | "error";
+    variant?: "error" | "success" | "warning" | "info" | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Whether to automatically close the system alert after a duration
      */
-    autoClose?: boolean;
+    autoClose?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Icon to display in the system alert
      */
-    icon?: string;
+    icon?: string | undefined;
     /**
      * Message to display in the system alert
      */
-    message?: string;
+    message?: string | undefined;
     /**
      * Title to display in the system alert
      */
-    title?: string;
+    title?: string | undefined;
     /**
      * System alert variant
      */
-    variant?: "info" | "success" | "warning" | "error";
+    variant?: "error" | "success" | "warning" | "info" | undefined;
 };

package/dist/components/molecules/notifications/toast/Toast.svelte.d.ts

@@ -7,43 +7,43 @@ declare const Toast: import("svelte").Component<{
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Duration in seconds before auto-close triggers
      */
-    durationInSeconds?: number;
+    durationInSeconds?: number | undefined;
     /**
      * Message to display in the toast
      */
-    message?: string;
+    message?: string | undefined;
     /**
      * Function to call when the toast is auto-closed
      */
-    onClose?: (event: any) => void;
+    onClose?: ((event: any) => void) | undefined;
     /**
      * Toast variant
      */
-    variant?: "info" | "loading" | "error";
+    variant?: "error" | "loading" | "info" | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Duration in seconds before auto-close triggers
      */
-    durationInSeconds?: number;
+    durationInSeconds?: number | undefined;
     /**
      * Message to display in the toast
      */
-    message?: string;
+    message?: string | undefined;
     /**
      * Function to call when the toast is auto-closed
      */
-    onClose?: (event: any) => void;
+    onClose?: ((event: any) => void) | undefined;
     /**
      * Toast variant
      */
-    variant?: "info" | "loading" | "error";
+    variant?: "error" | "loading" | "info" | undefined;
 };

package/dist/components/molecules/pickers/colorSwatch/ColorSwatch.svelte.d.ts

@@ -7,51 +7,51 @@ declare const ColorSwatch: import("svelte").Component<{
     /**
      * The color items
      */
-    children?: string;
+    children?: string | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Selected color value (hex, rgb, etc.)
      */
-    selectedColor?: string;
+    selectedColor?: string | undefined;
     /**
      * ColorSwatch size
      */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | undefined;
     /**
      * letter "A" for text -> "B" for background
      */
-    type?: "text" | "background";
+    type?: "text" | "background" | undefined;
     /**
      * ColorSwatch style
      */
-    variant?: "filled" | "transparent";
+    variant?: "filled" | "transparent" | undefined;
 }, {}, "isOpen">;
 type Props = {
     /**
      * The color items
      */
-    children?: string;
+    children?: string | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Selected color value (hex, rgb, etc.)
      */
-    selectedColor?: string;
+    selectedColor?: string | undefined;
     /**
      * ColorSwatch size
      */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | undefined;
     /**
      * letter "A" for text -> "B" for background
      */
-    type?: "text" | "background";
+    type?: "text" | "background" | undefined;
     /**
      * ColorSwatch style
      */
-    variant?: "filled" | "transparent";
+    variant?: "filled" | "transparent" | undefined;
 };

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);
 
@@ -67,7 +69,7 @@
 			parseHTML() {
 				return [
 					{ tag: "a[data-anchor]" },
-					{ tag: "a[data-page-uuid]" },
+					{ tag: "a[data-entity-type][data-entity-id]" },
 					{ tag: "a[href]" },
 				];
 			},
@@ -78,12 +80,21 @@
 						parseHTML: (el) => el.getAttribute("href"),
 					},
 
-					pageUuid: {
+					entityType: {
 						default: null,
-						parseHTML: (el) => el.getAttribute("data-page-uuid"),
+						parseHTML: (el) => el.getAttribute("data-entity-type"),
 						renderHTML: (attrs) => {
-							if (!attrs.pageUuid) return {};
-							return { "data-page-uuid": attrs.pageUuid };
+							if (!attrs.entityType) return {};
+							return { "data-entity-type": attrs.entityType };
+						},
+					},
+
+					entityId: {
+						default: null,
+						parseHTML: (el) => el.getAttribute("data-entity-id"),
+						renderHTML: (attrs) => {
+							if (!attrs.entityId) return {};
+							return { "data-entity-id": attrs.entityId };
 						},
 					},
 
@@ -132,6 +143,7 @@
 		});
 
 		editor = new Editor({
+			editable: !readonly,
 			element: element,
 			extensions: [
 				StarterKit.configure({
@@ -183,7 +195,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: {