@websline/system-components 1.4.7 → 1.5.0

package/dist/components/atoms/actions/button/Button.svelte.d.ts

@@ -7,99 +7,99 @@ declare const Button: import("svelte").Component<{
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * The HTML element to use for the button
      */
-    as?: string;
+    as?: string | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Button color
      */
-    color?: "primary" | "secondary" | "success" | "error";
+    color?: "error" | "primary" | "secondary" | "success" | undefined;
     /**
      * Whether the button is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the button should take the full width of its container
      */
-    fullWidth?: boolean;
+    fullWidth?: boolean | undefined;
     /**
      * Name of the icon to add to this button
      */
-    icon?: string;
+    icon?: string | undefined;
     /**
      * Position for this button's icon
      */
-    iconPosition?: "start" | "end";
+    iconPosition?: "end" | "start" | undefined;
     /**
      * Whether the button is in a loading state, for example after a form submission
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /**
      * Button size
      */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | undefined;
     /**
      * Button type, e.g. "button", "submit", "reset"
      */
-    type?: string;
+    type?: string | undefined;
     /**
      * Button style
      */
-    variant?: "filled" | "outlined" | "text";
+    variant?: "text" | "filled" | "outlined" | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Children content – can be text, HTML, or other Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * The HTML element to use for the button
      */
-    as?: string;
+    as?: string | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Button color
      */
-    color?: "primary" | "secondary" | "success" | "error";
+    color?: "error" | "primary" | "secondary" | "success" | undefined;
     /**
      * Whether the button is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the button should take the full width of its container
      */
-    fullWidth?: boolean;
+    fullWidth?: boolean | undefined;
     /**
      * Name of the icon to add to this button
      */
-    icon?: string;
+    icon?: string | undefined;
     /**
      * Position for this button's icon
      */
-    iconPosition?: "start" | "end";
+    iconPosition?: "end" | "start" | undefined;
     /**
      * Whether the button is in a loading state, for example after a form submission
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /**
      * Button size
      */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | undefined;
     /**
      * Button type, e.g. "button", "submit", "reset"
      */
-    type?: string;
+    type?: string | undefined;
     /**
      * Button style
      */
-    variant?: "filled" | "outlined" | "text";
+    variant?: "text" | "filled" | "outlined" | undefined;
 };

package/dist/components/atoms/actions/closeButton/CloseButton.svelte.d.ts

@@ -7,43 +7,43 @@ declare const CloseButton: import("svelte").Component<{
     /**
      * Whether the button should automatically close after a duration
      */
-    autoClose?: boolean;
+    autoClose?: boolean | undefined;
     /**
      * Duration in seconds before auto-close triggers
      */
-    durationInSeconds?: number;
+    durationInSeconds?: number | undefined;
     /**
      * Function to call when the button is clicked or auto-closed
      */
-    onClose?: (event: any) => void;
+    onClose?: ((event: any) => void) | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Button shape
      */
-    shape?: "circle" | "square";
+    shape?: "circle" | "square" | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Whether the button should automatically close after a duration
      */
-    autoClose?: boolean;
+    autoClose?: boolean | undefined;
     /**
      * Duration in seconds before auto-close triggers
      */
-    durationInSeconds?: number;
+    durationInSeconds?: number | undefined;
     /**
      * Function to call when the button is clicked or auto-closed
      */
-    onClose?: (event: any) => void;
+    onClose?: ((event: any) => void) | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Button shape
      */
-    shape?: "circle" | "square";
+    shape?: "circle" | "square" | undefined;
 };

package/dist/components/atoms/actions/iconButton/IconButton.svelte.d.ts

@@ -7,27 +7,27 @@ declare const IconButton: import("svelte").Component<{
     /**
      * The HTML element to use for the button
      */
-    as?: string;
+    as?: string | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Button color
      */
-    color?: "default" | "primary" | "secondary" | "success" | "error" | "transparent";
+    color?: "error" | "primary" | "secondary" | "success" | "default" | "transparent" | undefined;
     /**
      * Whether the button is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the button is in a loading state, for example after a form submission
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /**
      * Icon name
      */
-    icon?: string;
+    icon?: string | undefined;
     /**
      * Override the default icon size (size ==== large ? 24 : 16)
      */
@@ -35,45 +35,45 @@ declare const IconButton: import("svelte").Component<{
     /**
      * Button shape
      */
-    shape?: "circle" | "square";
+    shape?: "circle" | "square" | undefined;
     /**
      * Button size
      */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | undefined;
     /**
      * Button type, e.g. "button", "submit", "reset"
      */
-    type?: string;
+    type?: string | undefined;
     /**
      * Button style
      */
-    variant?: "filled" | "outlined";
+    variant?: "filled" | "outlined" | undefined;
 }, {}, "">;
 type Props = {
     /**
      * The HTML element to use for the button
      */
-    as?: string;
+    as?: string | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Button color
      */
-    color?: "default" | "primary" | "secondary" | "success" | "error" | "transparent";
+    color?: "error" | "primary" | "secondary" | "success" | "default" | "transparent" | undefined;
     /**
      * Whether the button is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the button is in a loading state, for example after a form submission
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /**
      * Icon name
      */
-    icon?: string;
+    icon?: string | undefined;
     /**
      * Override the default icon size (size ==== large ? 24 : 16)
      */
@@ -81,17 +81,17 @@ type Props = {
     /**
      * Button shape
      */
-    shape?: "circle" | "square";
+    shape?: "circle" | "square" | undefined;
     /**
      * Button size
      */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium" | "large" | undefined;
     /**
      * Button type, e.g. "button", "submit", "reset"
      */
-    type?: string;
+    type?: string | undefined;
     /**
      * Button style
      */
-    variant?: "filled" | "outlined";
+    variant?: "filled" | "outlined" | undefined;
 };

package/dist/components/atoms/avatar/Avatar.svelte.d.ts

@@ -7,59 +7,59 @@ declare const Avatar: import("svelte").Component<{
     /**
      * The HTML element to use for the avatar
      */
-    as?: string;
+    as?: string | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the avatar should be lazy-loaded
      */
-    lazy?: boolean;
+    lazy?: boolean | undefined;
     /**
      * The name of the avatar
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The shape of the avatar
      */
-    shape?: "circle" | "square";
+    shape?: "circle" | "square" | undefined;
     /**
      * Avatar size
      */
-    size?: "small" | "medium" | "large" | "extraLarge";
+    size?: "small" | "medium" | "large" | "extraLarge" | undefined;
     /**
      * The source URL of the avatar image
      */
-    src?: string;
+    src?: string | undefined;
 }, {}, "">;
 type Props = {
     /**
      * The HTML element to use for the avatar
      */
-    as?: string;
+    as?: string | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the avatar should be lazy-loaded
      */
-    lazy?: boolean;
+    lazy?: boolean | undefined;
     /**
      * The name of the avatar
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The shape of the avatar
      */
-    shape?: "circle" | "square";
+    shape?: "circle" | "square" | undefined;
     /**
      * Avatar size
      */
-    size?: "small" | "medium" | "large" | "extraLarge";
+    size?: "small" | "medium" | "large" | "extraLarge" | undefined;
     /**
      * The source URL of the avatar image
      */
-    src?: string;
+    src?: string | undefined;
 };

package/dist/components/atoms/badge/Badge.svelte.d.ts

@@ -7,59 +7,59 @@ declare const Badge: import("svelte").Component<{
     /**
      * Horizontal position of the badge
      */
-    align?: "start" | "end";
+    align?: "end" | "start" | undefined;
     /**
      * Vertical position of the badge
      */
-    anchor?: "top" | "center" | "bottom" | "inline";
+    anchor?: "bottom" | "top" | "center" | "inline" | undefined;
     /**
      * 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 badge
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Set the color of the badge
      */
-    color?: "primary" | "secondary" | "error";
+    color?: "error" | "primary" | "secondary" | undefined;
     /**
      * Set the visible number in the badge
      */
-    count?: number;
+    count?: number | undefined;
     /**
      * Additional CSS classes to apply to the badge wrapper
      */
-    wrapperClass?: string;
+    wrapperClass?: string | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Horizontal position of the badge
      */
-    align?: "start" | "end";
+    align?: "end" | "start" | undefined;
     /**
      * Vertical position of the badge
      */
-    anchor?: "top" | "center" | "bottom" | "inline";
+    anchor?: "bottom" | "top" | "center" | "inline" | undefined;
     /**
      * 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 badge
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Set the color of the badge
      */
-    color?: "primary" | "secondary" | "error";
+    color?: "error" | "primary" | "secondary" | undefined;
     /**
      * Set the visible number in the badge
      */
-    count?: number;
+    count?: number | undefined;
     /**
      * Additional CSS classes to apply to the badge wrapper
      */
-    wrapperClass?: string;
+    wrapperClass?: string | undefined;
 };

package/dist/components/atoms/checkbox/Checkbox.svelte.d.ts

@@ -7,67 +7,67 @@ declare const Checkbox: import("svelte").Component<{
     /**
      * Wether this radio is checked or not, bound to the component
      */
-    checked?: boolean;
+    checked?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the radio is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the radio has an error state
      */
-    error?: boolean;
+    error?: boolean | undefined;
     /**
      * The ID of the radio element
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The name of the radio, used for form submission
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Whether the radio is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * The value of the radio
      */
-    value?: string;
+    value?: string | undefined;
 }, {}, "checked">;
 type Props = {
     /**
      * Wether this radio is checked or not, bound to the component
      */
-    checked?: boolean;
+    checked?: boolean | undefined;
     /**
      * Additional CSS classes to apply to the component
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the radio is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the radio has an error state
      */
-    error?: boolean;
+    error?: boolean | undefined;
     /**
      * The ID of the radio element
      */
-    id?: string;
+    id?: string | undefined;
     /**
      * The name of the radio, used for form submission
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Whether the radio is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * The value of the radio
      */
-    value?: string;
+    value?: string | undefined;
 };

package/dist/components/atoms/chip/Chip.svelte.d.ts

@@ -7,75 +7,75 @@ declare const Chip: import("svelte").Component<{
     /**
      * Content inside the chip – can be text, HTML, or Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes for the chip
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the Chip is clickable (this disables selected state)
      */
-    clickable?: boolean;
+    clickable?: boolean | undefined;
     /**
      * Chip color variant
      */
-    color?: "default" | "primary" | "error" | "success" | "warning";
+    color?: "error" | "primary" | "success" | "default" | "warning" | undefined;
     /**
      * Name of the icon to display
      */
-    icon?: string;
+    icon?: string | undefined;
     /**
      * Position of the icon relative to the content
      */
-    iconPosition?: "start" | "end";
+    iconPosition?: "end" | "start" | undefined;
     /**
      * Whether the chip is in a visually selected state
      */
-    selected?: boolean;
+    selected?: boolean | undefined;
     /**
      * Size of the chip
      */
-    size?: "small" | "big";
+    size?: "small" | "big" | undefined;
     /**
      * Visual style of the chip
      */
-    variant?: "filled" | "outline" | "dashed";
+    variant?: "filled" | "dashed" | "outline" | undefined;
 }, {}, "">;
 type Props = {
     /**
      * Content inside the chip – can be text, HTML, or Svelte components
      */
-    children?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[]> | undefined;
     /**
      * Additional CSS classes for the chip
      */
-    class?: string;
+    class?: string | undefined;
     /**
      * Whether the Chip is clickable (this disables selected state)
      */
-    clickable?: boolean;
+    clickable?: boolean | undefined;
     /**
      * Chip color variant
      */
-    color?: "default" | "primary" | "error" | "success" | "warning";
+    color?: "error" | "primary" | "success" | "default" | "warning" | undefined;
     /**
      * Name of the icon to display
      */
-    icon?: string;
+    icon?: string | undefined;
     /**
      * Position of the icon relative to the content
      */
-    iconPosition?: "start" | "end";
+    iconPosition?: "end" | "start" | undefined;
     /**
      * Whether the chip is in a visually selected state
      */
-    selected?: boolean;
+    selected?: boolean | undefined;
     /**
      * Size of the chip
      */
-    size?: "small" | "big";
+    size?: "small" | "big" | undefined;
     /**
      * Visual style of the chip
      */
-    variant?: "filled" | "outline" | "dashed";
+    variant?: "filled" | "dashed" | "outline" | undefined;
 };