@sierra-95/svelte-scaffold 1.0.61 → 1.0.63

package/dist/Core/components/Form/Checkbox/checkbox.svelte

@@ -0,0 +1,32 @@
+<script>
+  let {
+    textColor = "inherit",
+    fontSize = "1rem",
+    borderRadius = "2px",
+    borderColor = "black",
+    checked = $bindable(false),
+    children
+  } = $props();
+
+</script>
+
+<label id="sierra-checkbox">
+  <input style="border-radius: {borderRadius}; border-color: {borderColor}" type="checkbox" bind:checked />
+  <span
+    class="label"
+    style="color: {textColor}; font-size: {fontSize};"
+  >{@render children?.()}
+  </span>
+</label>
+
+<style>
+  #sierra-checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    cursor: pointer;
+  }
+  #sierra-checkbox input:checked{
+    border: none;
+  }
+</style>

package/dist/Core/components/Form/Checkbox/checkbox.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Checkbox;
+type Checkbox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Checkbox: import("svelte").Component<{
+    textColor?: string;
+    fontSize?: string;
+    borderRadius?: string;
+    borderColor?: string;
+    checked?: boolean;
+    children: any;
+}, {}, "checked">;
+type $$ComponentProps = {
+    textColor?: string;
+    fontSize?: string;
+    borderRadius?: string;
+    borderColor?: string;
+    checked?: boolean;
+    children: any;
+};

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  type _autocomplete = null |  undefined | AutoFill
   let {
     id = '',
     label = '',
@@ -12,6 +13,8 @@
     width = '100%',
     maxWidth = '',
     textColor = 'inherit',
+    autocomplete = undefined as _autocomplete,
+    required = false,
     ...rest
   } = $props();
 </script>
@@ -23,6 +26,8 @@
     type={type} 
     bind:value={value}
     placeholder={placeholder}
+    autocomplete={autocomplete ?? undefined}
+    required={required}
     class="{underline? 'underline-input':''}"
     style="background-color: {background}; border: {borderSize} solid {borderColor};"
     onclick={(e: MouseEvent) => {

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

@@ -11,6 +11,8 @@ declare const Input: import("svelte").Component<{
     width?: string;
     maxWidth?: string;
     textColor?: string;
+    autocomplete?: AutoFill | null | undefined;
+    required?: boolean;
 } & Record<string, any>, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+    type _autocomplete = null |  undefined | AutoFill
+
     export let id: string = '';
     export let label: string = '';
     export let value: string = '';
@@ -10,6 +12,8 @@
     export let width: string = '100%';
     export let maxWidth: string = '';
     export let textColor: string = 'inherit';
+    export let autocomplete = undefined as _autocomplete;
+    export let required = false;
   
     let show: boolean = false;
 </script>
@@ -22,6 +26,8 @@
             name={id}
             bind:value={value} 
             placeholder={placeholder}
+            autocomplete={autocomplete ?? undefined}
+            required={required}
             class="{underline? 'underline-input':''}"
             style="width: 100%; background-color: {background}; border: {borderSize} solid {borderColor}; border-radius: 4px;"
         />

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

@@ -23,6 +23,8 @@ declare const Password: $$__sveltets_2_IsomorphicComponent<{
     width?: string;
     maxWidth?: string;
     textColor?: string;
+    autocomplete?: AutoFill | null | undefined;
+    required?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/index.d.ts

@@ -31,7 +31,8 @@ export { default as Tabs } from './Core/components/Menus/Tabs/main.svelte';
 export { default as HamburgerMenu } from './Core/components/Menus/Hamburger/hamburger.svelte';
 export { default as Time } from './Core/components/others/Calender/Time/time.svelte';
 export { default as Date } from './Core/components/others/Calender/Date/date.svelte';
-export { default as Hr } from './Core/components/Form/Hr/hr.svelte';
+export { default as Hr } from './Core/components/others/Hr/hr.svelte';
+export { default as Checkbox } from './Core/components/Form/Checkbox/checkbox.svelte';
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
 export { default as Editor } from './Modules/Editor/main.svelte';
 export { default as Layout } from './Modules/Layout/main.svelte';

package/dist/index.js

@@ -39,7 +39,8 @@ export { default as HamburgerMenu } from './Core/components/Menus/Hamburger/hamb
 //others
 export { default as Time } from './Core/components/others/Calender/Time/time.svelte';
 export { default as Date } from './Core/components/others/Calender/Date/date.svelte';
-export { default as Hr } from './Core/components/Form/Hr/hr.svelte';
+export { default as Hr } from './Core/components/others/Hr/hr.svelte';
+export { default as Checkbox } from './Core/components/Form/Checkbox/checkbox.svelte';
 //####################Features##################################
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
 //####################MODULES COMPONENTS########################

package/package.json

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