@likable-hair/svelte 3.0.54 → 3.0.56

package/dist/components/composed/buttons/ActivableButton.svelte

@@ -0,0 +1,49 @@
+<script>import Button from "../../simple/buttons/Button.svelte";
+export let active = false, buttonProps = {};
+</script>
+
+<Button
+  on:click={() => active = !active}
+  on:click
+  {...buttonProps}
+  buttonType="text"
+  --button-default-text-background-color={active ? 
+    "var(--activable-button-active-background-color, rgb(var(--global-color-primary-500)))" :
+    "var(--activable-button-deactive-background-color, none)"
+  }
+  --button-default-text-color={active ? 
+    "var(--activable-button-active-color, rgb(var(--global-color-grey-50)))" : 
+    "var(--activable-button-deactive-color, rgb(var(--global-color-contrast-900)))"
+  }
+  --button-default-text-hover-background-color={active ? 
+    "var(--activable-button-hover-active-background-color, rgb(var(--global-color-primary-500)))" : 
+    "var(--activable-button-hover-deactive-background-color, rgb(var(--global-color-background-200)))"
+  }
+  --button-default-text-hover-color={active ? 
+    "var(--activable-button-hover-active-color, rgb(var(--global-color-grey-50)))" : 
+    undefined
+  }
+  --button-default-text-active-background-color={active ? 
+    "var(--activable-button-active-active-background-color, rgb(var(--global-color-primary-500)))" : 
+    "var(--activable-button-active-deactive-background-color, rgb(var(--global-color-background-200)))"
+  }
+  --button-default-text-active-color={active ? 
+    "var(--activable-button-active-active-color, rgb(var(--global-color-grey-50)))" : 
+    undefined
+  }
+  --button-default-text-focus-background-color={active ? 
+    "var(--activable-button-focus-active-background-color, rgb(var(--global-color-primary-500)))" : 
+    "var(--activable-button-focus-deactive-background-color, rgb(var(--global-color-background-200)))"
+  }
+  --button-default-text-focus-color={active ? 
+    "var(--activable-button-focus-active-color, rgb(var(--global-color-grey-50)))" : 
+    undefined
+  }
+  --button-default-disabled-background-color="none"
+  --button-default-disabled-color="rgb(var(--global-color-contrast-900), .5)"
+>
+  <slot />
+  <svelte:fragment slot="append">
+    <slot name="append" />
+  </svelte:fragment>
+</Button>

package/dist/components/composed/buttons/ActivableButton.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        active?: boolean | undefined;
+        buttonProps?: {
+            [x: string]: any;
+            class?: string | undefined;
+            buttonType?: "default" | "text" | "icon" | undefined;
+            type?: "submit" | "button" | undefined;
+            loading?: boolean | undefined;
+            icon?: string | undefined;
+            tabindex?: number | null | undefined;
+            disabled?: boolean | undefined;
+            buttonElement?: HTMLElement | undefined;
+        } | undefined;
+    };
+    events: {
+        click: CustomEvent<{
+            nativeEvent: MouseEvent;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        append: {};
+    };
+};
+export type ActivableButtonProps = typeof __propDef.props;
+export type ActivableButtonEvents = typeof __propDef.events;
+export type ActivableButtonSlots = typeof __propDef.slots;
+export default class ActivableButton extends SvelteComponentTyped<ActivableButtonProps, ActivableButtonEvents, ActivableButtonSlots> {
+}
+export {};

package/dist/components/composed/common/MenuOrDrawer.svelte

@@ -2,7 +2,7 @@
 import Drawer from "../../simple/navigation/Drawer.svelte";
 import Menu from "../../simple/common/Menu.svelte";
 import MediaQuery from "../../simple/common/MediaQuery.svelte";
-export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _width = void 0, _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px";
+export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", stayInViewport = true, flipOnOverflow = false, _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _width = void 0, _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px";
 </script>
 
 <MediaQuery let:mAndDown>
@@ -27,6 +27,8 @@ export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bot
       _borderRadius={_borderRadius}
       _width={_width || ""}
       anchor={menuAnchor}
+      bind:stayInViewport={stayInViewport}
+      bind:flipOnOverflow={flipOnOverflow}
     >
       <slot isDrawer={false} isMenu={true}></slot>
     </Menu>

package/dist/components/composed/common/MenuOrDrawer.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         activator: HTMLElement;
         drawerPosition?: ComponentProps<Drawer>['position'];
         menuAnchor?: ComponentProps<Menu>['anchor'];
+        stayInViewport?: ComponentProps<Menu>['stayInViewport'];
+        flipOnOverflow?: ComponentProps<Menu>['flipOnOverflow'];
         _boxShadow?: string | undefined;
         _height?: string | undefined;
         _width?: string | undefined;

package/dist/components/composed/common/MenuOrDrawerOptions.svelte

@@ -3,7 +3,7 @@
 <script>import "../../../css/main.css";
 import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
-export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", elements = [], _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px";
+export let open = false, activator, drawerPosition = "bottom", menuAnchor = "bottom-center", elements = [], stayInViewport = true, flipOnOverflow = false, _boxShadow = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px", _height = "fit-content", _maxHeight = void 0, _minWidth = "100px", _borderRadius = "5px";
 let selected;
 let focused;
 $:
@@ -19,6 +19,8 @@ $:
   bind:activator
   bind:drawerPosition
   bind:menuAnchor
+  bind:stayInViewport
+  bind:flipOnOverflow
   {_boxShadow}
   {_height}
   {_maxHeight}

package/dist/components/composed/common/MenuOrDrawerOptions.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 import '../../../css/main.css';
 import type { ComponentProps } from 'svelte';
+import MenuOrDrawer from "./MenuOrDrawer.svelte";
 import type Drawer from '../../simple/navigation/Drawer.svelte';
 import type Menu from '../../simple/common/Menu.svelte';
 import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
@@ -12,6 +13,8 @@ declare const __propDef: {
         drawerPosition?: ComponentProps<Drawer>['position'];
         menuAnchor?: ComponentProps<Menu>['anchor'];
         elements?: ComponentProps<SelectableVerticalList>['elements'];
+        stayInViewport?: ComponentProps<MenuOrDrawer>['stayInViewport'];
+        flipOnOverflow?: ComponentProps<MenuOrDrawer>['flipOnOverflow'];
         _boxShadow?: string | undefined;
         _height?: string | undefined;
         _maxHeight?: string | undefined;

package/dist/components/{simple/dates → composed/forms}/DatePickerTextField.svelte

@@ -1,13 +1,15 @@
 <script>import IMask, { InputMask } from "imask";
-import SimpleTextField from "../forms/SimpleTextField.svelte";
-import DatePicker from "./DatePicker.svelte";
-import Menu from "../common/Menu.svelte";
-import Icon from "../media/Icon.svelte";
+import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+import DatePicker from "../../simple/dates/DatePicker.svelte";
+import Menu from "../../simple/common/Menu.svelte";
+import Icon from "../../simple/media/Icon.svelte";
 import { onMount } from "svelte";
 import { DateTime } from "luxon";
 import { createEventDispatcher } from "svelte";
-import MediaQuery from "../common/MediaQuery.svelte";
-import Dialog from "../dialogs/Dialog.svelte";
+import MediaQuery from "../../simple/common/MediaQuery.svelte";
+import Dialog from "../../simple/dialogs/Dialog.svelte";
+let clazz = {};
+export { clazz as class };
 let dispatch = createEventDispatcher();
 export let menuOpened = false, openingId = "date-picker-text-field", pattern = "dd/MM/yyyy", selectedMonth = void 0, selectedYear = void 0, visibleMonth = void 0, visibleYear = void 0, selectedDate = void 0, placeholder = void 0, mobileDialog = true;
 let activator, refreshPosition = false, menuElement, inputElement, mask = {
@@ -66,7 +68,7 @@ onMount(() => {
 function handleInputChange(event) {
   setTimeout(() => {
     const typedValue = mask.value;
-    if (!!typedValue) {
+    if (typedValue !== void 0 && typedValue !== null) {
       const dayOfMonthIndex = pattern.indexOf("dd");
       const dayOfMonth = typedValue.substring(dayOfMonthIndex, dayOfMonthIndex + 2);
       const monthIndex = pattern.indexOf("MM");
@@ -120,36 +122,47 @@ $:
 <MediaQuery let:mAndDown>
   <div
     bind:this={activator}
+    class="date-picker-activator {clazz.activator || ''}"
   >
-    <SimpleTextField
-      bind:value={mask.value}
-      on:focus={() => handleTextFieldFocus(mAndDown)}
-      on:keydown={handleInputChange}
-      bind:input={inputElement}
-      bind:placeholder
+    <slot 
+      name="activator"
+      {mask}
+      {handleTextFieldFocus}
+      {handleInputChange}
+      {inputElement}
+      {placeholder}
     >
-      <svelte:fragment slot="prepend-inner" let:prependInnerIcon let:iconSize>
-        <slot name="prepend-inner" {prependInnerIcon} {iconSize}>
-          <Icon
-            name="mdi-calendar"
-            click
-            on:click={() => menuOpened = !menuOpened}
-          ></Icon>
-        </slot>
-      </svelte:fragment>
-      <svelte:fragment slot="append-inner" let:appendInnerIcon let:iconSize>
-        <slot name="append-inner" {appendInnerIcon} {iconSize}>
-        </slot>
-      </svelte:fragment>
-      <svelte:fragment slot="prepend" let:prependIcon let:iconSize>
-        <slot name="append-inner" {prependIcon} {iconSize}>
-        </slot>
-      </svelte:fragment>
-      <svelte:fragment slot="append" let:appendIcon let:iconSize>
-        <slot name="append-inner" {appendIcon} {iconSize}>
-        </slot>
-      </svelte:fragment>
-    </SimpleTextField>
+      <SimpleTextField
+        bind:value={mask.value}
+        on:focus={() => handleTextFieldFocus(mAndDown)}
+        on:keydown={handleInputChange}
+        bind:input={inputElement}
+        bind:placeholder
+        class={clazz.textfield}
+      >
+        <svelte:fragment slot="prepend-inner" let:prependInnerIcon let:iconSize>
+          <slot name="prepend-inner" {prependInnerIcon} {iconSize}>
+            <Icon
+              name="mdi-calendar"
+              click
+              on:click={() => menuOpened = !menuOpened}
+            ></Icon>
+          </slot>
+        </svelte:fragment>
+        <svelte:fragment slot="append-inner" let:appendInnerIcon let:iconSize>
+          <slot name="append-inner" {appendInnerIcon} {iconSize}>
+          </slot>
+        </svelte:fragment>
+        <svelte:fragment slot="prepend" let:prependIcon let:iconSize>
+          <slot name="append-inner" {prependIcon} {iconSize}>
+          </slot>
+        </svelte:fragment>
+        <svelte:fragment slot="append" let:appendIcon let:iconSize>
+          <slot name="append-inner" {appendIcon} {iconSize}>
+          </slot>
+        </svelte:fragment>
+      </SimpleTextField>
+    </slot>
   </div>
 
   {#if mAndDown && mobileDialog}
@@ -204,3 +217,9 @@ $:
   {/if}
 </MediaQuery>
 
+<style>
+  .date-picker-activator {
+    width: fit-content;
+  }
+</style>
+

package/dist/components/{simple/dates → composed/forms}/DatePickerTextField.svelte.d.ts

@@ -1,7 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { DateStat } from './utils';
+import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+import { type ComponentProps } from 'svelte';
+import type { DateStat } from '../../simple/dates/utils';
 declare const __propDef: {
     props: {
+        class?: {
+            activator?: string | undefined;
+            textfield?: ComponentProps<SimpleTextField>['class'];
+        } | undefined;
         menuOpened?: boolean | undefined;
         openingId?: string | undefined;
         pattern?: string | undefined;
@@ -21,6 +27,15 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        activator: {
+            mask: {
+                value: string | undefined;
+            };
+            handleTextFieldFocus: (mobile: boolean) => void;
+            handleInputChange: (event: any) => void;
+            inputElement: HTMLElement;
+            placeholder: string | undefined;
+        };
         'prepend-inner': {
             prependInnerIcon: string | undefined;
             iconSize: string;

package/dist/components/composed/forms/Dropdown.svelte

@@ -1,15 +1,24 @@
 <script context="module"></script>
 
-<script>import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
+<script>import { cloneDeep } from "lodash";
+import Autocomplete from "../../../components/simple/forms/Autocomplete.svelte";
 import Button from "../../simple/buttons/Button.svelte";
 import Icon from "../../simple/media/Icon.svelte";
-export let items = [], values = [], multiple = false, lang = "en", searchText = void 0, maxVisibleChips = void 0, placeholder = lang == "en" ? "Select" : "Seleziona", clearable = true, mandatory = true, icon = void 0, menuOpened = false, openingId = void 0;
+import { createEventDispatcher } from "svelte";
+let dispatch = createEventDispatcher();
+export let items = [], values = [], multiple = false, lang = "en", searchText = void 0, maxVisibleChips = void 0, placeholder = lang == "en" ? "Select" : "Seleziona", clearable = true, mandatory = true, icon = void 0, menuOpened = false, openingId = void 0, width = void 0;
 $:
   generatedLabel = values.length == 1 ? values[0].label : `${values.length} Selezionati`;
 function handleCloseClick(event) {
   event.preventDefault();
   event.stopPropagation();
+  let valuesBefore = cloneDeep(values);
   values = [];
+  dispatch("change", {
+    unselect: valuesBefore[0],
+    select: void 0,
+    selection: []
+  });
 }
 </script>
 
@@ -24,6 +33,7 @@ function handleCloseClick(event) {
   on:change
   bind:menuOpened
   bind:openingId
+  bind:width
 >
   <svelte:fragment slot="selection-container" let:openMenu let:handleKeyDown>
     <Button
@@ -41,7 +51,16 @@ function handleCloseClick(event) {
         }
       }}
     >
-      <slot name="label" {values} {items} {searchText}>
+      <slot 
+        name="label" 
+        {values} 
+        {items} 
+        {searchText} 
+        {generatedLabel} 
+        {placeholder} 
+        {clearable} 
+        {handleCloseClick}
+      >
         <div class="label">
           {#if !!icon}
             <Icon name={icon}></Icon>
@@ -67,6 +86,11 @@ function handleCloseClick(event) {
       </slot>
     </Button>
   </svelte:fragment>
+  <svelte:fragment slot="item-label" let:item >
+    <slot name="item-label" {item}>
+      {item.label}
+    </slot>
+  </svelte:fragment>
 </Autocomplete>
 
 <style>

package/dist/components/composed/forms/Dropdown.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         icon?: string | undefined;
         menuOpened?: boolean | undefined;
         openingId?: string | undefined;
+        width?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -26,6 +27,13 @@ declare const __propDef: {
             values: Item[];
             items: Item[];
             searchText: string | undefined;
+            generatedLabel: string | number | undefined;
+            placeholder: string;
+            clearable: boolean;
+            handleCloseClick: (event: MouseEvent) => void;
+        };
+        'item-label': {
+            item: Item;
         };
     };
 };

package/dist/components/composed/forms/IconsDropdown.svelte

@@ -0,0 +1,73 @@
+<script context="module"></script>
+
+<script>import Dropdown, {} from "./Dropdown.svelte";
+import Icon from "../../simple/media/Icon.svelte";
+export let items = [], values = [], clearable = false;
+let dropdownValues = [];
+$:
+  dropdownValues = values.map((e) => ({
+    value: e.value,
+    data: {
+      icon: e.icon,
+      data: e.data
+    }
+  }));
+$:
+  dropDownItems = items.map((e) => ({
+    value: e.value,
+    data: {
+      icon: e.icon,
+      data: e.data
+    }
+  }));
+function handleChange(event) {
+  values = event.detail.selection.map((e) => ({
+    value: e.value,
+    icon: e.data.icon,
+    data: e.data
+  }));
+}
+</script>
+
+<Dropdown
+  items={dropDownItems}
+  clearable={clearable}
+  placeholder=""
+  bind:values={dropdownValues}
+  on:change={handleChange}
+  width="60px"
+>
+  <svelte:fragment slot="label" let:generatedLabel let:values let:placeholder let:clearable let:handleCloseClick>
+    {#if values.length == 0}
+      {placeholder}
+    {:else if values.length == 1}
+      <Icon name={values[0].data.icon}></Icon> 
+    {:else}
+      {generatedLabel}
+    {/if}
+    {#if clearable && values.length > 0}
+      <Icon
+        name="mdi-close"
+        click
+        on:click={handleCloseClick}
+      ></Icon>
+    {:else}
+      <Icon name="mdi-chevron-down"></Icon>
+    {/if}
+  </svelte:fragment>
+  <svelte:fragment slot="item-label" let:item>
+    <div class="label-container">
+      <Icon
+        name={item.data.icon}
+        --icon-size="20px"
+      ></Icon>
+    </div>
+  </svelte:fragment>
+</Dropdown>
+
+<style>
+  .label-container {
+    display: flex;
+    justify-content: center;
+  }
+</style>

package/dist/components/composed/forms/IconsDropdown.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+export type IconItem = {
+    value: string | number;
+    icon: string;
+    data?: any;
+};
+declare const __propDef: {
+    props: {
+        items?: IconItem[] | undefined;
+        values?: IconItem[] | undefined;
+        clearable?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconsDropdownProps = typeof __propDef.props;
+export type IconsDropdownEvents = typeof __propDef.events;
+export type IconsDropdownSlots = typeof __propDef.slots;
+export default class IconsDropdown extends SvelteComponentTyped<IconsDropdownProps, IconsDropdownEvents, IconsDropdownSlots> {
+}
+export {};

package/dist/components/composed/search/FilterEditor.svelte

@@ -1,7 +1,7 @@
 <script>import Dropdown, {} from "../forms/Dropdown.svelte";
 import { GenericModes, SelectModes, StringModes } from "../../../utils/filters/filters";
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-import DatePickerTextField from "../../simple/dates/DatePickerTextField.svelte";
+import DatePickerTextField from "../forms/DatePickerTextField.svelte";
 import Button from "../../simple/buttons/Button.svelte";
 import { createEventDispatcher } from "svelte";
 import Validator from "../../../utils/filters/validator";

package/dist/components/composed/search/MobileFilterEditor.svelte

@@ -1,6 +1,6 @@
 <script>import { GenericModes, SelectModes, StringModes } from "../../../utils/filters/filters";
 import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-import DatePickerTextField from "../../simple/dates/DatePickerTextField.svelte";
+import DatePickerTextField from "../forms/DatePickerTextField.svelte";
 import Button from "../../simple/buttons/Button.svelte";
 import { createEventDispatcher } from "svelte";
 import Validator from "../../../utils/filters/validator";

package/dist/components/layouts/UnstableDividedSideBarLayout.svelte

@@ -62,7 +62,7 @@ let sidebarExpanded = false;
       on:keypress={() => {if(expandOn == 'click' && !mAndDown) sidebarExpanded = true}}
       use:clickOutside 
       on:clickoutside={() => {if(expandOn == 'click') sidebarExpanded = false}}
-      class="side-bar {clazz.header}"
+      class="side-bar {clazz.header || ''}"
     >
       <div class="side-bar-content">
         <slot name="sidebar" hamburgerVisible={mAndDown} {sidebarExpanded}>
@@ -140,7 +140,7 @@ let sidebarExpanded = false;
       var(--unstable-divided-side-bar-layout-default-side-bar-padding)
     );
     z-index: 10;
-    overflow: auto;
+    overflow: clip;
     transition: all .2s cubic-bezier(.4,0,.2,1);
   }
 

package/dist/components/simple/buttons/Button.svelte

@@ -232,18 +232,49 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
     );
   }
 
-  .button-text:hover {
+  .button-text.disabled {
+    cursor: not-allowed;
+    background-color: var(
+      --button-disabled-background-color,
+      var(--button-default-disabled-background-color)
+    );
+    color: var(
+      --button-disabled-color,
+      var(--button-default-disabled-color)
+    );
+  }
+
+  .button-text:hover:not(.disabled) {
     background-color: var(
       --button-hover-background-color,
       var(--button-default-text-hover-background-color)
     );
+    color: var(
+      --button-hover-color,
+      var(--button-default-text-hover-color)
+    );
   }
 
-  .button-text:active {
+  .button-text:active:not(.disabled) {
     background-color: var(
       --button-active-background-color,
       var(--button-default-text-active-background-color)
     );
+    color: var(
+      --button-active-color,
+      var(--button-default-text-active-color)
+    );
+  }
+
+  .button-text:focus:not(.disabled) {
+    background-color: var(
+      --button-focus-background-color,
+      var(--button-default-text-focus-background-color)
+    );
+    color: var(
+      --button-focus-color,
+      var(--button-default-text-focus-color)
+    );
   }
 
   .button-icon {

package/dist/components/simple/dates/DatePicker.svelte

@@ -8,7 +8,7 @@ import Button from "../buttons/Button.svelte";
 import { createEventDispatcher } from "svelte";
 let clazz = {};
 export { clazz as class };
-export let selectedYear = (/* @__PURE__ */ new Date()).getFullYear(), selectedMonth = (/* @__PURE__ */ new Date()).getMonth(), selectedDate = /* @__PURE__ */ new Date(), visibleMonth = selectedMonth, visibleYear = selectedYear, view = "day", locale = "it", selectableYears = [...Array(150).keys()].map(
+export let selectedYear = (/* @__PURE__ */ new Date()).getFullYear(), selectedMonth = (/* @__PURE__ */ new Date()).getMonth(), selectedDate = void 0, visibleMonth = selectedMonth, visibleYear = selectedYear, view = "day", locale = "it", selectableYears = [...Array(150).keys()].map(
   (i) => i + ((/* @__PURE__ */ new Date()).getFullYear() - 75)
 );
 let dispatch = createEventDispatcher();

package/dist/components/simple/dates/TimePicker.css

@@ -0,0 +1,10 @@
+:root {
+  --time-picker-default-primary-color: rgb(var(--global-color-primary-600));
+  --time-picker-default-height: 400px;
+  --time-picker-default-width: 100%;
+  --time-picker-default-header-background-color: rgb(var(--global-color-primary-600));
+  --time-picker-default-header-color: rgb(var(--global-color-grey-50));
+  --time-picker-default-box-shadow: 0 4px 6px -1px rgb(var(--global-color-contrast-300), .1),
+    0 2px 4px -2px rgb(var(--global-color-contrast-300), .1);
+  --time-picker-default-overflow: hidden;
+}

package/dist/components/simple/dates/TimePicker.svelte

@@ -0,0 +1,170 @@
+<script>import "../../../css/main.css";
+import "./TimePicker.css";
+import { DateTime } from "luxon";
+import { createEventDispatcher } from "svelte";
+import Icon from "../media/Icon.svelte";
+let clazz = {};
+export { clazz as class };
+export let selectedTime = void 0, locale = "it-IT";
+let hours = "00";
+let dispatch = createEventDispatcher();
+let buildUpHours = hours;
+function handleHoursInput(e) {
+  setTimeout(() => {
+    let inserted = e.key;
+    if (inserted == "Backspace") {
+      if (Number(buildUpHours) < 10) {
+        buildUpHours = "00";
+      } else {
+        buildUpHours = "0" + (buildUpHours.at(0) || "0");
+      }
+    }
+    if (["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(inserted)) {
+      if (Number(buildUpHours) < 10) {
+        buildUpHours = `${Number(buildUpHours)}${inserted}`;
+      } else {
+        buildUpHours = `${buildUpHours.at(1)}${inserted}`;
+      }
+    }
+    hours = buildUpHours;
+  }, 10);
+}
+$:
+  hours = buildUpHours;
+$:
+  console.log(hours);
+</script>
+
+<div
+  class="container {clazz.container || ''}"
+>
+  <div
+    class="header {clazz.header || ''}"
+  >
+    <h2>
+      {#if !!selectedTime}
+        {DateTime.fromJSDate(selectedTime).setLocale(locale).toLocaleString(DateTime.TIME_24_SIMPLE)}
+      {/if}
+    </h2>
+  </div>
+  <div class="body">
+    <div class="time-switch">
+      <button 
+        class="icon-button"
+      >
+        <Icon
+          name="mdi-chevron-up"
+          --icon-size="20pt"
+        ></Icon>
+      </button>
+      <input
+        type="text"
+        class="transparent-input"
+        bind:value={hours}
+        on:keydown={handleHoursInput}
+      />
+      <button 
+        class="icon-button"
+      >
+        <Icon
+          name="mdi-chevron-down"
+          --icon-size="20pt"
+        ></Icon>
+      </button>
+    </div>
+    <div>:</div>
+    <input type="text" class="transparent-input" maxlength="2" />
+  </div>
+</div>
+
+<style>
+  .container {
+    border-radius: 5px;
+    height: var(
+      --time-picker-height,
+      var(--time-picker-default-height)
+    );
+    width: var(
+      --time-picker-width,
+      var(--time-picker-default-width)
+    );
+    box-shadow: var(
+      --time-picker-box-shadow,
+      var(--time-picker-default-box-shadow)
+    );
+    overflow: var(
+      --time-picker-overflow,
+      var(--time-picker-default-overflow)
+    );
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    border-radius: 5px 5px 0 0;
+    background-color: var(
+      --time-picker-header-background-color,
+      var(--time-picker-default-header-background-color)
+    );
+    height: calc(var(--time-picker-height, var(--time-picker-default-height)) / 4);
+    color: var(
+      --time-picker-header-color,
+      var(--time-picker-default-header-color)
+    );
+  }
+
+  .header > h2 {
+    margin-left: 15px;
+    margin-top: 5px;
+    transition: 0.1s;
+    opacity: 0.8;
+  }
+  .header > h2:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+
+  .body {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px
+  }
+
+  .transparent-input {
+    border: 2px solid rgb(var(--global-color-contrast-200));
+    border-radius: 5px;
+    width: 36px;
+    text-align: center;
+    outline: none;
+    background-color: transparent; 
+    padding: 4px 8px;
+    color: rgb(var(--global-color-contrast-900));
+    transition: all .1s cubic-bezier(0.075, 0.82, 0.165, 1);
+    font-size: 24pt;
+    caret-color: transparent;
+  }
+
+  .transparent-input:hover, .transparent-input:focus {
+    border-color: rgb(var(--global-color-primary-500));
+  }
+
+  .time-switch {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .icon-button {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    outline: none;
+    color: inherit;
+  }
+
+</style>

package/dist/components/simple/dates/TimePicker.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
+import './TimePicker.css';
+declare const __propDef: {
+    props: {
+        class?: {
+            container?: string | undefined;
+            header?: string | undefined;
+            selectorRow?: string | undefined;
+        } | undefined;
+        selectedTime?: Date | null | undefined;
+        locale?: "it-IT" | "en-EN" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TimePickerProps = typeof __propDef.props;
+export type TimePickerEvents = typeof __propDef.events;
+export type TimePickerSlots = typeof __propDef.slots;
+export default class TimePicker extends SvelteComponentTyped<TimePickerProps, TimePickerEvents, TimePickerSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { default as Calendar } from './components/simple/dates/Calendar.svelte';
 export { default as DatePicker } from './components/simple/dates/DatePicker.svelte';
 export { default as MonthSelector } from './components/simple/dates/MonthSelector.svelte';
 export { default as TimePickerTextField } from './components/simple/dates/TimePickerTextField.svelte';
-export { default as DatePickerTextField } from './components/simple/dates/DatePickerTextField.svelte';
+export { default as DatePickerTextField } from './components/composed/forms/DatePickerTextField.svelte';
 export { default as YearSelector } from './components/simple/dates/YearSelector.svelte';
 export { default as Dialog } from './components/simple/dialogs/Dialog.svelte';
 export { default as Autocomplete } from './components/simple/forms/Autocomplete.svelte';
@@ -47,6 +47,8 @@ export { default as TabSwitcher } from './components/simple/navigation/TabSwitch
 export { default as ProgressBar } from './components/simple/progress/ProgressBar.svelte';
 export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
 export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
+export { default as ActivableButton } from './components/composed/buttons/ActivableButton.svelte';
+export { default as IconsDropdown } from './components/composed/forms/IconsDropdown.svelte';
 export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';
 export { default as Filters } from './components/composed/search/Filters.svelte';
 export { default as GlobalSearchTextField } from './components/composed/search/GlobalSearchTextField.svelte';

package/dist/index.js

@@ -9,7 +9,7 @@ export { default as Calendar } from './components/simple/dates/Calendar.svelte';
 export { default as DatePicker } from './components/simple/dates/DatePicker.svelte';
 export { default as MonthSelector } from './components/simple/dates/MonthSelector.svelte';
 export { default as TimePickerTextField } from './components/simple/dates/TimePickerTextField.svelte';
-export { default as DatePickerTextField } from './components/simple/dates/DatePickerTextField.svelte';
+export { default as DatePickerTextField } from './components/composed/forms/DatePickerTextField.svelte';
 export { default as YearSelector } from './components/simple/dates/YearSelector.svelte';
 export { default as Dialog } from './components/simple/dialogs/Dialog.svelte';
 export { default as Autocomplete } from './components/simple/forms/Autocomplete.svelte';
@@ -47,6 +47,8 @@ export { default as TabSwitcher } from './components/simple/navigation/TabSwitch
 export { default as ProgressBar } from './components/simple/progress/ProgressBar.svelte';
 export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
 export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
+export { default as ActivableButton } from './components/composed/buttons/ActivableButton.svelte';
+export { default as IconsDropdown } from './components/composed/forms/IconsDropdown.svelte';
 export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';
 export { default as Filters } from './components/composed/search/Filters.svelte';
 export { default as GlobalSearchTextField } from './components/composed/search/GlobalSearchTextField.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "3.0.54",
+  "version": "3.0.56",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",