sv5ui-plus 5.0.0 → 5.0.2

package/README.md

@@ -37,7 +37,8 @@ New code should use the explicit `sv5ui` and `sv5ui-plus` imports.
 
 - Content and display: `BentoGrid`, `Chart`, `Chat`, `CodeBlock`, `Fonts`, `List`, `Marquee`, `NumberTicker`, `Prose`, `Spotlight`
 - Forms and overlays: `ColorPicker`, `ConfirmDialog`, `LocaleButton`, `PasswordInput`, `Search`
-- Layout and data: `Resizable`, `ScrollArea`, `TableBulkActionBar`, `TreeView`
+- Layout and data: `Resizable`, `ScrollArea`, `SafeTable`, `TableBulkActionBar`, `TreeView`
+- Forms: `FormSelect`, `DatePickerField`, `DateRangePickerField`, `PasswordInput`
 - Drag and drop: `SortableGroup`, `SortableList`, `useDragDrop`, `useSortable`
 - SvelteKit adapter: `SvelteKitNavigationMenu`
 - Feedback adapter: `notify`

package/dist/components/DatePickerField/DatePickerField.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { parseDate, parseDateTime } from "@internationalized/date";
+import { DatePicker } from "sv5ui";
+let { value = $bindable(""), name, granularity = "day", required = false, disabled = false, readonly = false, class: className, locale = "th-TH", weekStartsOn = 1, hourCycle = 24, onValueChange } = $props();
+const hasTime = $derived(granularity !== "day");
+const pickerValue = $derived(toDateValue(value, hasTime));
+function toDateValue(raw, withTime) {
+	const normalized = raw.trim();
+	if (!normalized) return undefined;
+	try {
+		return withTime ? parseDateTime(normalized.slice(0, 19)) : parseDate(normalized.slice(0, 10));
+	} catch {
+		return undefined;
+	}
+}
+function toFormValue(next) {
+	if (!next) return "";
+	const date = next.toString();
+	return hasTime ? date.slice(0, granularity === "second" ? 19 : 16) : date.slice(0, 10);
+}
+function handleValueChange(next) {
+	value = toFormValue(next);
+	onValueChange?.(value);
+}
+</script>
+
+<DatePicker
+    value={pickerValue}
+    onValueChange={handleValueChange}
+    {name}
+    {granularity}
+    {hourCycle}
+    {locale}
+    {weekStartsOn}
+    {required}
+    {disabled}
+    {readonly}
+    class={className}
+/>

package/dist/components/DatePickerField/DatePickerField.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { DatePickerFieldProps as Props } from './date-picker-field.types.js';
+import type { DatePickerFieldProps } from './date-picker-field.types.js';
+declare const DatePickerField: import("svelte").Component<DatePickerFieldProps, {}, "value">;
+type DatePickerField = ReturnType<typeof DatePickerField>;
+export default DatePickerField;

package/dist/components/DatePickerField/date-picker-field.types.d.ts

@@ -0,0 +1,17 @@
+export type DateFieldGranularity = 'day' | 'hour' | 'minute' | 'second';
+export type DatePickerFieldProps = {
+    value?: string;
+    name?: string;
+    granularity?: DateFieldGranularity;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string;
+    /** @default 'th-TH' */
+    locale?: string;
+    /** @default 1 (Monday) */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** @default 24 */
+    hourCycle?: 12 | 24;
+    onValueChange?: (value: string) => void;
+};

package/dist/components/DatePickerField/date-picker-field.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/DatePickerField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DatePickerField } from './DatePickerField.svelte';
+export type { DateFieldGranularity, DatePickerFieldProps } from './date-picker-field.types.js';

package/dist/components/DatePickerField/index.js

@@ -0,0 +1 @@
+export { default as DatePickerField } from './DatePickerField.svelte';

package/dist/components/DateRangePickerField/DateRangePickerField.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { parseDate, parseDateTime } from "@internationalized/date";
+import { Button, DateRangePicker } from "sv5ui";
+let { start = $bindable(""), end = $bindable(""), startName, endName, granularity = "day", required = false, disabled = false, readonly = false, clearable = true, timeInput, class: className, locale = "th-TH", weekStartsOn = 1, hourCycle = 24, clearLabel = "Clear dates" } = $props();
+const hasTime = $derived(granularity !== "day");
+const showTimeInput = $derived(timeInput ?? hasTime);
+function toDateValue(raw, withTime) {
+	const normalized = raw.trim();
+	if (!normalized) return undefined;
+	try {
+		return withTime ? parseDateTime(normalized.slice(0, 19)) : parseDate(normalized.slice(0, 10));
+	} catch {
+		return undefined;
+	}
+}
+function toFormValue(next) {
+	if (!next) return "";
+	const date = next.toString();
+	return hasTime ? date.slice(0, granularity === "second" ? 19 : 16) : date.slice(0, 10);
+}
+let pickerValue = $state(undefined);
+$effect(() => {
+	const s = toDateValue(start, hasTime);
+	const e = toDateValue(end, hasTime);
+	const curStart = pickerValue?.start?.toString();
+	const curEnd = pickerValue?.end?.toString();
+	const nextStart = s?.toString();
+	const nextEnd = e?.toString();
+	if (curStart !== nextStart || curEnd !== nextEnd) {
+		pickerValue = s || e ? {
+			start: s,
+			end: e
+		} : undefined;
+	}
+});
+function handleValueChange(next) {
+	pickerValue = next;
+	start = toFormValue(next?.start);
+	end = toFormValue(next?.end);
+}
+function handleStartValueChange(next) {
+	if (!next) return;
+	start = toFormValue(next);
+}
+function handleEndValueChange(next) {
+	if (!next) return;
+	end = toFormValue(next);
+}
+function handleClear() {
+	pickerValue = undefined;
+	start = "";
+	end = "";
+}
+</script>
+
+<div class="flex items-center gap-2">
+    <DateRangePicker
+        bind:value={pickerValue}
+        onValueChange={handleValueChange}
+        onStartValueChange={handleStartValueChange}
+        onEndValueChange={handleEndValueChange}
+        {granularity}
+        timeInput={showTimeInput}
+        {hourCycle}
+        {locale}
+        {weekStartsOn}
+        {required}
+        {disabled}
+        {readonly}
+        class={className}
+    />
+    {#if clearable && (start || end) && !disabled && !readonly}
+        <Button
+            type="button"
+            variant="ghost"
+            color="secondary"
+            size="sm"
+            icon="lucide:x"
+            onclick={handleClear}
+            aria-label={clearLabel}
+        />
+    {/if}
+</div>
+<input type="hidden" name={startName} value={start} />
+<input type="hidden" name={endName} value={end} />

package/dist/components/DateRangePickerField/DateRangePickerField.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { DateRangePickerFieldProps as Props } from './date-range-picker-field.types.js';
+import type { DateRangePickerFieldProps } from './date-range-picker-field.types.js';
+declare const DateRangePickerField: import("svelte").Component<DateRangePickerFieldProps, {}, "start" | "end">;
+type DateRangePickerField = ReturnType<typeof DateRangePickerField>;
+export default DateRangePickerField;

package/dist/components/DateRangePickerField/date-range-picker-field.types.d.ts

@@ -0,0 +1,22 @@
+import type { DateFieldGranularity } from '../DatePickerField/date-picker-field.types.js';
+export type DateRangePickerFieldProps = {
+    start?: string;
+    end?: string;
+    startName: string;
+    endName: string;
+    granularity?: DateFieldGranularity;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    timeInput?: boolean;
+    class?: string;
+    /** @default 'th-TH' */
+    locale?: string;
+    /** @default 1 (Monday) */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** @default 24 */
+    hourCycle?: 12 | 24;
+    /** Accessible label for the clear button. @default 'Clear dates' */
+    clearLabel?: string;
+};

package/dist/components/DateRangePickerField/date-range-picker-field.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/DateRangePickerField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRangePickerField } from './DateRangePickerField.svelte';
+export type { DateRangePickerFieldProps } from './date-range-picker-field.types.js';

package/dist/components/DateRangePickerField/index.js

@@ -0,0 +1 @@
+export { default as DateRangePickerField } from './DateRangePickerField.svelte';

package/dist/components/FormSelect/FormSelect.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { Select } from "sv5ui";
+let { name, value = $bindable(), disabled = false, ...selectProps } = $props();
+</script>
+
+<Select {...selectProps} bind:value {disabled} />
+
+{#if Array.isArray(value)}
+    {#each value as item (item)}
+        <input type="hidden" {name} value={item} {disabled} />
+    {/each}
+{:else}
+    <input type="hidden" {name} value={value ?? ''} {disabled} />
+{/if}

package/dist/components/FormSelect/FormSelect.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { FormSelectProps as Props } from './form-select.types.js';
+import type { FormSelectProps } from './form-select.types.js';
+declare const FormSelect: import("svelte").Component<FormSelectProps, {}, "value">;
+type FormSelect = ReturnType<typeof FormSelect>;
+export default FormSelect;

package/dist/components/FormSelect/form-select.types.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'svelte';
+import type { Select } from 'sv5ui';
+export type FormSelectProps = Omit<ComponentProps<typeof Select>, 'name'> & {
+    /** Native form field name (written to hidden inputs). */
+    name: string;
+};

package/dist/components/FormSelect/form-select.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/FormSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FormSelect } from './FormSelect.svelte';
+export type { FormSelectProps } from './form-select.types.js';

package/dist/components/FormSelect/index.js

@@ -0,0 +1 @@
+export { default as FormSelect } from './FormSelect.svelte';

package/dist/components/SafeTable/SafeTable.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>export {};
+</script>
+
+<!--
+  Thin wrapper around sv5ui Table.
+  Owns $state for bindable arrays so Table never falls back to $bindable([])
+  which can surface Symbol(UNINITIALIZED) under Svelte experimental.async / fork.
+-->
+<script lang="ts" generics="T extends Record<string, any>">import { Table } from "sv5ui";
+let localSorting = $state([]);
+let localSelectedRows = $state([]);
+let localPinnedRows = $state([]);
+let localExpandedRows = $state([]);
+let localColumnFilters = $state({});
+let localColumnSizing = $state({});
+let localGlobalFilter = $state("");
+let localPage = $state(0);
+let localRef = $state(null);
+let localColumnVisibility = $state(undefined);
+let localColumnPinning = $state(undefined);
+let { ref = $bindable(localRef), sorting = $bindable(localSorting), selectedRows = $bindable(localSelectedRows), pinnedRows = $bindable(localPinnedRows), expandedRows = $bindable(localExpandedRows), columnFilters = $bindable(localColumnFilters), columnSizing = $bindable(localColumnSizing), globalFilter = $bindable(localGlobalFilter), page = $bindable(localPage), columnVisibility = $bindable(localColumnVisibility), columnPinning = $bindable(localColumnPinning), ...rest } = $props();
+</script>
+
+<Table
+    bind:ref
+    bind:sorting={
+        () => (Array.isArray(sorting) ? sorting : localSorting),
+        (value) => {
+            const next = Array.isArray(value) ? value : []
+            sorting = next
+        }
+    }
+    bind:selectedRows={
+        () => (Array.isArray(selectedRows) ? selectedRows : localSelectedRows),
+        (value) => {
+            const next = (Array.isArray(value) ? value : []) as T[]
+            selectedRows = next
+        }
+    }
+    bind:pinnedRows={
+        () => (Array.isArray(pinnedRows) ? pinnedRows : localPinnedRows),
+        (value) => {
+            const next = Array.isArray(value) ? value : []
+            pinnedRows = next
+        }
+    }
+    bind:expandedRows={
+        () => (Array.isArray(expandedRows) ? expandedRows : localExpandedRows),
+        (value) => {
+            const next = Array.isArray(value) ? value : []
+            expandedRows = next
+        }
+    }
+    bind:columnFilters={
+        () =>
+            columnFilters && typeof columnFilters === 'object' && !Array.isArray(columnFilters)
+                ? columnFilters
+                : localColumnFilters,
+        (value) => {
+            const next =
+                value && typeof value === 'object' && !Array.isArray(value)
+                    ? value
+                    : ({} as Record<string, string>)
+            columnFilters = next
+        }
+    }
+    bind:columnSizing={
+        () =>
+            columnSizing && typeof columnSizing === 'object' && !Array.isArray(columnSizing)
+                ? columnSizing
+                : localColumnSizing,
+        (value) => {
+            const next =
+                value && typeof value === 'object' && !Array.isArray(value)
+                    ? value
+                    : ({} as Record<string, number>)
+            columnSizing = next
+        }
+    }
+    bind:globalFilter
+    bind:page
+    bind:columnVisibility
+    bind:columnPinning
+    {...rest}
+/>

package/dist/components/SafeTable/SafeTable.svelte.d.ts

@@ -0,0 +1,26 @@
+export type { SafeTableProps as Props } from './safe-table.types.js';
+import type { SafeTableProps } from './safe-table.types.js';
+declare function $$render<T extends Record<string, any>>(): {
+    props: SafeTableProps<T>;
+    exports: {};
+    bindings: "page" | "ref" | "sorting" | "selectedRows" | "pinnedRows" | "expandedRows" | "columnFilters" | "columnSizing" | "globalFilter" | "columnVisibility" | "columnPinning";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, any>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "page" | "ref" | "sorting" | "selectedRows" | "pinnedRows" | "expandedRows" | "columnFilters" | "columnSizing" | "globalFilter" | "columnVisibility" | "columnPinning";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SafeTable: $$IsomorphicComponent;
+type SafeTable<T extends Record<string, any>> = InstanceType<typeof SafeTable<T>>;
+export default SafeTable;

package/dist/components/SafeTable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SafeTable } from './SafeTable.svelte';
+export type { SafeTableProps } from './safe-table.types.js';

package/dist/components/SafeTable/index.js

@@ -0,0 +1 @@
+export { default as SafeTable } from './SafeTable.svelte';

package/dist/components/SafeTable/safe-table.types.d.ts

@@ -0,0 +1,3 @@
+import type { TableProps } from 'sv5ui';
+/** Same surface as `sv5ui` Table — wrapper only hardens bindable array defaults. */
+export type SafeTableProps<T extends Record<string, any> = Record<string, any>> = TableProps<T>;

package/dist/components/SafeTable/safe-table.types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -4,7 +4,10 @@ export * from './components/Chat/index.js';
 export * from './components/CodeBlock/index.js';
 export * from './components/ColorPicker/index.js';
 export * from './components/ConfirmDialog/index.js';
+export * from './components/DatePickerField/index.js';
+export * from './components/DateRangePickerField/index.js';
 export * from './components/Fonts/index.js';
+export * from './components/FormSelect/index.js';
 export * from './components/List/index.js';
 export * from './components/LocaleButton/index.js';
 export * from './components/Marquee/index.js';
@@ -18,6 +21,7 @@ export * from './components/Search/index.js';
 export * from './components/SortableGroup/index.js';
 export * from './components/SortableList/index.js';
 export * from './components/Spotlight/index.js';
+export * from './components/SafeTable/index.js';
 export * from './components/TableBulkActionBar/index.js';
 export * from './components/TreeView/index.js';
 export * from './hooks/useSortable/index.js';

package/dist/index.js

@@ -5,7 +5,10 @@ export * from './components/Chat/index.js';
 export * from './components/CodeBlock/index.js';
 export * from './components/ColorPicker/index.js';
 export * from './components/ConfirmDialog/index.js';
+export * from './components/DatePickerField/index.js';
+export * from './components/DateRangePickerField/index.js';
 export * from './components/Fonts/index.js';
+export * from './components/FormSelect/index.js';
 export * from './components/List/index.js';
 export * from './components/LocaleButton/index.js';
 export * from './components/Marquee/index.js';
@@ -19,6 +22,7 @@ export * from './components/Search/index.js';
 export * from './components/SortableGroup/index.js';
 export * from './components/SortableList/index.js';
 export * from './components/Spotlight/index.js';
+export * from './components/SafeTable/index.js';
 export * from './components/TableBulkActionBar/index.js';
 export * from './components/TreeView/index.js';
 // SV5UI Plus-exclusive hooks

package/dist/mcp/sv5ui-plus-docs.data.json

@@ -1,8 +1,8 @@
 {
   "version": 1,
   "packageName": "sv5ui-plus",
-  "packageVersion": "5.0.0",
-  "generatedAt": "2026-08-09T08:52:11.840Z",
+  "packageVersion": "5.0.2",
+  "generatedAt": "2026-08-16T09:25:54.305Z",
   "slugs": {
     "components": [],
     "hooks": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui-plus",
-    "version": "5.0.0",
+    "version": "5.0.2",
     "description": "Community companion components and hooks for SV5UI and Svelte 5",
     "packageManager": "bun@1.3.14",
     "author": "asphum",
@@ -120,8 +120,8 @@
         }
     },
     "devDependencies": {
-        "@biomejs/biome": "2.5.7",
-        "@inlang/paraglide-js": "^2.23.2",
+        "@biomejs/biome": "2.5.8",
+        "@inlang/paraglide-js": "^2.24.1",
         "@sveltejs/adapter-vercel": "^6.3.4",
         "@sveltejs/kit": "^2.70.2",
         "@sveltejs/package": "^2.5.8",
@@ -132,8 +132,8 @@
         "playwright": "^1.62.1",
         "publint": "^0.3.23",
         "sv5ui": "^2.5.0",
-        "svelte": "^5.56.8",
-        "svelte-check": "^4.7.5",
+        "svelte": "^5.56.9",
+        "svelte-check": "^4.7.6",
         "tailwindcss": "^4.3.3",
         "typescript": "6.0.3",
         "vite": "^8.2.1",
@@ -161,10 +161,11 @@
         "@dnd-kit/dom": "^0.5.0",
         "@dnd-kit/helpers": "^0.5.0",
         "@dnd-kit/svelte": "^0.5.0",
+        "@internationalized/date": "^3.12.3",
         "@modelcontextprotocol/sdk": "^1.30.0",
-        "apexcharts": "^6.7.0",
+        "apexcharts": "^6.8.0",
         "bits-ui": "^2.18.1",
-        "shiki": "^4.4.2",
+        "shiki": "^4.4.3",
         "tailwind-merge": "^3.6.0",
         "tailwind-variants": "^3.3.1",
         "zod": "^4.4.3"