@likable-hair/svelte 0.0.34 → 0.0.37

package/buttons/Button.svelte

@@ -1,5 +1,12 @@
-<script >export let type = 'default', loading = false, icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', borderRadius = undefined, boxShadow = undefined;
+<script >export let type = 'default', active = false, loading = false, icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, display = undefined, justifyContent = undefined, alignItems = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', activeBackgroundColor = hoverBackgroundColor, borderRadius = undefined, boxShadow = undefined;
 export { clazz as class };
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+function handleClick(event) {
+    dispatch('click', {
+        nativeEvent: event
+    });
+}
 $: defaultBorderRadius = type == 'icon' ? '50%' : '5px';
 $: position = !!$$slots.append ? 'relative' : undefined;
 import Icon from '../media/Icon.svelte';
@@ -19,8 +26,11 @@ import CircularLoader from '../loaders/CircularLoader.svelte';
   style:padding={padding}
   style:font-size={fontSize}
   style:color={color}
+  style:display={display}
+  style:justify-content={justifyContent}
+  style:align-items={alignItems}
   style:--button-border-radius={!!borderRadius ? borderRadius : defaultBorderRadius}
-  style:--button-background-color={backgroundColor}
+  style:--button-background-color={active ? activeBackgroundColor : backgroundColor}
   style:--button-hover-background-color={hoverBackgroundColor}
   style:--button-box-shadow={boxShadow}
   style:--button-icon-height={(iconSize + 5) + 'pt'}
@@ -29,7 +39,7 @@ import CircularLoader from '../loaders/CircularLoader.svelte';
   class:button-default={type === 'default'}
   class:button-text={type === 'text'}
   class:button-icon={type === 'icon'}
-  on:click
+  on:click={handleClick}
 >
   {#if loading}
     <CircularLoader

package/buttons/Button.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         type?: 'default' | 'text' | 'icon';
+        active?: boolean;
         loading?: boolean;
         icon?: string;
         iconSize?: number;
@@ -17,13 +18,19 @@ declare const __propDef: {
         padding?: string;
         fontSize?: string;
         color?: string;
+        display?: string;
+        justifyContent?: string;
+        alignItems?: string;
         backgroundColor?: string;
         hoverBackgroundColor?: string;
+        activeBackgroundColor?: string;
         borderRadius?: string;
         boxShadow?: string;
     };
     events: {
-        click: MouseEvent;
+        click: CustomEvent<{
+            nativeEvent: MouseEvent;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/buttons/ToggleButton.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  ToggleButtonProps */
+/** @typedef {typeof __propDef.events}  ToggleButtonEvents */
+/** @typedef {typeof __propDef.slots}  ToggleButtonSlots */
+export default class ToggleButton extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ToggleButtonProps = typeof __propDef.props;
+export type ToggleButtonEvents = typeof __propDef.events;
+export type ToggleButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/common/scroller.d.ts

@@ -0,0 +1 @@
+export declare function scrollAtCenter(parentElement: HTMLElement, targetElement: HTMLElement): void;

package/common/scroller.js

@@ -0,0 +1,8 @@
+export function scrollAtCenter(parentElement, targetElement) {
+    const parentElementHeight = parentElement.offsetHeight;
+    const targetElementheight = targetElement.offsetHeight;
+    parentElement.scroll({
+        top: targetElement.offsetTop - parentElement.offsetTop - (parentElementHeight - targetElementheight) / 2,
+        behavior: "smooth"
+    });
+}

package/dates/Calendar.svelte

@@ -1,3 +1,116 @@
-<script >import { getDateRows } from './utils';
+<script >import { onMount } from 'svelte';
+import { fly } from 'svelte/transition';
+import { getDateRowsStats, getMonthName } from './utils';
+export let selectedDate = undefined, visibleMonth = new Date().getMonth(), visibleYear = new Date().getFullYear(), showExtraMonthDays = true, showHeader = true, height = "100%", width = "100%", dayWidth = '30px', dayHeight = '30px', dayHoverColor = '#c9c8c873', daySelectedColor = '#adadad', dayBackgroundColor = undefined, animationDuration = 200;
+onMount(() => {
+});
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+function handleDayClick(dateStat, extraMonth) {
+    if (!extraMonth) {
+        selectedDate = new Date(dateStat.year, dateStat.month, dateStat.dayOfMonth, 0, 0, 0, 0);
+    }
+    dispatch('day-click', {
+        dateStat: dateStat,
+        selected: !extraMonth,
+        extraMonth: extraMonth
+    });
+}
 </script>
 
+<div 
+  style:height={height}
+  style:width={width}
+>
+  {#key visibleMonth }
+    <div 
+      in:fly="{{delay: animationDuration, duration: animationDuration, y: 30}}"
+      out:fly="{{duration: animationDuration, y: -30}}"
+      class="grid-layout"
+    >
+      {#if showHeader}
+        {#each ['L', 'M', 'M', 'G', 'V', 'S', 'D'] as weekHeader, index}
+          <slot
+            name="weekHeader"
+            header={weekHeader}
+            index={index}
+          >
+            <div
+              class="week-header-slot"
+            >{weekHeader}</div>
+          </slot>
+        {/each}
+      {/if}
+      {#each getDateRowsStats(visibleMonth, visibleYear) as day}
+        {@const selected = !!selectedDate && selectedDate.getDate() == day.dayOfMonth && selectedDate.getMonth() == day.month && selectedDate.getFullYear() == day.year}
+        {@const extraMonth = day.month != visibleMonth}
+        <slot 
+          name="day" 
+          dayStat={day}
+          extraMonth={extraMonth}
+          selected={selected}
+        >
+          {#if (!showExtraMonthDays && day.month == visibleMonth) || showExtraMonthDays }  
+            <div
+              style:border-radius="50%"
+              style:background-color={dayBackgroundColor}
+              style:height={dayHeight}
+              style:width={dayWidth}
+              style:cursor={extraMonth ? 'default' : 'pointer'}
+              style:--calendar-hover-color={extraMonth ? '' : dayHoverColor}
+              style:--calendar-selected-color={daySelectedColor}
+              class="day-slot"
+              class:extra-month={extraMonth}
+              class:selected={selected}
+              class:not-selected={!selected}
+              on:click={() => handleDayClick(day, extraMonth)}
+            >{day.dayOfMonth}</div>
+          {:else}
+            <div></div>
+          {/if}
+        </slot>
+      {/each}
+    </div>
+  {/key}
+</div>
+
+<style>
+
+.grid-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  gap: 1px;
+}
+
+.day-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-self: center;
+  align-self: center;
+  transition: background-color .1s ease-in;
+}
+
+.extra-month {
+  opacity: 30%;
+}
+
+.selected {
+  background-color: var(--calendar-selected-color);
+}
+
+.day-slot.not-selected:hover {
+  background-color: var(--calendar-hover-color);
+}
+
+.week-header-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-self: center;
+  align-self: center;
+  font-weight: 800;
+  margin-bottom: 10px;
+}
+
+</style>

package/dates/Calendar.svelte.d.ts

@@ -1,10 +1,41 @@
 import { SvelteComponentTyped } from "svelte";
+import type { DateStat } from './utils';
 declare const __propDef: {
-    props: {};
+    props: {
+        selectedDate?: Date;
+        visibleMonth?: number;
+        visibleYear?: number;
+        showExtraMonthDays?: boolean;
+        showHeader?: boolean;
+        height?: string;
+        width?: string;
+        dayWidth?: string;
+        dayHeight?: string;
+        dayHoverColor?: string;
+        daySelectedColor?: string;
+        dayBackgroundColor?: string;
+        animationDuration?: number;
+    };
     events: {
+        "day-click": CustomEvent<{
+            dateStat: DateStat;
+            selected: boolean;
+            extraMonth: boolean;
+        }>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        weekHeader: {
+            header: string;
+            index: any;
+        };
+        day: {
+            dayStat: DateStat;
+            extraMonth: any;
+            selected: any;
+        };
+    };
 };
 export declare type CalendarProps = typeof __propDef.props;
 export declare type CalendarEvents = typeof __propDef.events;

package/dates/MonthSelector.svelte

@@ -0,0 +1,50 @@
+<script >import { getMonthName } from './utils';
+export let selectedMonth = undefined, height = "100%", width = "100%";
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+function handleMonthClick(monthIndex) {
+    selectedMonth = monthIndex;
+    dispatch('click', {
+        monthIndex
+    });
+}
+import Button from '../buttons/Button.svelte';
+</script>
+
+<div 
+  style:height={height}
+  style:width={width}
+  class="selector-container"
+>
+  {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as monthIndex}
+    <slot
+      name="selector"
+      month={monthIndex}
+      monthName={getMonthName(monthIndex)}
+    >
+      <Button 
+        active={monthIndex == selectedMonth}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        on:click={() => handleMonthClick(monthIndex)}
+      >
+        <slot
+          name="label"
+          month={monthIndex}
+          monthName={getMonthName(monthIndex)}
+        >
+          {getMonthName(monthIndex)}
+        </slot>
+      </Button>
+    </slot>
+  {/each}
+</div>
+
+<style>
+  .selector-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 5px;
+  }
+</style>

package/dates/MonthSelector.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        selectedMonth?: number;
+        height?: string;
+        width?: string;
+    };
+    events: {
+        click: CustomEvent<{
+            monthIndex: number;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        selector: {
+            month: number;
+            monthName: string;
+        };
+        label: {
+            month: number;
+            monthName: string;
+        };
+    };
+};
+export declare type MonthSelectorProps = typeof __propDef.props;
+export declare type MonthSelectorEvents = typeof __propDef.events;
+export declare type MonthSelectorSlots = typeof __propDef.slots;
+export default class MonthSelector extends SvelteComponentTyped<MonthSelectorProps, MonthSelectorEvents, MonthSelectorSlots> {
+}
+export {};

package/dates/YearSelector.svelte

@@ -0,0 +1,63 @@
+<script >import { scrollAtCenter } from "../common/scroller";
+import { createEventDispatcher, onMount } from 'svelte';
+export let selectedYear = undefined, selectableYears = [...Array(150).keys()].map(i => i + (new Date().getFullYear() - 75)), height = "100%", width = "100%";
+let container, targetButtons = {};
+onMount(() => {
+    scrollAtCenter(container, targetButtons[selectedYear]);
+});
+const dispatch = createEventDispatcher();
+function handleYearClick(year) {
+    selectedYear = year;
+    scrollAtCenter(container, targetButtons[selectedYear]);
+    dispatch('click', {
+        year
+    });
+}
+import Button from '../buttons/Button.svelte';
+</script>
+
+<div
+  bind:this={container}
+  style:height={height}
+  style:width={width}
+  class="selector-container"
+>
+  {#each selectableYears as year}
+    <slot
+      name="selector"
+      year={year}
+    >
+      <div
+        bind:this={targetButtons[year]}
+      >
+        <Button
+          height="30px"
+          active={year == selectedYear}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          on:click={() => handleYearClick(year)}
+        >
+          <slot
+            name="label"
+            year={year}
+          >
+            <div
+              style:transition="all .1s"
+              style:font-weight={year == selectedYear ? '700' : '400'}
+              style:font-size={year == selectedYear ? '16pt' : '13pt'}
+            >
+              {year}
+            </div>
+          </slot>
+        </Button>
+      </div>
+    </slot>
+  {/each}
+</div>
+
+<style>
+  .selector-container {
+    overflow-y: auto;
+  }
+</style>

package/dates/YearSelector.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        selectedYear?: number;
+        selectableYears?: number[];
+        height?: string;
+        width?: string;
+    };
+    events: {
+        click: CustomEvent<{
+            year: number;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        selector: {
+            year: number;
+        };
+        label: {
+            year: number;
+        };
+    };
+};
+export declare type YearSelectorProps = typeof __propDef.props;
+export declare type YearSelectorEvents = typeof __propDef.events;
+export declare type YearSelectorSlots = typeof __propDef.slots;
+export default class YearSelector extends SvelteComponentTyped<YearSelectorProps, YearSelectorEvents, YearSelectorSlots> {
+}
+export {};

package/dates/utils.d.ts

@@ -9,6 +9,13 @@ export declare type MonthStats = {
     days: number;
 };
 export declare const getDateRows: (monthIndex: number, year: number) => number[];
+export declare type DateStat = {
+    dayOfMonth: number;
+    dayOfWeek: number;
+    month: number;
+    year: number;
+};
+export declare const getDateRowsStats: (monthIndex: number, year: number) => DateStat[];
 declare type dateFormat = 'extended' | 'extendedMonthAndYear';
 export declare const dateToString: (date: Date, format?: dateFormat) => string;
 export {};

package/dates/utils.js

@@ -57,6 +57,38 @@ export const getDateRows = (monthIndex, year) => {
     }
     return rows.filter(el => !Array.isArray(el));
 };
+export const getDateRowsStats = (monthIndex, year) => {
+    let results = [];
+    const days = getDateRows(monthIndex, year);
+    for (let i = 0; i < days.length; i += 1) {
+        let dateStat = {
+            dayOfMonth: days[i],
+            dayOfWeek: i % 7,
+            month: monthIndex,
+            year: year
+        };
+        if (days[i] >= 20 && Math.floor(i / 7) == 0) {
+            if (monthIndex === 0) {
+                dateStat.month = 11;
+                dateStat.year = year - 1;
+            }
+            else {
+                dateStat.month = monthIndex - 1;
+            }
+        }
+        else if (days[i] < 10 && Math.floor(i / 7) > 2) {
+            if (monthIndex === 11) {
+                dateStat.month = 0;
+                dateStat.year = year + 1;
+            }
+            else {
+                dateStat.month = monthIndex + 1;
+            }
+        }
+        results.push(dateStat);
+    }
+    return results;
+};
 const dateToExtendedString = (date) => {
     const day = date.getDate();
     const month = getMonthName(date.getMonth());

package/forms/Switch.svelte

@@ -0,0 +1,79 @@
+<script >export let value = false, height = "20px", width = "40px", padding = "6px", borderRadius = "10px", toggleActiveColor = "#5c5c5c", toggleDeactiveColor = "#5c5c5c", backgroundActiveColor = "#e6e6e6", backgroundDeactiveColor = "#e6e6e6", animationDuration = "0.1s";
+</script>
+
+<span 
+  style:--switch-toggle-active-color={toggleActiveColor}
+  style:--switch-toggle-deactive-color={toggleDeactiveColor}
+  style:--switch-animation-duration={animationDuration}
+  style:--switch-height={height}
+  style:--switch-width={width}
+  style:--switch-padding={padding}
+  style:--switch-border-radius={borderRadius}
+  class="container"
+>
+  <div 
+    class="inner-container"
+    style:background-color={value ? backgroundActiveColor : backgroundDeactiveColor}
+    on:click={() => value = !value}
+  >
+    <input 
+      bind:checked={value}
+      type="checkbox"
+    >
+    <span
+      class="slider"
+    ></span>
+  </div>
+</span>
+
+<style>
+  .container {
+    position: relative;
+    width: var(--switch-width);
+    box-sizing: border-box;
+  }
+
+  input {
+    position: absolute;
+    display: none;
+  }
+
+  .inner-container {
+    position: absolute;
+    width: 100%;
+    height: var(--switch-height);
+    border-radius: var(--switch-border-radius);
+    cursor: pointer;
+    transition: background-color var(--switch-animation-duration) ease;
+  }
+
+  .slider {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--switch-border-radius);
+    transition: var(--switch-animation-duration);
+  }
+
+  .slider::before {
+    --switch-toggle-top-padding: calc(var(--switch-padding) / 2);
+    --switch-toggle-left-padding: calc(var(--switch-padding) / 2);
+    --switch-toggle-right-padding: calc(var(--switch-padding) / 2);
+    --switch-toggle-bottom-padding: calc(var(--switch-padding) / 2);
+    content: "";
+    position: absolute;
+    top: var(--switch-toggle-top-padding);
+    left: var(--switch-toggle-left-padding);
+    width: calc(var(--switch-width) / 2 - var(--switch-toggle-right-padding) - var(--switch-toggle-left-padding));
+    height: calc(var(--switch-height) - var(--switch-toggle-top-padding) - var(--switch-toggle-bottom-padding));
+    border-radius: var(--switch-border-radius);
+    background-color: var(--switch-toggle-deactive-color);
+    transition: var(--switch-animation-duration);
+  }
+
+  input:checked ~ .slider::before {
+    transform: translateX(calc(var(--switch-width) / 2));
+    background-color: var(--switch-toggle-active-color);
+    box-shadow: none;
+  }
+</style>

package/forms/Switch.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: boolean;
+        height?: string;
+        width?: string;
+        padding?: string;
+        borderRadius?: string;
+        toggleActiveColor?: string;
+        toggleDeactiveColor?: string;
+        backgroundActiveColor?: string;
+        backgroundDeactiveColor?: string;
+        animationDuration?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SwitchProps = typeof __propDef.props;
+export declare type SwitchEvents = typeof __propDef.events;
+export declare type SwitchSlots = typeof __propDef.slots;
+export default class Switch extends SvelteComponentTyped<SwitchProps, SwitchEvents, SwitchSlots> {
+}
+export {};

package/forms/Textfield.svelte

@@ -1,4 +1,4 @@
-<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined', width = "100%", textColor = "balck", borderRadius = "5px", borderColor = undefined, backgroundColor = undefined, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined;
+<script >export let label = "", placeholder = "", color = null, value = "", variant = 'outlined', width = "100%", textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text';
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -23,6 +23,7 @@ $: if (!!labelElement) {
     height: 50px;
     position: relative;
     --textfield-final-color: var(--textfield-theme-color, --textfield-border-color, rgb(88, 88, 88));
+    --textfield-final-border-color: var(--textfield-border-color, var(--textfield-final-color))
   }
 
   /* outlined input */
@@ -39,12 +40,12 @@ $: if (!!labelElement) {
   }
 
   .fieldset-outlined {
-    border: 1px solid rgb(122, 122, 122);
+    border: var(--textfield-border-weight) solid rgb(122, 122, 122);
     padding-left: 4px;
   }
 
   .focused .fieldset-outlined {
-    border: 1px solid var(--textfield-final-color);
+    border: var(--textfield-border-weight) solid var(--textfield-final-border-color);
     color: var(--textfield-final-color);
   }
 
@@ -74,7 +75,17 @@ $: if (!!labelElement) {
   /* boxed input */
 
   .fieldset-boxed {
-    border: 2px solid var(--textfield-final-color);
+    padding: 5px;
+    transition: border 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .not-focused .fieldset-boxed {
+    border: var(--textfield-border-weight) solid var(--textfield-final-border-color);
+  }
+
+  .focused .fieldset-boxed {
+    border: var(--textfield-border-weight) solid var(--textfield-focus-border-color, var(--textfield-final-color));
+    box-shadow: var(--textfield-focused-box-shadow);
     padding: 5px;
   }
 
@@ -102,15 +113,18 @@ $: if (!!labelElement) {
   style:width={width}
   style:--textfield-theme-color={color}
   style:--textfield-border-color={borderColor}
+  style:--textfield-border-weight={borderWeight}
+  style:--textfield-focus-border-color={focusBorderColor}
   style:--textfield-legend-width={legendWidth + 'px'}
+  style:--textfield-focused-box-shadow={focusedBoxShadow}
   class="input-container" 
   class:focused={focused}
+  class:not-focused={!focused}
   class:texted={focused || !!value}
 >
   <fieldset 
     aria-hidden="true"
     style:border-radius={borderRadius}
-    style:border-color={borderColor}
     style:background-color={backgroundColor}
     style:padding={padding}
     style:padding-left={paddingLeft}
@@ -138,14 +152,78 @@ $: if (!!labelElement) {
           <div>
             <slot name="prepend-inner"></slot>
           </div>
-          <input 
+          {#if type == 'password'}
+            <input 
+              style:background-color={backgroundColor}
+              style:color={textColor}
+              style:font-size={fontSize}
+              id={inputId} 
+              class="input-outlined"
+              type="password"
+              placeholder={placeholder}
+              bind:value={value}
+              on:change
+              on:input
+              on:focus={handleFocus}
+              on:focus
+              on:blur={handleBlur}
+              on:blur
+            />
+          {:else if type == 'text'}
+            <input 
+              style:background-color={backgroundColor}
+              style:color={textColor}
+              style:font-size={fontSize}
+              id={inputId} 
+              class="input-outlined"
+              type="text"
+              placeholder={placeholder}
+              bind:value={value}
+              on:change
+              on:input
+              on:focus={handleFocus}
+              on:focus
+              on:blur={handleBlur}
+              on:blur
+            />
+          {/if}
+          <div>
+            <slot name="append-inner"></slot>
+          </div>
+        </div>
+    {:else if variant == 'boxed'}
+      <div 
+        style:display="flex"
+      >
+        <div>
+          <slot name="prepend-inner"></slot>
+        </div>
+        {#if type == 'password'}
+          <input
+            style:background-color={backgroundColor}
+            style:color={textColor}
+            style:font-size={fontSize}
+            id={inputId}
+            class="input-boxed"
+            type="password"
+            placeholder={placeholder || label}
+            bind:value={value}
+            on:change
+            on:input
+            on:focus={handleFocus}
+            on:focus
+            on:blur={handleBlur}
+            on:blur
+          />
+        {:else if type == 'text'}
+          <input
             style:background-color={backgroundColor}
             style:color={textColor}
             style:font-size={fontSize}
-            id={inputId} 
-            class="input-outlined"
+            id={inputId}
+            class="input-boxed"
             type="text"
-            placeholder={placeholder}
+            placeholder={placeholder || label}
             bind:value={value}
             on:change
             on:input
@@ -154,33 +232,7 @@ $: if (!!labelElement) {
             on:blur={handleBlur}
             on:blur
           />
-          <div>
-            <slot name="append-inner"></slot>
-          </div>
-        </div>
-    {:else if variant == 'boxed'}
-      <div 
-        style:display="flex"
-      >
-        <div>
-          <slot name="prepend-inner"></slot>
-        </div>
-        <input
-          style:background-color={backgroundColor}
-          style:color={textColor}
-          style:font-size={fontSize}
-          id={inputId}
-          class="input-boxed"
-          type="text"
-          placeholder={placeholder || label}
-          bind:value={value}
-          on:change
-          on:input
-          on:focus={handleFocus}
-          on:focus
-          on:blur={handleBlur}
-          on:blur
-        />
+        {/if}
         <div>
           <slot name="append-inner"></slot>
         </div>

package/forms/Textfield.svelte.d.ts

@@ -8,8 +8,11 @@ declare const __propDef: {
         variant?: "outlined" | "boxed";
         width?: string;
         textColor?: string;
+        borderWeight?: string;
         borderRadius?: string;
         borderColor?: string;
+        focusBorderColor?: string;
+        focusedBoxShadow?: string;
         backgroundColor?: string;
         padding?: string;
         paddingLeft?: string;
@@ -17,6 +20,7 @@ declare const __propDef: {
         paddingBottom?: string;
         paddingTop?: string;
         fontSize?: string;
+        type?: 'text' | 'password';
     };
     events: {
         change: Event;

package/index.d.ts

@@ -5,6 +5,7 @@ export { default as IntersectionObserver } from './common/IntersectionObserver.s
 export { default as MediaQuery } from './common/MediaQuery.svelte';
 export { default as Dialog } from './dialogs/Dialog.svelte';
 export { default as TextField } from './forms/Textfield.svelte';
+export { default as Switch } from './forms/Switch.svelte';
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 export { default as CircularLoader } from './loaders/CircularLoader.svelte';
 export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';

package/index.js

@@ -9,6 +9,7 @@ export { default as MediaQuery } from './common/MediaQuery.svelte';
 export { default as Dialog } from './dialogs/Dialog.svelte';
 // forms
 export { default as TextField } from './forms/Textfield.svelte';
+export { default as Switch } from './forms/Switch.svelte';
 // loaders
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 export { default as CircularLoader } from './loaders/CircularLoader.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.34",
+  "version": "0.0.37",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -25,14 +25,19 @@
   "exports": {
     "./package.json": "./package.json",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
+    "./buttons/ToggleButton.svelte": "./buttons/ToggleButton.svelte",
     "./common/Card.svelte": "./common/Card.svelte",
     "./common/Gesture.svelte": "./common/Gesture.svelte",
     "./common/IntersectionObserver.svelte": "./common/IntersectionObserver.svelte",
     "./common/MediaQuery.svelte": "./common/MediaQuery.svelte",
     "./common/materialDesign.css": "./common/materialDesign.css",
+    "./common/scroller": "./common/scroller.js",
     "./dates/Calendar.svelte": "./dates/Calendar.svelte",
+    "./dates/MonthSelector.svelte": "./dates/MonthSelector.svelte",
+    "./dates/YearSelector.svelte": "./dates/YearSelector.svelte",
     "./dates/utils": "./dates/utils.js",
     "./dialogs/Dialog.svelte": "./dialogs/Dialog.svelte",
+    "./forms/Switch.svelte": "./forms/Switch.svelte",
     "./forms/Textfield.svelte": "./forms/Textfield.svelte",
     ".": "./index.js",
     "./loaders/CircularLoader.svelte": "./loaders/CircularLoader.svelte",