@likable-hair/svelte 4.2.0 → 4.2.2

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

@@ -13,6 +13,7 @@ interface Props {
     animationDuration?: number;
     disabled?: boolean;
     type?: 'singleDate' | 'dateRange';
+    fillOpenRange?: boolean;
     class?: {
         container?: string;
         weekHeader?: string;

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

@@ -5,41 +5,49 @@ import YearSelector from "./YearSelector.svelte";
 import MonthSelector from "./MonthSelector.svelte";
 import Calendar from "./Calendar.svelte";
 import Button from "../buttons/Button.svelte";
-let { selectedYear = $bindable(new Date().getFullYear()), selectedMonth = $bindable(new Date().getMonth()), selectedDate = $bindable(undefined), selectedDateTo = $bindable(undefined), visibleMonth = $bindable(selectedMonth), visibleYear = $bindable(selectedYear), view = "day", locale = "it", selectableYears = [...Array(150).keys()].map((i) => i + (new Date().getFullYear() - 75)), skipTabs = false, disabled = false, type, class: clazz = {}, onmonthClick, onyearClick, ondayClick, } = $props();
+let { selectedYear = $bindable(new Date().getFullYear()), selectedMonth = $bindable(new Date().getMonth()), selectedDate = $bindable(undefined), selectedDateTo = $bindable(undefined), visibleMonth = $bindable(selectedMonth), visibleYear = $bindable(selectedYear), view = "day", locale = "it", selectableYears = [...Array(150).keys()].map((i) => i + (new Date().getFullYear() - 75)), skipTabs = false, disabled = false, type, fillOpenRange, class: clazz = {}, headerLabelSnippet, onmonthClick, onyearClick, ondayClick, } = $props();
 let visibleSelector = $derived(view == "day" || view == "month");
 let selectorText = $derived(view == "day"
     ? getMonthName(visibleMonth, locale) + " " + visibleYear
     : visibleYear.toString());
 let elementDisabled = $derived(view == "year" ? "year" : "date");
 let lastSelectedYear = selectedYear;
+let minSelectableYear = $derived(selectableYears[0]);
+let maxSelectableYear = $derived(selectableYears[selectableYears.length - 1]);
 function next() {
     if (view == "day") {
         if (visibleMonth == 11) {
-            visibleMonth = 0;
-            visibleYear += 1;
+            if (visibleYear < maxSelectableYear) {
+                visibleMonth = 0;
+                visibleYear += 1;
+            }
         }
         else {
             visibleMonth += 1;
         }
     }
     else {
-        if (visibleYear != selectableYears[selectableYears.length - 1])
+        if (visibleYear < maxSelectableYear) {
             visibleYear++;
+        }
     }
 }
 function previous() {
     if (view == "day") {
         if (visibleMonth == 0) {
-            visibleMonth = 11;
-            visibleYear -= 1;
+            if (visibleYear > minSelectableYear) {
+                visibleMonth = 11;
+                visibleYear -= 1;
+            }
         }
         else {
             visibleMonth -= 1;
         }
     }
     else {
-        if (visibleYear != selectableYears[0])
+        if (visibleYear > minSelectableYear) {
             visibleYear--;
+        }
     }
 }
 function SelectorHandler() {
@@ -106,10 +114,17 @@ function handleMonthChange() {
       class="unstyled day"
       tabindex={skipTabs ? -1 : undefined}
     >
-      {#if !!selectedDate && !selectedDateTo}
-        {dateToString(selectedDate, "dayAndMonth", locale)}
-      {:else if !!selectedDate && !!selectedDateTo}
-        {dateToString(selectedDate, "dayAndMonth", locale)} - {dateToString(selectedDateTo, "dayAndMonth", locale)}
+      {#if headerLabelSnippet}
+        {@render headerLabelSnippet({
+          dateString: selectedDate ? dateToString(selectedDate, "dayAndMonth", locale) : undefined,
+          dateToString: selectedDateTo ? dateToString(selectedDateTo, "dayAndMonth", locale) : undefined,
+        })}
+      {:else}
+        {#if !!selectedDate && !selectedDateTo}
+          {dateToString(selectedDate, "dayAndMonth", locale)}
+        {:else if !!selectedDate && !!selectedDateTo}
+          {dateToString(selectedDate, "dayAndMonth", locale)} - {dateToString(selectedDateTo, "dayAndMonth", locale)}
+        {/if}
       {/if}
     </button>
   </div>
@@ -124,6 +139,7 @@ function handleMonthChange() {
             icon="mdi-chevron-left"
             onclick={previous}
             tabindex={skipTabs ? -1 : undefined}
+            disabled={view === 'day' ? (visibleYear <= minSelectableYear && visibleMonth === 0) : visibleYear <= minSelectableYear}
           />
         </div>
         <div class="row-elem selector">
@@ -146,6 +162,7 @@ function handleMonthChange() {
             icon="mdi-chevron-right"
             onclick={next}
             tabindex={skipTabs ? -1 : undefined}
+            disabled={view === 'day' ? (visibleYear >= maxSelectableYear && visibleMonth === 11) : visibleYear >= maxSelectableYear}
           />
         </div>
       </div>
@@ -176,6 +193,7 @@ function handleMonthChange() {
         {type}
         {locale}
         disabled={disabled}
+        {fillOpenRange}
         {ondayClick}
       />
     {/if}
@@ -282,4 +300,4 @@ function handleMonthChange() {
     cursor: pointer;
     outline: inherit;
   }
-</style>
+</style>

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

@@ -2,7 +2,7 @@ import '../../../css/main.css';
 import './DatePicker.css';
 import type { Locale } from "./utils";
 import Calendar from "./Calendar.svelte";
-import type { ComponentProps } from 'svelte';
+import type { ComponentProps, Snippet } from 'svelte';
 interface Props {
     selectedYear?: number;
     selectedMonth?: number;
@@ -16,11 +16,18 @@ interface Props {
     selectableYears?: number[];
     skipTabs?: boolean;
     disabled?: boolean;
+    fillOpenRange?: boolean;
     class?: {
         container?: string;
         header?: string;
         selectorRow?: string;
     };
+    headerLabelSnippet?: Snippet<[
+        {
+            dateString?: string;
+            dateToString?: string;
+        }
+    ]>;
     onyearClick?: (event: {
         detail: {
             year: number;

package/dist/components/simple/forms/Autocomplete.svelte

@@ -4,7 +4,7 @@
 <script lang="ts" generics="Data">import "../../../css/main.css";
 import "./Autocomplete.css";
 import { scrollInMenu } from "../common/scroller";
-let { values = $bindable(), items = [], searchFunction = undefined, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = undefined, minWidth = "200px", openingId = $bindable("autocomplete-menu"), searchText = $bindable(), maxVisibleChips = undefined, menuOpened = $bindable(false), closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = undefined, menuAnchor = 'bottom-center', class: clazz = {}, menuStayInViewport, menuFlipOnOverflow = true, adaptInputWidth = true, selectionContainerSnippet, selectionSnippet, chipLabelSnippet, exceedCounterSnippet, menuSnippet, itemLabelSnippet, itemSnippet, onchange, onfocus, onblur, onkeydown, onclose, } = $props();
+let { values = $bindable(), items = [], searchFunction = undefined, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = undefined, minWidth = "200px", openingId = $bindable("autocomplete-menu"), searchText = $bindable(), maxVisibleChips = undefined, menuOpened = $bindable(false), closeOnSelect = !multiple, emptySearchTextOnMenuClose = true, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false, menuWidth = undefined, menuAnchor = 'bottom-center', class: clazz = {}, menuStayInViewport, menuFlipOnOverflow = true, menuMaxHeight = '300px', adaptInputWidth = true, selectionContainerSnippet, selectionSnippet, chipLabelSnippet, exceedCounterSnippet, menuSnippet, itemLabelSnippet, itemSnippet, onchange, onfocus, onblur, onkeydown, onclose, } = $props();
 let notVisibleChipNumber = $derived(Math.max(((values || []).length || 0) - (maxVisibleChips || 0), 0));
 function select(item) {
     if (disabled)
@@ -286,7 +286,7 @@ import Icon from "../media/Icon.svelte";
       {activator}
       _width={localMenuWidth || ""}
       _height={menuHeight}
-      _maxHeight="300px"
+      _maxHeight={menuMaxHeight}
       _boxShadow={menuBoxShadow}
       _borderRadius={menuBorderRadius}
       bind:open={menuOpened}

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -36,6 +36,7 @@ declare class __sveltets_Render<Data> {
         menuAnchor?: ComponentProps<typeof Menu>["anchor"];
         menuStayInViewport?: ComponentProps<typeof Menu>["stayInViewport"];
         menuFlipOnOverflow?: ComponentProps<typeof Menu>["flipOnOverflow"];
+        menuMaxHeight?: string;
         adaptInputWidth?: boolean;
         class?: {
             activator?: string;

package/dist/components/simple/lists/SelectableVerticalList.svelte

@@ -6,10 +6,10 @@ import './SelectableVerticalList.css';
 import keyboarder from "../../../utils/keyboarder";
 import { onMount } from "svelte";
 import Icon from '../media/Icon.svelte';
-let { activeKeyboard = false, loopSelection = true, focused = $bindable(undefined), selected = $bindable(undefined), elements = $bindable([]), centered = false, bicolor = false, appendIconSize = "20pt", onfocus, oniconClick, onselect, onkeypress, elementSnippet, descriptionSnippet, titleSnippet, } = $props();
-let focusedIndex = $derived(elements.findIndex((el) => el.name == focused));
+let { activeKeyboard = false, loopSelection = true, focused = $bindable(), selected = $bindable(), elements = $bindable(), centered = false, bicolor = false, appendIconSize = "20pt", onfocus, oniconClick, onselect, onkeypress, elementSnippet, descriptionSnippet, titleSnippet, } = $props();
+let focusedIndex = $derived(elements?.findIndex((el) => el.name == focused));
 function handleKeypress(params) {
-    if (activeKeyboard && elements.length > 0) {
+    if (activeKeyboard && elements && elements.length > 0) {
         if (params.key == 'ArrowDown') {
             let newIndex;
             if ((focusedIndex === undefined || focusedIndex === -1) || (loopSelection && focusedIndex >= (elements.length - 1))) {
@@ -46,7 +46,7 @@ function handleKeypress(params) {
                 });
             }
         }
-        else if (params.key == 'Enter' && focusedIndex !== -1) {
+        else if (params.key == 'Enter' && focusedIndex !== -1 && focusedIndex != undefined) {
             selected = elements[focusedIndex].name;
             if (onselect) {
                 onselect({
@@ -101,6 +101,7 @@ function handleIconClick(index, element) {
 <ul
   class="list"
   role="listbox"
+  onmouseleave={() => { focused = undefined }}
 >
   {#each elements as element, index (element.name)}
   <div

package/dist/components/simple/lists/SimpleTable.svelte

@@ -6,20 +6,38 @@ import './SimpleTable.css';
 import Icon from '../media/Icon.svelte';
 import { onMount, tick } from 'svelte';
 import NoData from '../common/NoData.svelte';
-let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), resizableColumns = false, resizedColumnSizeWithPadding = $bindable({}), pointerOnRowHover = false, lang = 'en', doubleClickActive = false, doubleClickDelay = 250, noItemsText, loading, stickFirstColumn, calculateRowStyles = undefined, calculateRowClasses = undefined, oncolumnResize, onrowClick, onrowDoubleClick, onsort, headerSnippet, headerLabelSnippet, appendSnippet, prependSnippet, stickyAppendSnippet, customSnippet, noDataSnippet, class: clazz = {}, } = $props();
+let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), resizableColumns = false, resizedColumnSizeWithPadding = $bindable({}), pointerOnRowHover = false, lang = 'en', doubleClickActive = false, doubleClickDelay = 250, noItemsText, loading, calculateRowStyles = undefined, calculateRowClasses = undefined, stickyMinContainerWidth = 1024, oncolumnResize, onrowClick, onrowDoubleClick, onsort, headerSnippet, headerLabelSnippet, appendSnippet, prependSnippet, stickyAppendSnippet, customSnippet, noDataSnippet, class: clazz = {}, } = $props();
 if (!onrowClick && !!onrowDoubleClick) {
     throw new Error('cannot define an onrowDoubleClick event without defining an onrowClick event');
 }
-let clickTimeout = undefined, sortModify, tableContainer = $state(), mainHeader = $state(), remainingWidth = $state(0), resizeObserver, headersHTML = $state({}), tableHTML = $state(), resizing = false, colspan = $derived.by(() => {
+let clickTimeout = undefined, sortModify, tableContainer = $state(), mainHeader = $state(), remainingWidth = $state(0), containerWidth = $state(0), totalStickyWidth = $state(0), resizeObserver, headersHTML = $state({}), tableHTML = $state(), resizing = false, colspan = $derived.by(() => {
     return headers.length +
-        (stickyAppendSnippet ? 1 : 0) +
-        (appendSnippet ? 1 : 0) +
+        (appendSnippet || stickyAppendSnippet ? 1 : 0) +
         (prependSnippet ? 1 : 0) +
-        (resizableColumns && remainingWidth ? 1 : 0);
+        (remainingWidth ? 1 : 0);
 });
-const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
+let stickyEnabled = $derived.by(() => {
+    if (containerWidth <= stickyMinContainerWidth)
+        return false;
+    if (totalStickyWidth >= containerWidth)
+        return false;
+    return true;
+});
+const DEFAULT_MIN_WIDTH_PX = 130, DEFAULT_MAX_WIDTH_PX = 400;
 onMount(() => {
-    if (resizableColumns) {
+    (async () => {
+        await tick();
+        resizeObserver = new ResizeObserver(() => {
+            if (tableContainer) {
+                const rect = tableContainer.getBoundingClientRect();
+                containerWidth = rect.width;
+            }
+            calculateStickyMetrics();
+            updateRemainingWidth();
+        });
+        if (tableContainer) {
+            resizeObserver.observe(tableContainer);
+        }
         if (appendSnippet && headersHTML['row-append-header']) {
             const actionCells = tableContainer?.querySelectorAll('.row-append-cell');
             if (actionCells && actionCells.length > 0) {
@@ -31,7 +49,7 @@ onMount(() => {
                         maxActionWidth = width;
                     }
                 }
-                const finalWidth = Math.ceil(maxActionWidth + 15);
+                const finalWidth = Math.max(Math.ceil(maxActionWidth), 40);
                 headersHTML['row-append-header'].style.width = `${finalWidth}px`;
                 headersHTML['row-append-header'].style.minWidth = `${finalWidth}px`;
             }
@@ -43,17 +61,32 @@ onMount(() => {
             }
         }
         tableHTML?.classList.add('resizable');
-        resizeObserver = new ResizeObserver(() => {
-            updateRemainingWidth();
-        });
-        if (tableContainer) {
-            resizeObserver.observe(tableContainer);
-        }
         return () => {
             resizeObserver?.disconnect();
         };
-    }
+    })();
 });
+function calculateStickyMetrics() {
+    let width = 0;
+    if (prependSnippet && headersHTML['prepend']) {
+        width += headersHTML['prepend'].getBoundingClientRect().width;
+    }
+    headers.forEach(head => {
+        if (head.pinned) {
+            const stored = resizedColumnSizeWithPadding[head.value];
+            if (stored) {
+                width += stored;
+            }
+            else if (headersHTML[head.value]) {
+                width += headersHTML[head.value].getBoundingClientRect().width;
+            }
+        }
+    });
+    if (stickyAppendSnippet && headersHTML['row-append-header']) {
+        width += headersHTML['row-append-header'].getBoundingClientRect().width;
+    }
+    totalStickyWidth = width;
+}
 function handleHeaderClick(header) {
     if (header.sortable && !resizing) {
         if (!!sortedBy && header.value == sortedBy) {
@@ -146,6 +179,7 @@ function resize(node) {
                     resizedColumnSizeWithPadding = {
                         ...resizedColumnSizeWithPadding,
                     };
+                    calculateStickyMetrics();
                 }
             }
         }
@@ -165,6 +199,7 @@ function resize(node) {
                         }
                     });
                 }
+                calculateStickyMetrics();
             }
         }
         function mouseDownHandler(e) {
@@ -188,14 +223,12 @@ function resize(node) {
     }
 }
 $effect(() => {
-    if (resizableColumns &&
-        !!tableContainer &&
-        resizableColumns &&
-        headers.length > 0 &&
-        resizedColumnSizeWithPadding &&
-        mainHeader) {
-        tick().then(updateRemainingWidth);
-    }
+    headers;
+    resizedColumnSizeWithPadding;
+    tick().then(() => {
+        calculateStickyMetrics();
+        updateRemainingWidth();
+    });
 });
 async function updateRemainingWidth() {
     if (tableContainer != null && !!tableContainer && mainHeader) {
@@ -209,7 +242,7 @@ async function updateRemainingWidth() {
                 const width = th?.getBoundingClientRect().width || 0;
                 return sum + width + 1;
             }, 0);
-            const extraStaticWidth = Array.from(mainHeader.querySelectorAll('th.non-resizable, th.row-append-header, th.fixed-col'))
+            const extraStaticWidth = Array.from(mainHeader.querySelectorAll('th.non-resizable, th.row-append-header'))
                 .reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
             remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth);
         }
@@ -241,15 +274,16 @@ function resizeHeader(th, header) {
 </script>
 
 {#if !!items && Array.isArray(items)}
-  <div class="simple-table-container {clazz.container || ''}" class:resizable={resizableColumns} bind:this={tableContainer}>
+  <div class="simple-table-container {clazz.container || ''}" bind:this={tableContainer}>
     <table class="table" bind:this={tableHTML}>
       <thead class="thead {clazz.header || ''}" bind:this={mainHeader}>
         <tr>
           {#if prependSnippet}
             <th 
+              bind:this={headersHTML['prepend']}
               class="non-resizable"
-              class:sticky-col={headers.find(h => h.pinned)}
-              style:left={"0"}
+              class:sticky-col={headers.find(h => h.pinned) && stickyEnabled}
+              style:left={headers.find(h => h.pinned) && stickyEnabled ? 0 : undefined}
             >
               {@render prependSnippet({ index: -1 })}
             </th>
@@ -262,9 +296,9 @@ function resizeHeader(th, header) {
               style:min-width={head.minWidth}
               style:max-width={head.maxWidth}
               class:sortable={head.sortable}
-              class:sticky-col={head.pinned}
+              class:sticky-col={head.pinned && stickyEnabled}
               style:left={
-                head.pinned 
+                (head.pinned && stickyEnabled)
                   ? (prependSnippet)
                     ? `calc(${baseLeft}px + ${extraLeft})`
                     : `${baseLeft}px`
@@ -314,22 +348,21 @@ function resizeHeader(th, header) {
               {/if}
             </th>
           {/each}
-          {#if appendSnippet}
+          {#if stickyAppendSnippet || appendSnippet}
             <th
+              class:sticky-col={stickyAppendSnippet && stickyEnabled}
+              style:right={stickyAppendSnippet && stickyEnabled ? 0 : undefined}
               class="row-append-header"
               bind:this={headersHTML['row-append-header']}
             >
-              {@render appendSnippet({ index: -1, })}
-            </th>
-          {/if}
-          {#if stickyAppendSnippet}
-            <th
-              class="fixed-col"
-            >
-              {@render stickyAppendSnippet()}
+              {#if stickyAppendSnippet}
+                {@render stickyAppendSnippet()}
+              {:else if appendSnippet}
+                {@render appendSnippet({ index: -1, })}
+              {/if}
             </th>
           {/if}
-          {#if resizableColumns && remainingWidth}
+          {#if remainingWidth}
             <th
               style:width={remainingWidth + 'px'}
               class="filler"
@@ -370,8 +403,8 @@ function resizeHeader(th, header) {
               {#if prependSnippet}
                 <td 
                   class="{clazz.cell || ''} non-resizable"
-                  class:sticky-col={headers.find(h => h.pinned)}
-                  style:left={"0"}
+                  class:sticky-col={headers.find(h => h.pinned) && stickyEnabled}
+                  style:left={headers.find(h => h.pinned) && stickyEnabled ? 0 : undefined}
                 >
                   {@render prependSnippet({ index: i, item })}
                 </td>
@@ -381,9 +414,9 @@ function resizeHeader(th, header) {
                 {@const extraLeft = 'var(--simple-table-non-resizable-header-width, var(--simple-table-default-non-resizable-header-width))'}
                 <td 
                   class="{clazz.cell || ''}"
-                  class:sticky-col={header.pinned}
+                  class:sticky-col={header.pinned && stickyEnabled}
                   style:left={
-                    header.pinned 
+                    (header.pinned && stickyEnabled)
                       ? (prependSnippet)
                         ? `calc(${baseLeft}px + ${extraLeft})`
                         : `${baseLeft}px`
@@ -419,19 +452,21 @@ function resizeHeader(th, header) {
                   {/if}
                 </td>
               {/each}
-              {#if appendSnippet}
+              {#if stickyAppendSnippet || appendSnippet}
                 <td 
                   class="{clazz.cell || ''}"
+                  class:sticky-col={stickyAppendSnippet && stickyEnabled}
+                  style:right={stickyAppendSnippet && stickyEnabled ? 0 : undefined}
                 >
-                  <div class="row-append-cell" style="display: inline-block; white-space: nowrap;">
-                    {@render appendSnippet({ index: i, item })}
+                  <div
+                    class="row-append-cell"
+                    style="display: inline-block; white-space: nowrap;"
+                  >
+                    {@render appendSnippet?.({ index: i, item })}
                   </div>
                 </td>
               {/if}
-              {#if stickyAppendSnippet}
-                <td></td>
-              {/if}
-              {#if resizableColumns && remainingWidth}
+              {#if remainingWidth}
                 <td></td>
               {/if}
             </tr>
@@ -750,10 +785,7 @@ function resizeHeader(th, header) {
       var(--simple-table-default-non-resizable-header-width)
     );
   }
-  .thead th.fixed-col {
-    position: sticky;
-    right: 0;
-    z-index: 3;
+  .row-append-header {
     width: 23px;
     min-width: 23px;
   }

package/dist/components/simple/lists/SimpleTable.svelte.d.ts

@@ -45,9 +45,9 @@ declare class __sveltets_Render<Item extends {
         loading?: boolean;
         doubleClickActive?: boolean;
         doubleClickDelay?: number;
-        stickFirstColumn?: boolean;
         calculateRowStyles?: CalculateRowStyles<Item> | undefined;
         calculateRowClasses?: CalculateRowClasses<Item> | undefined;
+        stickyMinContainerWidth?: number;
         onsort?: ((event: {
             detail: {
                 sortedBy: string | undefined;

package/dist/index.d.ts

@@ -85,3 +85,5 @@ export { default as CollapsibleDivider } from './components/simple/common/Collap
 export { default as ConfirmOrCancelButtons } from './components/composed/forms/ConfirmOrCancelButtons.svelte';
 export { default as SearchBar } from './components/composed/search/SearchBar.svelte';
 export { default as DashboardShaper } from './components/composed/dashboard/DashboardShaper.svelte';
+export { default as PeriodSelector } from './components/composed/forms/PeriodSelector.svelte';
+export { default as PeriodPicker } from './components/composed/forms/PeriodPicker.svelte';

package/dist/index.js

@@ -85,3 +85,5 @@ export { default as CollapsibleDivider } from './components/simple/common/Collap
 export { default as ConfirmOrCancelButtons } from './components/composed/forms/ConfirmOrCancelButtons.svelte';
 export { default as SearchBar } from './components/composed/search/SearchBar.svelte';
 export { default as DashboardShaper } from './components/composed/dashboard/DashboardShaper.svelte';
+export { default as PeriodSelector } from './components/composed/forms/PeriodSelector.svelte';
+export { default as PeriodPicker } from './components/composed/forms/PeriodPicker.svelte';

package/package.json

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