@sierra-95/svelte-scaffold 1.0.52 → 1.0.54

package/dist/Core/components/Form/Input/input/input.svelte

@@ -1,18 +1,22 @@
 <script lang="ts">
-  export let id: string = '';
-  export let label: string = '';
-  export let value: string | number = '';
-  export let type: string = 'text';
-  export let placeholder: string = '';
-  export let underline: boolean = false;
-  export let borderSize: string = '1px';
-  export let borderColor: string = 'var(--input-border)';
-  export let background: string = 'transparent';
-  export let width: string = '100%';
-  export let maxWidth: string = '';
+  let {
+    id = '',
+    label = '',
+    value = $bindable(""),
+    type = 'text',
+    placeholder = '',
+    underline = false,
+    borderSize = '1px',
+    borderColor = 'var(--input-border)',
+    background = 'transparent',
+    width = '100%',
+    maxWidth = '',
+    textColor = 'inherit',
+    ...rest
+  } = $props();
 </script>
 
-<label class="sierra-input" style="width: {width}; max-width: {maxWidth};" for={id}>{label}
+<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
   <input 
     id={id} 
     name={id} 
@@ -21,5 +25,8 @@
     placeholder={placeholder}
     class="{underline? 'underline-input':''}"
     style="background-color: {background}; border: {borderSize} solid {borderColor};"
-  />
+    onclick={(e: MouseEvent) => {
+      rest.onclick?.(e);
+    }}
+    />
 </label>

package/dist/Core/components/Form/Input/input/input.svelte.d.ts

@@ -1,20 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Input: $$__sveltets_2_IsomorphicComponent<{
+declare const Input: import("svelte").Component<{
     id?: string;
     label?: string;
-    value?: string | number;
+    value?: string;
     type?: string;
     placeholder?: string;
     underline?: boolean;
@@ -23,8 +10,7 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     background?: string;
     width?: string;
     maxWidth?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Input = InstanceType<typeof Input>;
+    textColor?: string;
+} & Record<string, any>, {}, "value">;
+type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/Core/components/Form/Input/password/password.svelte

@@ -9,11 +9,12 @@
     export let background: string = 'transparent';
     export let width: string = '100%';
     export let maxWidth: string = '';
+    export let textColor: string = 'inherit';
   
     let show: boolean = false;
 </script>
 
-<label class="sierra-input" style="width: {width}; max-width: {maxWidth};" for={id}>{label}
+<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
     <div style="position: relative;">
         <input
             type={show ? "text" : "password"} 

package/dist/Core/components/Form/Input/password/password.svelte.d.ts

@@ -22,6 +22,7 @@ declare const Password: $$__sveltets_2_IsomorphicComponent<{
     background?: string;
     width?: string;
     maxWidth?: string;
+    textColor?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/Core/components/Form/Input/select/select.svelte

@@ -6,14 +6,19 @@
   export let background: string ='transparent';
   export let width: string = '100%';
   export let maxWidth: string = '';
+  export let height: string = '100%';
+  export let textColor: string = 'inherit';
+  export let optionsColor: string = 'inherit';
+  export let optionsBackground: string = 'white';
 </script>
 
-<label class="sierra-input" style="width: {width}; max-width: {maxWidth};" for={id}>{label}
-    <select bind:value={value} id={id} required style="background-color: {background};">
+<label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
+    <select bind:value={value} id={id} required style="background-color: {background}; height: {height}">
         {#each options as option}
             <option 
                 value={option.value} 
                 disabled={option.disabled}
+                style="color: {optionsColor}; background-color: {optionsBackground};"
             >{option.label}
             </option>
         {/each}

package/dist/Core/components/Form/Input/select/select.svelte.d.ts

@@ -23,6 +23,10 @@ declare const Select: $$__sveltets_2_IsomorphicComponent<{
     background?: string;
     width?: string;
     maxWidth?: string;
+    height?: string;
+    textColor?: string;
+    optionsColor?: string;
+    optionsBackground?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.0.52",
+	"version": "1.0.54",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",