@ibobbyts/svelte-ui-utils 0.1.2

package/dist/data-table/DateRangeFilter.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+  import { getUiMessages, type UiLanguage } from '../i18n.js';
+  import type { DateRangeFilterValue, DateRangePreset } from './types.js';
+
+  export let value: DateRangeFilterValue = {
+    startDate: '',
+    endDate: '',
+    preset: null
+  };
+  export let language: UiLanguage = 'en_us';
+  export let startLabel: string | undefined = undefined;
+  export let endLabel: string | undefined = undefined;
+  export let presetLabels: Partial<Record<DateRangePreset, string>> = {};
+  export let now: () => Date = () => new Date();
+  export let weekStartsOn: 0 | 1 = 1;
+  export let onChange: ((value: DateRangeFilterValue) => void) | undefined = undefined;
+
+  const presets: DateRangePreset[] = [
+    'last24Hours',
+    'last7Days',
+    'last30Days',
+    'today',
+    'thisWeek',
+    'thisMonth',
+    'thisYear'
+  ];
+
+  $: messages = getUiMessages(language);
+  $: resolvedStartLabel = startLabel ?? messages.dateRange.startLabel;
+  $: resolvedEndLabel = endLabel ?? messages.dateRange.endLabel;
+
+  function pad(value: number) {
+    return String(value).padStart(2, '0');
+  }
+
+  function formatDate(date: Date) {
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  }
+
+  function formatDateTime(date: Date) {
+    return `${formatDate(date)}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+  }
+
+  function startOfDay(date: Date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+
+  function addDays(date: Date, days: number) {
+    const next = new Date(date);
+    next.setDate(next.getDate() + days);
+    return next;
+  }
+
+  function startOfWeek(date: Date) {
+    const start = startOfDay(date);
+    const day = start.getDay();
+    const offset = weekStartsOn === 1 ? (day + 6) % 7 : day;
+    return addDays(start, -offset);
+  }
+
+  function resolvePreset(preset: DateRangePreset): DateRangeFilterValue {
+    const current = now();
+    const today = startOfDay(current);
+
+    if (preset === 'last24Hours') {
+      const start = new Date(current.getTime() - 24 * 60 * 60 * 1000);
+      return {
+        startDate: formatDate(start),
+        endDate: formatDate(current),
+        preset,
+        startDateTime: formatDateTime(start),
+        endDateTime: formatDateTime(current)
+      };
+    }
+
+    if (preset === 'last7Days') {
+      return {
+        startDate: formatDate(addDays(today, -6)),
+        endDate: formatDate(today),
+        preset
+      };
+    }
+
+    if (preset === 'last30Days') {
+      return {
+        startDate: formatDate(addDays(today, -29)),
+        endDate: formatDate(today),
+        preset
+      };
+    }
+
+    if (preset === 'thisWeek') {
+      return {
+        startDate: formatDate(startOfWeek(today)),
+        endDate: formatDate(today),
+        preset
+      };
+    }
+
+    if (preset === 'thisMonth') {
+      return {
+        startDate: formatDate(new Date(today.getFullYear(), today.getMonth(), 1)),
+        endDate: formatDate(today),
+        preset
+      };
+    }
+
+    if (preset === 'thisYear') {
+      return {
+        startDate: formatDate(new Date(today.getFullYear(), 0, 1)),
+        endDate: formatDate(today),
+        preset
+      };
+    }
+
+    return {
+      startDate: formatDate(today),
+      endDate: formatDate(today),
+      preset
+    };
+  }
+
+  function emit(next: DateRangeFilterValue) {
+    value = next;
+    onChange?.(next);
+  }
+
+  function updateDate(part: 'startDate' | 'endDate', nextValue: string) {
+    emit({
+      startDate: part === 'startDate' ? nextValue : value.startDate,
+      endDate: part === 'endDate' ? nextValue : value.endDate,
+      preset: null
+    });
+  }
+
+  function applyPreset(preset: DateRangePreset) {
+    emit(resolvePreset(preset));
+  }
+
+  function labelFor(preset: DateRangePreset) {
+    return presetLabels[preset] ?? messages.dateRange.presetLabels[preset];
+  }
+</script>
+
+<div class="suu-date-range-filter">
+  <label class="suu-range-field">
+    <span>{resolvedStartLabel}</span>
+    <input
+      type="date"
+      value={value.startDate}
+      on:change={(event) => updateDate('startDate', (event.currentTarget as HTMLInputElement).value)}
+    />
+  </label>
+  <label class="suu-range-field">
+    <span>{resolvedEndLabel}</span>
+    <input
+      type="date"
+      value={value.endDate}
+      on:change={(event) => updateDate('endDate', (event.currentTarget as HTMLInputElement).value)}
+    />
+  </label>
+  <div class="suu-filter-preset-row">
+    {#each presets as preset}
+      <button
+        type="button"
+        class="suu-filter-preset"
+        class:suu-filter-preset--active={value.preset === preset}
+        on:click={() => applyPreset(preset)}
+      >
+        {labelFor(preset)}
+      </button>
+    {/each}
+  </div>
+</div>

package/dist/data-table/DateRangeFilter.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type UiLanguage } from '../i18n.js';
+import type { DateRangeFilterValue, DateRangePreset } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DateRangeFilter: $$__sveltets_2_IsomorphicComponent<{
+    value?: DateRangeFilterValue;
+    language?: UiLanguage;
+    startLabel?: string | undefined;
+    endLabel?: string | undefined;
+    presetLabels?: Partial<Record<DateRangePreset, string>>;
+    now?: () => Date;
+    weekStartsOn?: 0 | 1;
+    onChange?: ((value: DateRangeFilterValue) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DateRangeFilter = InstanceType<typeof DateRangeFilter>;
+export default DateRangeFilter;
+//# sourceMappingURL=DateRangeFilter.svelte.d.ts.map

package/dist/data-table/DateRangeFilter.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeFilter.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/DateRangeFilter.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAsKxE,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,eAAe;YAVmL,oBAAoB;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;mBAAiB,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;UAAQ,MAAM,IAAI;mBAAiB,CAAC,GAAG,CAAC;eAAa,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC,GAAG,SAAS;;;kBAUhX,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/data-table/FilterControl.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import DropdownSearch from '../dropdown-search/DropdownSearch.svelte';
+  import type { UiLanguage } from '../i18n.js';
+  import DateRangeFilter from './DateRangeFilter.svelte';
+  import NumberRangeFilter from './NumberRangeFilter.svelte';
+  import type { FilterControl } from './types.js';
+
+  export let control: FilterControl;
+  export let language: UiLanguage = 'en_us';
+
+  function actionClass(variant: string | undefined): string {
+    return `suu-filter-table__action suu-filter-table__action--${variant ?? 'outline'}`;
+  }
+
+  function toggleCheckbox(value: string | number, checked: boolean) {
+    if (control.type !== 'checkbox') {
+      return;
+    }
+
+    const current = [...control.value];
+    const next = checked ? [...new Set([...current, value])] : current.filter((item) => item !== value);
+    void control.onChange(next);
+  }
+
+  function runButton() {
+    if (control.type === 'button') {
+      void control.onClick();
+    }
+  }
+
+  function runSelect(event: Event) {
+    if (control.type === 'select') {
+      void control.onChange((event.currentTarget as HTMLSelectElement).value);
+    }
+  }
+</script>
+
+{#if control.type === 'container'}
+  <div class="suu-filter-table__control-row">
+    {#each control.controls as child}
+      <svelte:self control={child} {language} />
+    {/each}
+  </div>
+{:else if control.type === 'checkbox'}
+  <div class="suu-filter-table__options">
+    {#each control.options as option}
+      <label class="suu-filter-table__option" class:suu-filter-table__option--checked={control.value.includes(option.value)}>
+        <input
+          class="suu-filter-table__option-input"
+          type="checkbox"
+          value={option.value}
+          disabled={option.disabled}
+          checked={control.value.includes(option.value)}
+          on:change={(event) => toggleCheckbox(option.value, (event.currentTarget as HTMLInputElement).checked)}
+        />
+        <span class="suu-filter-table__option-label">{option.label}</span>
+        <span class="suu-filter-table__option-check" aria-hidden="true">
+          <svg viewBox="0 0 20 20">
+            <path d="m5 10 3 3 7-7"></path>
+          </svg>
+        </span>
+      </label>
+    {/each}
+  </div>
+{:else if control.type === 'radio'}
+  <div class="suu-filter-table__options">
+    {#each control.options as option}
+      <label class="suu-filter-table__option" class:suu-filter-table__option--checked={control.value === option.value}>
+        <input
+          class="suu-filter-table__option-input"
+          type="radio"
+          value={option.value}
+          disabled={option.disabled}
+          checked={control.value === option.value}
+          on:change={() => control.type === 'radio' && void control.onChange(option.value)}
+        />
+        <span class="suu-filter-table__option-label">{option.label}</span>
+        <span class="suu-filter-table__option-check" aria-hidden="true">
+          <svg viewBox="0 0 20 20">
+            <path d="m5 10 3 3 7-7"></path>
+          </svg>
+        </span>
+      </label>
+    {/each}
+  </div>
+{:else if control.type === 'dropdownSearch'}
+  <DropdownSearch
+    value={control.value}
+    selectedItem={control.selectedItem}
+    status={control.status}
+    placeholder={control.placeholder ?? ''}
+    ariaLabel={control.ariaLabel}
+    debounceMs={control.debounceMs ?? 500}
+    limit={control.limit ?? 10}
+    minLength={control.minLength ?? 1}
+    {language}
+    noResultsText={control.noResultsText}
+    loadingText={control.loadingText}
+    clearLabel={control.clearLabel}
+    searchOnExternalValueChange={control.searchOnExternalValueChange ?? false}
+    width={control.width}
+    minWidth={control.minWidth}
+    maxWidth={control.maxWidth}
+    getItemValue={control.getItemValue ?? ((item) => item.title)}
+    loadOptions={control.loadOptions}
+    onChange={(detail) => control.type === 'dropdownSearch' && void control.onChange(detail)}
+  />
+{:else if control.type === 'dateRange'}
+  <DateRangeFilter
+    value={control.value}
+    {language}
+    startLabel={control.startLabel}
+    endLabel={control.endLabel}
+    presetLabels={control.presetLabels ?? {}}
+    now={control.now ?? (() => new Date())}
+    weekStartsOn={control.weekStartsOn ?? 1}
+    onChange={(detail) => control.type === 'dateRange' && void control.onChange(detail)}
+  />
+{:else if control.type === 'numberRange'}
+  <NumberRangeFilter
+    value={control.value}
+    {language}
+    minLabel={control.minLabel}
+    maxLabel={control.maxLabel}
+    prefixLabel={control.prefixLabel ?? ''}
+    min={control.min}
+    max={control.max}
+    step={control.step ?? 'any'}
+    width={control.width}
+    onChange={(detail) => control.type === 'numberRange' && void control.onChange(detail)}
+  />
+{:else if control.type === 'button'}
+  <button
+    type="button"
+    class={actionClass(control.variant)}
+    aria-label={control.ariaLabel}
+    disabled={control.disabled}
+    on:click={runButton}
+  >
+    {#if control.icon === 'search'}
+      <svg class="suu-filter-table__action-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <circle cx="11" cy="11" r="7"></circle>
+        <path d="m16 16 4 4"></path>
+      </svg>
+    {:else if control.icon === 'qr'}
+      <svg class="suu-filter-table__action-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4z"></path>
+        <path d="M14 14h2v2h-2zM18 14h2v2h-2zM14 18h2v2h-2zM18 18h2v2h-2z"></path>
+      </svg>
+    {:else if control.icon === 'x'}
+      <svg class="suu-filter-table__action-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="m6 6 12 12M18 6 6 18"></path>
+      </svg>
+    {/if}
+    {#if control.label}
+      <span>{control.label}</span>
+    {/if}
+  </button>
+{:else if control.type === 'link'}
+  <a class={actionClass(control.variant ?? 'ghost')} href={control.href} aria-label={control.ariaLabel}>
+    {#if control.icon === 'search'}
+      <svg class="suu-filter-table__action-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <circle cx="11" cy="11" r="7"></circle>
+        <path d="m16 16 4 4"></path>
+      </svg>
+    {:else if control.icon === 'qr'}
+      <svg class="suu-filter-table__action-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4z"></path>
+        <path d="M14 14h2v2h-2zM18 14h2v2h-2zM14 18h2v2h-2zM18 18h2v2h-2z"></path>
+      </svg>
+    {:else if control.icon === 'x'}
+      <svg class="suu-filter-table__action-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="m6 6 12 12M18 6 6 18"></path>
+      </svg>
+    {/if}
+    <span>{control.label}</span>
+  </a>
+{:else if control.type === 'select'}
+  <select class="suu-filter-table__select" aria-label={control.ariaLabel} value={control.value} on:change={runSelect}>
+    {#each control.options as option}
+      <option value={option.value} disabled={option.disabled}>{option.label}</option>
+    {/each}
+  </select>
+{/if}

package/dist/data-table/FilterControl.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { FilterControl } from './types.js';
+declare const FilterControl: any;
+type FilterControl = InstanceType<typeof FilterControl>;
+export default FilterControl;
+//# sourceMappingURL=FilterControl.svelte.d.ts.map

package/dist/data-table/FilterControl.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterControl.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/FilterControl.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AA0IhD,QAAA,MAAM,aAAa,KAA+E,CAAC;AACjF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/data-table/FilterTable.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import FilterControl from './FilterControl.svelte';
+  import type { UiLanguage } from '../i18n.js';
+  import type { FilterTableRow } from './types.js';
+
+  export let rows: FilterTableRow[] = [];
+  export let language: UiLanguage = 'en_us';
+</script>
+
+<div class="suu-filter-table">
+  <div class="suu-filter-table__filters-wrap">
+    <table class="suu-filter-table__filters">
+      <tbody>
+        {#each rows as row (row.key)}
+          <tr>
+            <th scope="row">{row.title}</th>
+            <td>
+              <FilterControl control={row.filter} {language} />
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>

package/dist/data-table/FilterTable.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { UiLanguage } from '../i18n.js';
+import type { FilterTableRow } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FilterTable: $$__sveltets_2_IsomorphicComponent<{
+    rows?: FilterTableRow[];
+    language?: UiLanguage;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FilterTable = InstanceType<typeof FilterTable>;
+export default FilterTable;
+//# sourceMappingURL=FilterTable.svelte.d.ts.map

package/dist/data-table/FilterTable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/FilterTable.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AA8BjD,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;WAV4C,cAAc,EAAE;eAAa,UAAU;;;kBAUJ,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/data-table/NumberRangeFilter.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { getUiMessages, type UiLanguage } from '../i18n.js';
+  import type { NumberRangeFilterValue } from './types.js';
+
+  export let value: NumberRangeFilterValue = {
+    min: null,
+    max: null
+  };
+  export let language: UiLanguage = 'en_us';
+  export let minLabel: string | undefined = undefined;
+  export let maxLabel: string | undefined = undefined;
+  export let prefixLabel = '';
+  export let min: number | undefined = undefined;
+  export let max: number | undefined = undefined;
+  export let step: number | string = 'any';
+  export let width: string | undefined = undefined;
+  export let onChange: ((value: NumberRangeFilterValue) => void) | undefined = undefined;
+
+  $: messages = getUiMessages(language);
+  $: resolvedMinLabel = minLabel ?? messages.numberRange.minLabel;
+  $: resolvedMaxLabel = maxLabel ?? messages.numberRange.maxLabel;
+
+  function parseNumber(input: string): number | null {
+    if (input.trim() === '') {
+      return null;
+    }
+
+    const parsed = Number(input);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+
+  function emit(next: NumberRangeFilterValue) {
+    value = next;
+    onChange?.(next);
+  }
+
+  function update(part: 'min' | 'max', input: string) {
+    emit({
+      min: part === 'min' ? parseNumber(input) : value.min,
+      max: part === 'max' ? parseNumber(input) : value.max
+    });
+  }
+</script>
+
+<div class="suu-number-range-filter" style:--suu-number-range-field-width={width}>
+  <label class="suu-range-field">
+    <span>{resolvedMinLabel}</span>
+    <div class="suu-input-affix">
+      {#if prefixLabel}
+        <span class="suu-input-affix__label">{prefixLabel}</span>
+      {/if}
+      <input
+        type="number"
+        aria-label={resolvedMinLabel}
+        {min}
+        {max}
+        {step}
+        value={value.min ?? ''}
+        on:input={(event) => update('min', (event.currentTarget as HTMLInputElement).value)}
+      />
+    </div>
+  </label>
+  <label class="suu-range-field">
+    <span>{resolvedMaxLabel}</span>
+    <div class="suu-input-affix">
+      {#if prefixLabel}
+        <span class="suu-input-affix__label">{prefixLabel}</span>
+      {/if}
+      <input
+        type="number"
+        aria-label={resolvedMaxLabel}
+        {min}
+        {max}
+        {step}
+        value={value.max ?? ''}
+        on:input={(event) => update('max', (event.currentTarget as HTMLInputElement).value)}
+      />
+    </div>
+  </label>
+</div>

package/dist/data-table/NumberRangeFilter.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type UiLanguage } from '../i18n.js';
+import type { NumberRangeFilterValue } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NumberRangeFilter: $$__sveltets_2_IsomorphicComponent<{
+    value?: NumberRangeFilterValue;
+    language?: UiLanguage;
+    minLabel?: string | undefined;
+    maxLabel?: string | undefined;
+    prefixLabel?: string;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | string;
+    width?: string | undefined;
+    onChange?: ((value: NumberRangeFilterValue) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NumberRangeFilter = InstanceType<typeof NumberRangeFilter>;
+export default NumberRangeFilter;
+//# sourceMappingURL=NumberRangeFilter.svelte.d.ts.map

package/dist/data-table/NumberRangeFilter.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberRangeFilter.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/NumberRangeFilter.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAqEzD,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,iBAAiB;YAVqL,sBAAsB;eAAa,UAAU;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;;UAA0C,MAAM,GAAG,SAAS;UAAQ,MAAM,GAAG,SAAS;WAAS,MAAM,GAAG,MAAM;YAAU,MAAM,GAAG,SAAS;eAAa,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC,GAAG,SAAS;;;kBAU7Z,CAAC;AACrF,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,eAAe,iBAAiB,CAAC"}

package/dist/data-table/filter.d.ts

@@ -0,0 +1,23 @@
+import type { CheckboxFilterControl, DateRangeFilterControl, DropdownSearchFilterControl, FilterButtonControl, FilterContainerControl, FilterControl, FilterLinkControl, FilterSelectControl, NumberRangeFilterControl, RadioFilterControl } from './types.js';
+declare function checkbox(options: Omit<CheckboxFilterControl, 'type'>): CheckboxFilterControl;
+declare function radio(options: Omit<RadioFilterControl, 'type'>): RadioFilterControl;
+declare function dropdownSearch(options: Omit<DropdownSearchFilterControl, 'type'>): DropdownSearchFilterControl;
+declare function dateRange(options: Omit<DateRangeFilterControl, 'type'>): DateRangeFilterControl;
+declare function numberRange(options: Omit<NumberRangeFilterControl, 'type'>): NumberRangeFilterControl;
+declare function button(options: Omit<FilterButtonControl, 'type'>): FilterButtonControl;
+declare function link(options: Omit<FilterLinkControl, 'type'>): FilterLinkControl;
+declare function select(options: Omit<FilterSelectControl, 'type'>): FilterSelectControl;
+declare function container(controls: FilterControl[]): FilterContainerControl;
+export declare const filter: {
+    checkbox: typeof checkbox;
+    radio: typeof radio;
+    dropdownSearch: typeof dropdownSearch;
+    dateRange: typeof dateRange;
+    numberRange: typeof numberRange;
+    button: typeof button;
+    link: typeof link;
+    select: typeof select;
+    container: typeof container;
+};
+export {};
+//# sourceMappingURL=filter.d.ts.map

package/dist/data-table/filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/filter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,2BAA2B,EAC3B,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAEpB,iBAAS,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAErF;AAED,iBAAS,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,GAAG,kBAAkB,CAE5E;AAED,iBAAS,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,2BAA2B,EAAE,MAAM,CAAC,GAAG,2BAA2B,CAEvG;AAED,iBAAS,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,GAAG,sBAAsB,CAExF;AAED,iBAAS,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE,MAAM,CAAC,GAAG,wBAAwB,CAE9F;AAED,iBAAS,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GAAG,mBAAmB,CAE/E;AAED,iBAAS,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,GAAG,iBAAiB,CAEzE;AAED,iBAAS,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,GAAG,mBAAmB,CAE/E;AAED,iBAAS,SAAS,CAAC,QAAQ,EAAE,aAAa,EAAE,GAAG,sBAAsB,CAEpE;AAED,eAAO,MAAM,MAAM;;;;;;;;;;CAUlB,CAAC"}

package/dist/data-table/filter.js

@@ -0,0 +1,38 @@
+function checkbox(options) {
+    return { type: 'checkbox', ...options };
+}
+function radio(options) {
+    return { type: 'radio', ...options };
+}
+function dropdownSearch(options) {
+    return { type: 'dropdownSearch', ...options };
+}
+function dateRange(options) {
+    return { type: 'dateRange', ...options };
+}
+function numberRange(options) {
+    return { type: 'numberRange', ...options };
+}
+function button(options) {
+    return { type: 'button', ...options };
+}
+function link(options) {
+    return { type: 'link', ...options };
+}
+function select(options) {
+    return { type: 'select', ...options };
+}
+function container(controls) {
+    return { type: 'container', controls };
+}
+export const filter = {
+    checkbox,
+    radio,
+    dropdownSearch,
+    dateRange,
+    numberRange,
+    button,
+    link,
+    select,
+    container
+};

package/dist/data-table/index.d.ts

@@ -0,0 +1,11 @@
+export { default as DataTable } from './DataTable.svelte';
+export { default as DateRangeFilter } from './DateRangeFilter.svelte';
+export { default as FilterTable } from './FilterTable.svelte';
+export { default as NumberRangeFilter } from './NumberRangeFilter.svelte';
+export { default as Pagination } from '../pagination/Pagination.svelte';
+export { filter } from './filter.js';
+export { getUiMessages, resolveUiLanguage, uiLanguages } from '../i18n.js';
+export { getAriaSort, getCellValue, getPageCount, normalizePagination, setDataTableFilters, setDataTablePageSize, setDataTablePagination, setDataTableSort, toggleSort } from './state.js';
+export type { UiLanguage, UiMessages } from '../i18n.js';
+export type { CheckboxFilterDefinition, CheckboxFilterControl, DataTableColumn, DataTableCellValue, DataTableClassValue, DataTableLayout, DateRangeFilterDefinition, DateRangeFilterControl, DateRangeFilterValue, DateRangePreset, DataTableRowAttributes, DataTableRowKey, DataTableSortChangeHandler, DataTableState, DataTableStateChangeHandler, DropdownSearchFilterDefinition, DropdownSearchFilterControl, FilterDefinition, FilterButtonControl, FilterContainerControl, FilterControl, FilterLinkControl, FilterOption, FilterSelectControl, FilterState, FilterTableRow, FilterValue, NumberRangeFilterDefinition, NumberRangeFilterControl, NumberRangeFilterValue, PaginationState, PaginationChangeHandler, PaginationDropdownPlacement, RadioFilterDefinition, RadioFilterControl, SortDirection, SortState } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/data-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,UAAU,EACX,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EACV,wBAAwB,EACxB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,yBAAyB,EACzB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,cAAc,EACd,2BAA2B,EAC3B,8BAA8B,EAC9B,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,EACnB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,cAAc,EACd,WAAW,EACX,2BAA2B,EAC3B,wBAAwB,EACxB,sBAAsB,EACtB,eAAe,EACf,uBAAuB,EACvB,2BAA2B,EAC3B,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,EACb,SAAS,EACV,MAAM,YAAY,CAAC"}