@tuspe/components 1.8.14 → 1.9.0

package/README.md

@@ -25,7 +25,7 @@ A breadcrumb navigation provide links back to previous pages, and shows the user
     position?: string
   }
 
-  interface Props {
+  type Props =  {
     homeName?: string
     homeSlug?: string
     onlyMeta?: boolean
@@ -39,7 +39,7 @@ A breadcrumb navigation provide links back to previous pages, and shows the user
 Easily replace most buttons in your project with this versatile button component. The `control` value makes it ideal for icons and as a toggler for the mobile menu.
 
 ```TypeScript
-  interface Props {
+  type Props =  {
     ariaControls?: string | undefined
     ariaExpanded?: boolean | undefined
     ariaLabel?: string | undefined
@@ -82,7 +82,7 @@ Easily replace most buttons in your project with this versatile button component
 Arrow icons for navigation, such as image sliders or content transitions.
 
 ```TypeScript
-  interface Props {
+  type Props =  {
     ariaLabel: string
     color?: string
     direction: 'left' | 'right'
@@ -96,7 +96,7 @@ Arrow icons for navigation, such as image sliders or content transitions.
 Close button for modals and other dismissible elements.
 
 ```TypeScript
-  interface Props {
+  type Props =  {
     ariaLabel?: string
     color?: string
     hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
@@ -111,7 +111,7 @@ Close button for modals and other dismissible elements.
 A button for toggling the mobile menu, dynamically changing its icon based on the menu's open or closed state.
 
 ```TypeScript
-  interface Props {
+  type Props =  {
     ariaControls: string
     color?: 'black' | 'white'
     extraClass?: string
@@ -135,7 +135,7 @@ A versatile image component supporting various aspect ratios and object fit opti
     width?: number
   }
 
-  interface Props {
+  type Props =  {
     ariaHidden?: boolean
     aspect?: '3:4' | '4:3' | 'square' | 'video'
     ball?: boolean
@@ -155,7 +155,7 @@ A versatile image component supporting various aspect ratios and object fit opti
 A flexible `Input` component supporting common input types with basic styling for form fields. It includes optional attributes for labels, placeholders, min/max values, steps, and event handlers but does not perform content validation.
 
 ```TypeScript
-  interface Props {
+  type Props =  {
     onchange?: () => void
     onclick?: () => void
     borderColor?: string
@@ -183,7 +183,7 @@ A customizable `Select` component for choosing from a list of options. Supports
     value: number | string
   }
 
-  interface Props {
+  type Props =  {
     disabled?: boolean
     id?: string
     innerClass?: string
@@ -202,7 +202,7 @@ A customizable `Select` component for choosing from a list of options. Supports
 Allows users to toggle between checked and unchecked states.
 
 ```TypeScript
-  interface Props {
+  type Props =  {
     checked?: boolean
     children: Snippet
     disabled?: boolean
@@ -220,7 +220,7 @@ Allows users to toggle between checked and unchecked states.
 A simple `Modal` component that displays a popup with customizable content.
 
 ```TypeScript
-  interface Props {
+  type Props =  {
     children: Snippet
     buttonAriaLabel?: string
     colorButton?: string

package/dist/Breadcrumbs.svelte

@@ -1,18 +1,12 @@
 <script lang="ts">
   import {page} from '$app/state'
   import {onMount} from 'svelte'
-  import {validateArray, type Breadcrumb} from './'
+  import {validateArray} from './index'
+  import type {Breadcrumb} from './index'
+  import type {BreadcrumbView} from './types'
 
-  interface Props {
-    homeName?: string
-    homeSlug?: string
-    onlyMeta?: boolean
-    outerClass?: string
-    values: Breadcrumb[]
-  }
-
-  let {homeName = 'Etusivu', homeSlug = '', onlyMeta = false, outerClass, values}: Props = $props(),
-    classes = $state('truncate')
+  let {homeName = 'Etusivu', homeSlug = '', onlyMeta = false, outerClass, values}: BreadcrumbView = $props()
+  let classes = $state('truncate')
 
   const origin = page.url.origin + '/'
 

package/dist/Breadcrumbs.svelte.d.ts

@@ -1,11 +1,4 @@
-import { type Breadcrumb } from './';
-interface Props {
-    homeName?: string;
-    homeSlug?: string;
-    onlyMeta?: boolean;
-    outerClass?: string;
-    values: Breadcrumb[];
-}
-declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+import type { BreadcrumbView } from './types';
+declare const Breadcrumbs: import("svelte").Component<BreadcrumbView, {}, "">;
 type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
 export default Breadcrumbs;

package/dist/Button.svelte

@@ -1,43 +1,6 @@
 <script lang="ts">
-  import {loading} from './'
-  import type {Snippet} from 'svelte'
-
-  interface Props {
-    ariaControls?: string | undefined
-    ariaExpanded?: boolean | undefined
-    ariaLabel?: string | undefined
-    ariaPopup?: 'dialog' | 'listbox' | 'menu' | undefined
-    borderColor?: 'content' | 'default' | 'primary'
-    borderSize?: 0 | 1 | 2
-    children: Snippet
-    color?: string
-    colorBg?: string
-    control?: boolean
-    disabled?: boolean
-    extraClass?: string
-    fill?: boolean
-    fontWeight?: 'normal' | 'bold'
-    fullWidth?: boolean
-    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
-    hoverText?: 'black' | 'primary' | 'secondary' | 'white'
-    href?: string | undefined
-    id?: string
-    noCenter?: boolean
-    noHeight?: boolean
-    noPadding?: boolean
-    noSpinner?: boolean
-    onclick?: any
-    preload?: 'hover' | 'tap'
-    rel?: string
-    role?: string
-    rounded?: 'full' | 'lg' | 'none' | 'sm'
-    spinnerColor?: 'black' | 'white'
-    target?: '_blank' | '_top' | undefined
-    title?: string | undefined
-    type?: 'submit'
-    uppercase?: boolean
-    value?: string | number
-  }
+  import {loading} from './index.ts'
+  import type {ButtonView} from './types.ts'
 
   let {
     ariaControls,
@@ -74,7 +37,7 @@
     type,
     uppercase = true,
     value
-  }: Props = $props()
+  }: ButtonView = $props()
 
   let classes = $state(`btn text-${color}`)
 
@@ -163,7 +126,7 @@
     height: 20px;
     width: 20px;
   }
-  .loader.white {
+  .loader.black {
     border-top-color: #000;
   }
   .loader.white {

package/dist/Button.svelte.d.ts

@@ -1,40 +1,4 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    ariaControls?: string | undefined;
-    ariaExpanded?: boolean | undefined;
-    ariaLabel?: string | undefined;
-    ariaPopup?: 'dialog' | 'listbox' | 'menu' | undefined;
-    borderColor?: 'content' | 'default' | 'primary';
-    borderSize?: 0 | 1 | 2;
-    children: Snippet;
-    color?: string;
-    colorBg?: string;
-    control?: boolean;
-    disabled?: boolean;
-    extraClass?: string;
-    fill?: boolean;
-    fontWeight?: 'normal' | 'bold';
-    fullWidth?: boolean;
-    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
-    hoverText?: 'black' | 'primary' | 'secondary' | 'white';
-    href?: string | undefined;
-    id?: string;
-    noCenter?: boolean;
-    noHeight?: boolean;
-    noPadding?: boolean;
-    noSpinner?: boolean;
-    onclick?: any;
-    preload?: 'hover' | 'tap';
-    rel?: string;
-    role?: string;
-    rounded?: 'full' | 'lg' | 'none' | 'sm';
-    spinnerColor?: 'black' | 'white';
-    target?: '_blank' | '_top' | undefined;
-    title?: string | undefined;
-    type?: 'submit';
-    uppercase?: boolean;
-    value?: string | number;
-}
-declare const Button: import("svelte").Component<Props, {}, "">;
+import type { ButtonView } from './types.ts';
+declare const Button: import("svelte").Component<ButtonView, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/ButtonArrow.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
   import Button from './Button.svelte'
-  interface Props {
-    ariaLabel: string
-    color?: string
-    direction: 'left' | 'right'
-    id?: string
-    onclick?: () => any
-  }
-  let {onclick, ariaLabel, color = 'black', direction, id}: Props = $props()
+  import type {ButtonArrowView} from './types'
+  let {onclick, ariaLabel, color = 'black', direction, id}: ButtonArrowView = $props()
 </script>
 
 <Button {ariaLabel} control {color} {id} {onclick}>

package/dist/ButtonArrow.svelte.d.ts

@@ -1,10 +1,4 @@
-interface Props {
-    ariaLabel: string;
-    color?: string;
-    direction: 'left' | 'right';
-    id?: string;
-    onclick?: () => any;
-}
-declare const ButtonArrow: import("svelte").Component<Props, {}, "">;
+import type { ButtonArrowView } from './types';
+declare const ButtonArrow: import("svelte").Component<ButtonArrowView, {}, "">;
 type ButtonArrow = ReturnType<typeof ButtonArrow>;
 export default ButtonArrow;

package/dist/ButtonClose.svelte

@@ -1,16 +1,7 @@
 <script lang="ts">
   import Button from './Button.svelte'
-
-  interface Props {
-    ariaLabel?: string
-    color?: string
-    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
-    hoverText?: 'black' | 'primary' | 'secondary' | 'white'
-    id?: string
-    onclick?: any
-  }
-
-  let {ariaLabel, color = 'white', hover = 'transparent', id, onclick}: Props = $props()
+  import type {ButtonCloseView} from './types'
+  let {ariaLabel, color = 'white', hover = 'transparent', id, onclick}: ButtonCloseView = $props()
 </script>
 
 <div class="close-button">

package/dist/ButtonClose.svelte.d.ts

@@ -1,11 +1,4 @@
-interface Props {
-    ariaLabel?: string;
-    color?: string;
-    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
-    hoverText?: 'black' | 'primary' | 'secondary' | 'white';
-    id?: string;
-    onclick?: any;
-}
-declare const ButtonClose: import("svelte").Component<Props, {}, "">;
+import type { ButtonCloseView } from './types';
+declare const ButtonClose: import("svelte").Component<ButtonCloseView, {}, "">;
 type ButtonClose = ReturnType<typeof ButtonClose>;
 export default ButtonClose;

package/dist/ButtonMenu.svelte

@@ -1,16 +1,7 @@
 <script lang="ts">
   import Button from './Button.svelte'
-  interface Props {
-    ariaControls: string
-    color?: 'black' | 'white'
-    extraClass?: string
-    hidden?: boolean
-    id?: string
-    onclick?: () => any
-    open: boolean
-    title: string
-  }
-  let {ariaControls, title, color = 'white', extraClass, hidden = false, id, open = $bindable()}: Props = $props()
+  import type {ButtonMenuView} from './types'
+  let {ariaControls, title, color = 'white', extraClass, hidden = false, id, open = $bindable()}: ButtonMenuView = $props()
   const handleOpen = () => {
     open = !open
   }

package/dist/ButtonMenu.svelte.d.ts

@@ -1,13 +1,4 @@
-interface Props {
-    ariaControls: string;
-    color?: 'black' | 'white';
-    extraClass?: string;
-    hidden?: boolean;
-    id?: string;
-    onclick?: () => any;
-    open: boolean;
-    title: string;
-}
-declare const ButtonMenu: import("svelte").Component<Props, {}, "open">;
+import type { ButtonMenuView } from './types';
+declare const ButtonMenu: import("svelte").Component<ButtonMenuView, {}, "open">;
 type ButtonMenu = ReturnType<typeof ButtonMenu>;
 export default ButtonMenu;

package/dist/Checkbox.svelte

@@ -1,21 +1,18 @@
 <script lang="ts">
   import {loading} from './'
-  import type {Snippet} from 'svelte'
-
-  interface Props {
-    children: Snippet
-    onchange?: () => void
-    checked?: boolean
-    disabled?: boolean
-    group?: boolean
-    id?: string
-    outerClass?: string
-    required?: boolean
-    value?: number | string
-  }
-
-  let {children, onchange, checked = $bindable(false), disabled, group = $bindable(), id, outerClass, required, value, ...props}: Props = $props()
-
+  import type {CheckboxView} from './types'
+  let {
+    children,
+    onchange,
+    checked = $bindable(false),
+    disabled,
+    group = $bindable(),
+    id,
+    outerClass,
+    required,
+    value,
+    ...props
+  }: CheckboxView = $props()
   let classes = $state('input-checkbox')
   if (outerClass) {
     classes += ` ${outerClass}`
@@ -23,7 +20,7 @@
 </script>
 
 <label class={classes}>
-  <input bind:checked disabled={disabled || $loading} {id} {onchange} {required} type="checkbox" {value} {...props} />
+  <input bind:checked disabled={disabled || $loading ? true : false} {id} {onchange} {required} type="checkbox" {value} {...props} />
   <span>
     {@render children?.()}
     {#if required}<sup>*</sup>{/if}

package/dist/Checkbox.svelte.d.ts

@@ -1,15 +1,4 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    children: Snippet;
-    onchange?: () => void;
-    checked?: boolean;
-    disabled?: boolean;
-    group?: boolean;
-    id?: string;
-    outerClass?: string;
-    required?: boolean;
-    value?: number | string;
-}
-declare const Checkbox: import("svelte").Component<Props, {}, "checked" | "group">;
+import type { CheckboxView } from './types';
+declare const Checkbox: import("svelte").Component<CheckboxView, {}, "checked" | "group">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/Image.svelte

@@ -1,20 +1,5 @@
 <script lang="ts">
-  import type {ImageData} from './'
-
-  interface Props {
-    ariaHidden?: boolean
-    aspect?: '3:4' | '4:3' | 'square' | 'video'
-    ball?: boolean
-    border?: boolean
-    center?: boolean
-    display?: 'block' | 'inline-block'
-    extraClasses?: string
-    fullWidth?: boolean
-    image: ImageData
-    loading?: 'eager' | 'lazy'
-    objectFit?: 'contain' | 'cover'
-  }
-
+  import type {ImageView} from './types'
   let {
     ariaHidden,
     aspect,
@@ -27,7 +12,7 @@
     image,
     loading = 'lazy',
     objectFit
-  }: Props = $props()
+  }: ImageView = $props()
 
   let classes = $state(display)
   if (aspect) {

package/dist/Image.svelte.d.ts

@@ -1,17 +1,4 @@
-import type { ImageData } from './';
-interface Props {
-    ariaHidden?: boolean;
-    aspect?: '3:4' | '4:3' | 'square' | 'video';
-    ball?: boolean;
-    border?: boolean;
-    center?: boolean;
-    display?: 'block' | 'inline-block';
-    extraClasses?: string;
-    fullWidth?: boolean;
-    image: ImageData;
-    loading?: 'eager' | 'lazy';
-    objectFit?: 'contain' | 'cover';
-}
-declare const Image: import("svelte").Component<Props, {}, "">;
+import type { ImageView } from './types';
+declare const Image: import("svelte").Component<ImageView, {}, "">;
 type Image = ReturnType<typeof Image>;
 export default Image;

package/dist/Input.svelte

@@ -1,24 +1,6 @@
 <script lang="ts">
   import {loading} from './'
-
-  interface Props {
-    onchange?: () => void
-    onclick?: () => void
-    borderColor?: 'content' | 'default' | 'primary' | 'none'
-    bgColor?: 'transparent' | 'white' | 'none'
-    disabled?: boolean
-    id?: string
-    inputClass?: string
-    label: string
-    max?: number | string
-    min?: number | string
-    outerClass?: string
-    placeholder?: string
-    required?: boolean
-    step?: number
-    type?: 'email' | 'date' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url'
-    value: string | number
-  }
+  import type {InputView} from './types'
 
   let {
     bgColor = 'transparent',
@@ -37,7 +19,7 @@
     type = 'text',
     value = $bindable(),
     ...props
-  }: Props = $props()
+  }: InputView = $props()
 
   let classesIn = $state(''),
     classesOut = $state(`input-${type}`)
@@ -62,7 +44,7 @@
     <textarea
       bind:value
       class={classesIn}
-      disabled={disabled || $loading}
+      disabled={disabled || $loading ? true : false}
       {id}
       maxlength={max ? Number(max) : undefined}
       {required}
@@ -74,7 +56,7 @@
     <input
       bind:value
       class={classesIn}
-      disabled={disabled || $loading}
+      disabled={disabled || $loading ? true : false}
       lang="fi-FI"
       {max}
       {min}
@@ -93,7 +75,7 @@
       {required}
       {type}
       class={classesIn}
-      disabled={disabled || $loading}
+      disabled={disabled || $loading ? true : false}
       maxlength={max ? Number(max) : undefined}
       minlength={min ? Number(min) : undefined}
       onkeyup={onchange}

package/dist/Input.svelte.d.ts

@@ -1,21 +1,4 @@
-interface Props {
-    onchange?: () => void;
-    onclick?: () => void;
-    borderColor?: 'content' | 'default' | 'primary' | 'none';
-    bgColor?: 'transparent' | 'white' | 'none';
-    disabled?: boolean;
-    id?: string;
-    inputClass?: string;
-    label: string;
-    max?: number | string;
-    min?: number | string;
-    outerClass?: string;
-    placeholder?: string;
-    required?: boolean;
-    step?: number;
-    type?: 'email' | 'date' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';
-    value: string | number;
-}
-declare const Input: import("svelte").Component<Props, {}, "value">;
+import type { InputView } from './types';
+declare const Input: import("svelte").Component<InputView, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/Modal.svelte

@@ -1,18 +1,6 @@
 <script lang="ts">
-  import type {Snippet} from 'svelte'
   import ButtonClose from './ButtonClose.svelte'
-  interface Props {
-    children: Snippet
-    buttonAriaLabel?: string
-    colorButton?: string
-    colorBg?: string
-    headerClass?: string
-    innerClass?: string
-    open?: boolean
-    outerClass?: string
-    title?: string
-    titleClass?: string
-  }
+  import type {ModalView} from './types'
   let {
     children,
     buttonAriaLabel,
@@ -23,7 +11,7 @@
     outerClass = 'bg-white text-content',
     title,
     titleClass = 'text-white'
-  }: Props = $props()
+  }: ModalView = $props()
   const handleClose = () => {
     open = false
   }

package/dist/Modal.svelte.d.ts

@@ -1,16 +1,4 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    children: Snippet;
-    buttonAriaLabel?: string;
-    colorButton?: string;
-    colorBg?: string;
-    headerClass?: string;
-    innerClass?: string;
-    open?: boolean;
-    outerClass?: string;
-    title?: string;
-    titleClass?: string;
-}
-declare const Modal: import("svelte").Component<Props, {}, "open">;
+import type { ModalView } from './types';
+declare const Modal: import("svelte").Component<ModalView, {}, "open">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/Select.svelte

@@ -1,34 +1,20 @@
 <script lang="ts">
-  import {loading, type SelectItem} from './'
-
-  interface Props {
-    colorBg?: string
-    disabled?: boolean
-    id?: string
-    innerClass?: string
-    label: string
-    onchange?: () => void
-    outerClass?: string
-    placeholder?: string
-    required?: boolean
-    value: string | number
-    values: SelectItem[]
-  }
-
+  import {loading} from './'
+  import type {SelectView} from './types'
   let {
-      colorBg = 'bg-transparent',
-      disabled,
-      id,
-      innerClass,
-      label,
-      onchange,
-      outerClass,
-      placeholder,
-      required = false,
-      value = $bindable(),
-      values
-    }: Props = $props(),
-    classes = $state(colorBg)
+    colorBg = 'bg-transparent',
+    disabled,
+    id,
+    innerClass,
+    label,
+    onchange,
+    outerClass,
+    placeholder,
+    required = false,
+    value = $bindable(),
+    values
+  }: SelectView = $props()
+  let classes = $state(colorBg)
   if (innerClass) {
     classes += ' ' + innerClass
   }
@@ -37,7 +23,7 @@
 <label class={outerClass}>
   {label}
   {#if required}<sup>*</sup>{/if}
-  <select bind:value {onchange} class={classes} disabled={disabled || $loading} {id} {placeholder} {required}>
+  <select bind:value {onchange} class={classes} disabled={disabled || $loading ? true : false} {id} {placeholder} {required}>
     {#each values as item}
       <option value={item.value}>{item.name}</option>
     {/each}

package/dist/Select.svelte.d.ts

@@ -1,17 +1,4 @@
-import { type SelectItem } from './';
-interface Props {
-    colorBg?: string;
-    disabled?: boolean;
-    id?: string;
-    innerClass?: string;
-    label: string;
-    onchange?: () => void;
-    outerClass?: string;
-    placeholder?: string;
-    required?: boolean;
-    value: string | number;
-    values: SelectItem[];
-}
-declare const Select: import("svelte").Component<Props, {}, "value">;
+import type { SelectView } from './types';
+declare const Select: import("svelte").Component<SelectView, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/types.d.ts

@@ -0,0 +1,137 @@
+import type { Snippet } from 'svelte';
+import type { Breadcrumb, ImageData, SelectItem } from './index.ts';
+export interface BreadcrumbView {
+    homeName?: string;
+    homeSlug?: string;
+    onlyMeta?: boolean;
+    outerClass?: string;
+    values: Breadcrumb[];
+}
+export interface ButtonArrowView {
+    onclick?: () => any;
+    ariaLabel: string;
+    color?: string;
+    direction: 'left' | 'right';
+    id?: string;
+}
+export interface ButtonCloseView {
+    onclick?: any;
+    ariaLabel?: string;
+    color?: string;
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white';
+    id?: string;
+}
+export interface ButtonMenuView {
+    onclick?: () => any;
+    ariaControls: string;
+    color?: 'black' | 'white';
+    extraClass?: string;
+    hidden?: boolean;
+    id?: string;
+    open: boolean;
+    title: string;
+}
+export interface ButtonView {
+    children: Snippet;
+    ariaControls?: string | undefined;
+    ariaExpanded?: boolean | undefined;
+    ariaLabel?: string | undefined;
+    ariaPopup?: 'dialog' | 'listbox' | 'menu' | undefined;
+    borderColor?: 'content' | 'default' | 'primary';
+    borderSize?: 0 | 1 | 2;
+    color?: string;
+    colorBg?: string;
+    control?: boolean;
+    disabled?: boolean;
+    extraClass?: string;
+    fill?: boolean;
+    fontWeight?: 'normal' | 'bold';
+    fullWidth?: boolean;
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white';
+    href?: string | undefined;
+    id?: string;
+    noCenter?: boolean;
+    noHeight?: boolean;
+    noPadding?: boolean;
+    noSpinner?: boolean;
+    onclick?: any;
+    preload?: 'hover' | 'tap';
+    rel?: string;
+    role?: string;
+    rounded?: 'full' | 'lg' | 'none' | 'sm';
+    spinnerColor?: 'black' | 'white';
+    target?: '_blank' | '_top' | undefined;
+    title?: string | undefined;
+    type?: 'submit';
+    uppercase?: boolean;
+    value?: string | number;
+}
+export interface CheckboxView {
+    children: Snippet;
+    onchange?: () => void;
+    checked?: boolean;
+    disabled?: boolean;
+    group?: boolean;
+    id?: string;
+    outerClass?: string;
+    required?: boolean;
+    value?: number | string;
+}
+export interface ImageView {
+    ariaHidden?: boolean;
+    aspect?: '3:4' | '4:3' | 'square' | 'video';
+    ball?: boolean;
+    border?: boolean;
+    center?: boolean;
+    display?: 'block' | 'inline-block';
+    extraClasses?: string;
+    fullWidth?: boolean;
+    image: ImageData;
+    loading?: 'eager' | 'lazy';
+    objectFit?: 'contain' | 'cover';
+}
+export interface InputView {
+    onchange?: () => void;
+    onclick?: () => void;
+    borderColor?: 'content' | 'default' | 'primary' | 'none';
+    bgColor?: 'transparent' | 'white' | 'none';
+    disabled?: boolean;
+    id?: string;
+    inputClass?: string;
+    label: string;
+    max?: number | string;
+    min?: number | string;
+    outerClass?: string;
+    placeholder?: string;
+    required?: boolean;
+    step?: number;
+    type?: 'email' | 'date' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'textarea' | 'time' | 'url';
+    value: string | number;
+}
+export interface ModalView {
+    children: Snippet;
+    buttonAriaLabel?: string;
+    colorButton?: string;
+    colorBg?: string;
+    headerClass?: string;
+    innerClass?: string;
+    open?: boolean;
+    outerClass?: string;
+    title?: string;
+    titleClass?: string;
+}
+export interface SelectView {
+    onchange?: () => void;
+    colorBg?: string;
+    disabled?: boolean;
+    id?: string;
+    innerClass?: string;
+    label: string;
+    outerClass?: string;
+    placeholder?: string;
+    required?: boolean;
+    value: string | number;
+    values: SelectItem[];
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.8.14",
+  "version": "1.9.0",
   "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
   "keywords": [
     "svelteKit",
@@ -27,19 +27,6 @@
     "type": "git",
     "url": "git+https://github.com/TuspeDesign/svelte-components.git"
   },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run prepack",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync",
-    "prepack": "svelte-kit sync && svelte-package",
-    "publint": "publint .",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
-    "publish": "npm publish --access public"
-  },
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -63,20 +50,30 @@
     "@eslint/compat": "^1.2.9",
     "@eslint/js": "^9.26.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.8",
+    "@sveltejs/kit": "^2.21.0",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-svelte": "^3.5.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-svelte": "^3.6.0",
     "eslint": "^9.26.0",
-    "globals": "^16.0.0",
+    "globals": "^16.1.0",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier": "^3.5.3",
     "publint": "^0.3.12",
     "svelte-check": "^4.1.7",
-    "svelte": "^5.28.2",
-    "typescript-eslint": "^8.32.0",
+    "svelte": "^5.28.6",
+    "typescript-eslint": "^8.32.1",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "publint": "publint .",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
   }
 }