@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/form/TimePicker.svelte

@@ -1,22 +1,33 @@
-<script lang="ts">
-	import dayjs from 'dayjs';
-	import Button from '../ui/Button.svelte';
-	import Number from './Number.svelte';
-	import { themeState } from '../theme.svelte.js';
-	import customParseFormat from 'dayjs/plugin/customParseFormat.js';
-
-	interface Props {
+<script module lang="ts">
+	export interface TimePickerProps {
+		/** Label text displayed above the picker */
 		label?: string;
+		/** Disable the time picker */
 		disabled?: boolean;
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** CSS classes for the container element */
 		containerClass?: string;
+		/** Selected time value in HH:mm format (bindable) */
 		value?: string | undefined;
+		/** Use rounded time increments */
 		rounded?: boolean;
+		/** Minimum selectable time */
 		minDate?: string | undefined;
+		/** Maximum selectable time */
 		maxDate?: string | undefined;
+		/** Currently selected date (for date-time combinations) */
 		selectedDate?: string | undefined;
+		/** Callback when selected time changes */
 		onchange?: (date: string | undefined) => void;
 	}
+</script>
+
+<script lang="ts">
+	import dayjs from '../util/dayjs.js';
+	import Button from '../ui/Button.svelte';
+	import Number from './Number.svelte';
+	import { themeState } from '../theme.svelte.js';
 
 	let {
 		label,
@@ -29,9 +40,8 @@
 		minDate,
 		maxDate,
 		selectedDate
-	}: Props = $props();
+	}: TimePickerProps = $props();
 
-	dayjs.extend(customParseFormat);
 	let time: dayjs.Dayjs = $derived(value ? dayjs(value, ['HH:mm:ss', 'HH:mm']) : dayjs());
 
 	let amPm: 'am' | 'pm' = $derived(time.hour() >= 12 ? 'pm' : 'am');
@@ -144,9 +154,9 @@
 </script>
 
 <div class="element-container {rounded && 'rounded'} {containerClass}">
-	<div class="time-label">{label}</div>
-	<div class="time-wrapper">
-		<div class="time-container">
+	<div class="mb-1">{label}</div>
+	<div class="d-flex justify-content-between align-items-center">
+		<div class="time-container d-flex justify-content-between align-items-center flex-grow-1 gap-1">
 			<Number
 				{disabled}
 				bind:value={hours}
@@ -174,7 +184,7 @@
 					amPm = amPm === 'am' ? 'pm' : 'am';
 					UpdateTime();
 				}}
-				variant={themeState.isDarkMode ? 'secondary' : 'primary'}
+				variant={themeState.isDarkMode ? 'accent' : 'primary'}
 			>
 				{amPm.toUpperCase()}
 			</Button>
@@ -183,38 +193,23 @@
 </div>
 
 <style>
-	.time-label {
-		margin-bottom: var(--pui-spacing-1);
-	}
-
-	.time-wrapper {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
 	.time-picker-container {
-		border-radius: var(--pui-radius-lg);
+		border-radius: 1rem;
 		overflow: hidden;
 	}
 
 	.time-container {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		flex-grow: 1;
-		gap: var(--pui-spacing-1);
-		background-color: var(--pui-color-gray-100);
-		border: 1px solid var(--pui-border-default);
-		border-top-left-radius: var(--pui-radius-md);
-		border-bottom-left-radius: var(--pui-radius-md);
+		background-color: #f8f9fa;
+		border: 1px solid var(--border-color);
+		border-top-left-radius: 0.5rem;
+		border-bottom-left-radius: 0.5rem;
 
 		:global(.number-container) {
 			flex-grow: 1;
 
 			:global(.number-input input) {
 				text-align: center;
-				background-color: var(--pui-color-gray-100);
+				background-color: #f8f9fa;
 			}
 		}
 	}
@@ -225,43 +220,43 @@
 	}
 
 	.time-container :global(.number-container:first-child .number:hover) {
-		border-right: 1px solid var(--pui-border-default) !important;
-		background-color: var(--pui-bg-hover) !important;
+		border-right: 1px solid var(--border-color) !important;
+		background-color: rgba(var(--accent-text-color-rgb), 0.2) !important;
 	}
 
 	.time-container :global(.number-container:last-child .number:hover) {
-		border-left: 1px solid var(--pui-border-default) !important;
-		background-color: var(--pui-bg-hover) !important;
+		border-left: 1px solid var(--border-color) !important;
+		background-color: rgba(var(--accent-text-color-rgb), 0.2) !important;
 	}
 
 	.time-container :global(.number-container:first-child .number) {
-		border-top-left-radius: var(--pui-radius-md);
-		border-bottom-left-radius: var(--pui-radius-md);
+		border-top-left-radius: 0.5rem;
+		border-bottom-left-radius: 0.5rem;
 	}
 
 	.am-pm-container :global(.pui-button) {
 		border-radius: 0;
-		border-top-right-radius: var(--pui-radius-md);
-		border-bottom-right-radius: var(--pui-radius-md);
+		border-top-right-radius: 0.5rem;
+		border-bottom-right-radius: 0.5rem;
 	}
 
 	:global(.dark) {
 		.time-container {
-			background-color: var(--pui-color-dark-200);
+			background-color: #252529;
 
 			:global(.number-container) {
 				:global(.number-input input) {
-					background-color: var(--pui-color-dark-200);
+					background-color: #252529;
 				}
 			}
 		}
 
 		.time-container :global(.number-container:first-child .number:hover) {
-			background-color: var(--pui-bg-hover) !important;
+			background-color: rgba(var(--accent-text-color-rgb), 0.1) !important;
 		}
 
 		.time-container :global(.number-container:last-child .number:hover) {
-			background-color: var(--pui-bg-hover) !important;
+			background-color: rgba(var(--accent-text-color-rgb), 0.1) !important;
 		}
 	}
 </style>

package/dist/form/TimePicker.svelte.d.ts

@@ -1,15 +1,25 @@
-interface Props {
+export interface TimePickerProps {
+    /** Label text displayed above the picker */
     label?: string;
+    /** Disable the time picker */
     disabled?: boolean;
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** CSS classes for the container element */
     containerClass?: string;
+    /** Selected time value in HH:mm format (bindable) */
     value?: string | undefined;
+    /** Use rounded time increments */
     rounded?: boolean;
+    /** Minimum selectable time */
     minDate?: string | undefined;
+    /** Maximum selectable time */
     maxDate?: string | undefined;
+    /** Currently selected date (for date-time combinations) */
     selectedDate?: string | undefined;
+    /** Callback when selected time changes */
     onchange?: (date: string | undefined) => void;
 }
-declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+declare const TimePicker: import("svelte").Component<TimePickerProps, {}, "value">;
 type TimePicker = ReturnType<typeof TimePicker>;
 export default TimePicker;

package/dist/form/comboBoxCore.svelte.d.ts

@@ -0,0 +1,99 @@
+import type { ComboBoxGroup, ComboBoxItem, FetchFunctionType, RetrieveLabelFunctionType, SearchFunctionType } from '../models/ComboBoxItem.js';
+/**
+ * Option/search lifecycle shared by every option-driven input regardless of
+ * whether it holds a single value or many. Value-specific concerns
+ * (selected-state, value preloading) are supplied by the subclasses.
+ *
+ * Value/rawValue accessors live on the subclass configs because they are
+ * `$bindable` props on the host component and can't be referenced from here.
+ */
+export interface ComboBoxDataConfig {
+    /** Current flat options, read reactively */
+    getOptions: () => ComboBoxItem[];
+    /** Current grouped options, read reactively */
+    getGroupedOptions: () => ComboBoxGroup[];
+    getFetchFunction: () => FetchFunctionType | null;
+    getSearchFunction: () => SearchFunctionType | null;
+    getRetrieveLabelFunction: () => RetrieveLabelFunctionType | null;
+    /** Called after options are (re)applied so the host can re-run its active filter */
+    onOptionsChanged?: () => void;
+}
+/** Config for single-value inputs (Select, Autocomplete). */
+export interface ComboBoxCoreConfig extends ComboBoxDataConfig {
+    /** Current bound value, read reactively */
+    getValue: () => string | undefined;
+    /** Update the bound value */
+    setValue: (value: string | undefined) => void;
+    /** Update the bound rawValue */
+    setRawValue: (raw: ComboBoxItem | undefined) => void;
+    /**
+     * When the value isn't among static options, clear it (Select — so forms don't
+     * submit a stale key) instead of keeping it as freeform text (Autocomplete).
+     */
+    clearUnknownStatic?: boolean;
+    /** Called after preloadValues clears the value via the static-unknown path */
+    onValueCleared?: () => void;
+    /** Called once an async retrieveLabel resolves a rawValue */
+    onRawValueResolved?: (raw: ComboBoxItem | undefined) => void;
+}
+/** Config for multi-value inputs (SelectMulti, AutocompleteMulti). */
+export interface ComboBoxMultiCoreConfig extends ComboBoxDataConfig {
+    /** Current bound values, read reactively */
+    getValues: () => string[];
+    /**
+     * Snapshot of the caller-supplied initial rawValues. Used as a label source for
+     * values the options can't resolve, so parents can preset selections with known
+     * labels without a retrieveLabel round-trip. A snapshot (not the live binding) so
+     * items selected later still go through the normal stale-value cleanup.
+     */
+    initialRawValues?: ComboBoxItem[];
+    /** Update the bound values */
+    setValues: (values: string[]) => void;
+    /** Update the bound rawValues */
+    setRawValues: (raw: ComboBoxItem[]) => void;
+    /** Drop values not found among static options (SelectMulti) instead of keeping them (AutocompleteMulti) */
+    clearUnknownStatic?: boolean;
+    /** Called after preloadValues drops unknown static values */
+    onValuesCleared?: () => void;
+    /** Called once async retrieveLabel calls resolve the rawValues */
+    onRawValuesResolved?: (raw: ComboBoxItem[]) => void;
+}
+export declare function flattenItems(groups: ComboBoxGroup[]): ComboBoxItem[];
+export declare function findItemByValue(groups: ComboBoxGroup[], value: string | undefined): ComboBoxItem | undefined;
+/**
+ * Owns the option/search data lifecycle shared by the single- and multi-value
+ * inputs: converting options into groups, reacting to option-prop changes,
+ * one-shot fetch, debounced remote search and local filtering.
+ *
+ * Instantiate (via a subclass) at the top of a component `<script>` so its
+ * `$effect`s register in that component's lifecycle.
+ */
+export declare abstract class ComboBoxDataCore<TConfig extends ComboBoxDataConfig> {
+    #private;
+    allGroups: ComboBoxGroup[];
+    filteredGroups: ComboBoxGroup[];
+    preloading: boolean;
+    searching: boolean;
+    protected config: TConfig;
+    constructor(config: TConfig);
+    /** Whether an option should render as selected for the current value(s). */
+    protected abstract isSelected(item: ComboBoxItem): boolean;
+    /** Resolve rawValue(s) for the current value(s). Returns true if it changed the value(s). */
+    abstract preloadValues(): boolean;
+    convertOptions(options: ComboBoxItem[]): void;
+    convertGroupOptions(groups: ComboBoxGroup[]): void;
+    /** Debounced remote search via searchFunction. */
+    search(filterValue: string, onComplete?: () => void): void;
+    /** Case-insensitive local filter over already-loaded options. */
+    filterLocal(filterValue: string): void;
+}
+/** Single-value data core (Select, Autocomplete). */
+export declare class ComboBoxCore extends ComboBoxDataCore<ComboBoxCoreConfig> {
+    protected isSelected(item: ComboBoxItem): boolean;
+    preloadValues(): boolean;
+}
+/** Multi-value data core (SelectMulti, AutocompleteMulti). */
+export declare class ComboBoxMultiCore extends ComboBoxDataCore<ComboBoxMultiCoreConfig> {
+    protected isSelected(item: ComboBoxItem): boolean;
+    preloadValues(): boolean;
+}

package/dist/form/comboBoxCore.svelte.js

@@ -0,0 +1,243 @@
+export function flattenItems(groups) {
+    return groups.flatMap((group) => group.items);
+}
+export function findItemByValue(groups, value) {
+    if (value === undefined || value === '')
+        return undefined;
+    return flattenItems(groups).find((item) => item.value === value);
+}
+/**
+ * Owns the option/search data lifecycle shared by the single- and multi-value
+ * inputs: converting options into groups, reacting to option-prop changes,
+ * one-shot fetch, debounced remote search and local filtering.
+ *
+ * Instantiate (via a subclass) at the top of a component `<script>` so its
+ * `$effect`s register in that component's lifecycle.
+ */
+export class ComboBoxDataCore {
+    allGroups = $state([]);
+    filteredGroups = $state([]);
+    preloading = $state(false);
+    searching = $state(false);
+    config;
+    #timeout;
+    #fetchInitialized = false;
+    #lastOptionsRef;
+    #lastGroupedRef;
+    constructor(config) {
+        this.config = config;
+        $effect(() => {
+            const cfg = this.config;
+            // fetchFunction is one-shot on mount; ignore later prop changes.
+            const fetchFunction = cfg.getFetchFunction();
+            if (fetchFunction) {
+                if (this.#fetchInitialized)
+                    return;
+                this.#fetchInitialized = true;
+                this.preloading = true;
+                fetchFunction().then((response) => {
+                    this.convertOptions(response.object ?? []);
+                    this.preloadValues();
+                    this.preloading = false;
+                });
+                return;
+            }
+            // Reference guard: skip rebuilds when the parent re-rendered the same arrays.
+            const options = cfg.getOptions();
+            const grouped = cfg.getGroupedOptions();
+            if (options === this.#lastOptionsRef && grouped === this.#lastGroupedRef)
+                return;
+            this.#lastOptionsRef = options;
+            this.#lastGroupedRef = grouped;
+            if (grouped.length) {
+                this.convertGroupOptions(grouped);
+            }
+            else if (options.length) {
+                this.convertOptions(options);
+            }
+            else {
+                this.allGroups = [];
+                this.filteredGroups = [];
+            }
+            this.preloadValues();
+            cfg.onOptionsChanged?.();
+        });
+        $effect(() => () => clearTimeout(this.#timeout));
+    }
+    convertOptions(options) {
+        const items = options.map((option) => ({ ...option, selected: this.isSelected(option) }));
+        this.allGroups = [{ label: '', items: [...items] }];
+        this.filteredGroups = [{ label: '', items: [...items] }];
+    }
+    convertGroupOptions(groups) {
+        this.allGroups = groups.map((group) => ({
+            ...group,
+            items: group.items.map((option) => ({
+                ...option,
+                selected: this.isSelected(option),
+                groupName: group.label
+            }))
+        }));
+        this.filteredGroups = [...this.allGroups];
+    }
+    /** Debounced remote search via searchFunction. */
+    search(filterValue, onComplete) {
+        clearTimeout(this.#timeout);
+        this.searching = true;
+        this.#timeout = setTimeout(() => {
+            this.config.getSearchFunction()(filterValue).then((response) => {
+                this.convertOptions(response.object ?? []);
+                this.searching = false;
+                onComplete?.();
+            });
+        }, 300);
+    }
+    /** Case-insensitive local filter over already-loaded options. */
+    filterLocal(filterValue) {
+        if (filterValue.length === 0) {
+            this.filteredGroups = this.allGroups;
+            return;
+        }
+        const needle = filterValue.toLowerCase();
+        this.filteredGroups = this.allGroups
+            .map((group) => ({
+            ...group,
+            items: group.items.filter((item) => item.label.toLowerCase().includes(needle))
+        }))
+            .filter((group) => group.items.length > 0);
+    }
+}
+/** Single-value data core (Select, Autocomplete). */
+export class ComboBoxCore extends ComboBoxDataCore {
+    isSelected(item) {
+        return item.value === this.config.getValue();
+    }
+    preloadValues() {
+        const cfg = this.config;
+        const value = cfg.getValue();
+        if (!value) {
+            cfg.setRawValue(undefined);
+            return false;
+        }
+        const found = findItemByValue(this.allGroups, value);
+        if (found !== undefined) {
+            cfg.setRawValue(found);
+            return false;
+        }
+        const retrieveLabelFunction = cfg.getRetrieveLabelFunction();
+        if (cfg.getSearchFunction() && retrieveLabelFunction) {
+            // Show the loader while resolving; discard if the value changes first.
+            cfg.setRawValue(undefined);
+            this.preloading = true;
+            const valueAtCall = value;
+            retrieveLabelFunction(value).then((response) => {
+                if (valueAtCall !== cfg.getValue())
+                    return;
+                const raw = {
+                    label: response.object ?? String(valueAtCall),
+                    value: valueAtCall
+                };
+                cfg.setRawValue(raw);
+                this.preloading = false;
+                cfg.onRawValueResolved?.(raw);
+            });
+            return false;
+        }
+        if (cfg.getFetchFunction()) {
+            // Async source may still resolve this value — keep it with a fallback label.
+            cfg.setRawValue({ label: String(value), value });
+            return false;
+        }
+        if (cfg.clearUnknownStatic) {
+            cfg.setValue(undefined);
+            cfg.setRawValue(undefined);
+            cfg.onValueCleared?.();
+            return true;
+        }
+        // Freeform (Autocomplete): leave the typed value in place.
+        return false;
+    }
+}
+/** Multi-value data core (SelectMulti, AutocompleteMulti). */
+export class ComboBoxMultiCore extends ComboBoxDataCore {
+    isSelected(item) {
+        return this.config.getValues().includes(item.value);
+    }
+    preloadValues() {
+        const cfg = this.config;
+        const values = cfg.getValues() ?? [];
+        const items = flattenItems(this.allGroups);
+        for (const option of items)
+            option.selected = false;
+        if (values.length === 0) {
+            cfg.setRawValues([]);
+            return false;
+        }
+        const newRawValues = [];
+        const validValues = [];
+        const promises = [];
+        let droppedAny = false;
+        const searchFunction = cfg.getSearchFunction();
+        const retrieveLabelFunction = cfg.getRetrieveLabelFunction();
+        const fetchFunction = cfg.getFetchFunction();
+        for (const value of values) {
+            const found = items.find((x) => x.value === value);
+            if (found !== undefined) {
+                found.selected = true;
+                newRawValues.push({ ...found });
+                validValues.push(value);
+                continue;
+            }
+            const provided = cfg.initialRawValues?.find((x) => x.value === value);
+            if (provided !== undefined) {
+                // Caller vouched for this item up front — keep its label, skip async resolution
+                newRawValues.push({ ...provided, selected: true });
+                validValues.push(value);
+                continue;
+            }
+            if (searchFunction && retrieveLabelFunction) {
+                // Capture value to discard stale responses if the selection changes mid-request
+                const valueAtCall = value;
+                const placeholder = { label: String(value), value, selected: true };
+                promises.push(retrieveLabelFunction(value).then((response) => {
+                    if (!cfg.getValues().includes(valueAtCall))
+                        return;
+                    placeholder.label = response.object ?? String(valueAtCall);
+                }));
+                newRawValues.push(placeholder);
+                validValues.push(value);
+                continue;
+            }
+            if (fetchFunction) {
+                // Async data source may still resolve this value — preserve with fallback label
+                newRawValues.push({ label: String(value), value, selected: true });
+                validValues.push(value);
+                continue;
+            }
+            if (cfg.clearUnknownStatic) {
+                // Static options + unknown value: drop so form submits don't carry stale keys
+                droppedAny = true;
+            }
+            else {
+                // Freeform (AutocompleteMulti): keep the value as its own chip
+                newRawValues.push({ label: String(value), value, selected: true });
+                validValues.push(value);
+            }
+        }
+        cfg.setRawValues(newRawValues);
+        if (promises.length > 0) {
+            this.preloading = true;
+            Promise.all(promises).then(() => {
+                cfg.setRawValues([...newRawValues]);
+                this.preloading = false;
+                cfg.onRawValuesResolved?.(newRawValues);
+            });
+        }
+        if (droppedAny) {
+            cfg.setValues(validValues);
+            cfg.onValuesCleared?.();
+            return true;
+        }
+        return false;
+    }
+}

package/dist/icon/Icon.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
-	/** Raw HTML. Do NOT retrieve this from external sources; it will be executed in the browser */
-	interface Props {
+	export interface IconProps {
+		/** Raw SVG HTML string. Do NOT use external/user input - it will be executed in the browser */
 		svg: string;
+		/** Stroke color for the icon */
 		stroke?: string;
+		/** Fill color for the icon */
 		fill?: string;
+		/** Size of the icon (width and height) */
 		size?: string;
+		/** Flip the icon horizontally */
 		flip?: boolean;
+		/** Additional CSS classes */
 		class?: string;
 	}
 
@@ -16,7 +21,7 @@
 		size = '',
 		flip = false,
 		class: classes = ''
-	}: Props = $props();
+	}: IconProps = $props();
 
 	let sizeStyle = $derived(size ? `width:${size};height:${size};` : '');
 </script>

package/dist/icon/Icon.svelte.d.ts

@@ -1,12 +1,17 @@
-/** Raw HTML. Do NOT retrieve this from external sources; it will be executed in the browser */
-interface Props {
+export interface IconProps {
+    /** Raw SVG HTML string. Do NOT use external/user input - it will be executed in the browser */
     svg: string;
+    /** Stroke color for the icon */
     stroke?: string;
+    /** Fill color for the icon */
     fill?: string;
+    /** Size of the icon (width and height) */
     size?: string;
+    /** Flip the icon horizontally */
     flip?: boolean;
+    /** Additional CSS classes */
     class?: string;
 }
-declare const Icon: import("svelte").Component<Props, {}, "">;
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/icon/cube-send.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-cube-send"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 12.5l-5 -3l5 -3l5 3v5.5l-5 3l0 -5.5" /><path d="M11 9.5v5.5l5 3" /><path d="M16 12.545l5 -3.03" /><path d="M7 9h-5" /><path d="M7 12h-3" /><path d="M7 15h-1" /></svg>

package/dist/icon/file-type-bmp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-bmp"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M18 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"></path><path d="M4 21h1.5a1.5 1.5 0 0 0 0 -3h-1.5h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"></path><path d="M10 21v-6l2.5 3l2.5 -3v6"></path></svg>

package/dist/icon/file-type-csv.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-csv"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M7 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0"></path><path d="M10 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"></path><path d="M16 15l2 6l2 -6"></path></svg>

package/dist/icon/file-type-doc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-doc"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M5 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1"></path><path d="M20 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0"></path><path d="M12.5 15a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1 -3 0v-3a1.5 1.5 0 0 1 1.5 -1.5"></path></svg>

package/dist/icon/file-type-docx.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-docx"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M2 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1"></path><path d="M17 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0"></path><path d="M9.5 15a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1 -3 0v-3a1.5 1.5 0 0 1 1.5 -1.5"></path><path d="M19.5 15l3 6"></path><path d="M19.5 21l3 -6"></path></svg>

package/dist/icon/file-type-jpg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-jpg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M11 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"></path><path d="M20 15h-1a2 2 0 0 0 -2 2v2a2 2 0 0 0 2 2h1v-3"></path><path d="M5 15h3v4.5a1.5 1.5 0 0 1 -3 0"></path></svg>

package/dist/icon/file-type-pdf.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-pdf"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"></path><path d="M17 18h2"></path><path d="M20 15h-3v6"></path><path d="M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1"></path></svg>

package/dist/icon/file-type-png.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-png"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M20 15h-1a2 2 0 0 0 -2 2v2a2 2 0 0 0 2 2h1v-3"></path><path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"></path><path d="M11 21v-6l3 6v-6"></path></svg>

package/dist/icon/file-type-ppt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-ppt"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"></path><path d="M11 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"></path><path d="M16.5 15h3"></path><path d="M18 15v6"></path></svg>

package/dist/icon/file-type-svg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M4 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"></path><path d="M10 15l2 6l2 -6"></path><path d="M20 15h-1a2 2 0 0 0 -2 2v2a2 2 0 0 0 2 2h1v-3"></path></svg>

package/dist/icon/file-type-txt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-txt"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M16.5 15h3"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M4.5 15h3"></path><path d="M6 15v6"></path><path d="M18 15v6"></path><path d="M10 15l4 6"></path><path d="M10 21l4 -6"></path></svg>

package/dist/icon/file-type-xls.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-xls"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M4 15l4 6"></path><path d="M4 21l4 -6"></path><path d="M17 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"></path><path d="M11 15v6h3"></path></svg>

package/dist/icon/file-type-zip.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-file-type-zip"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M16 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"></path><path d="M12 15v6"></path><path d="M5 15h3l-3 6h3"></path></svg>