sv5ui-plus 5.0.4 → 5.0.6

package/dist/components/Chat/index.js

@@ -1,6 +1,6 @@
-import ChatBubble from './ChatBubble.svelte';
-import ChatMessage from './ChatMessage.svelte';
-import ChatInput from './ChatInput.svelte';
+import ChatBubble from "./ChatBubble.svelte";
+import ChatMessage from "./ChatMessage.svelte";
+import ChatInput from "./ChatInput.svelte";
 export { ChatBubble, ChatMessage, ChatInput };
-export * from './chat.types.js';
-export * from './chat.variants.js';
+export * from "./chat.types.js";
+export * from "./chat.variants.js";

package/dist/components/CodeBlock/CodeBlock.svelte

@@ -45,22 +45,22 @@ async function handleCopy() {
 </script>
 
 <div class={classes.root}>
-    <div class={classes.header}>
-        <p class={classes.title}>{title}</p>
-        <button type="button" class={classes.button} disabled={!canCopy} onclick={handleCopy}>
-            {copyLabel}
-        </button>
-    </div>
+	<div class={classes.header}>
+		<p class={classes.title}>{title}</p>
+		<button type="button" class={classes.button} disabled={!canCopy} onclick={handleCopy}>
+			{copyLabel}
+		</button>
+	</div>
 
-    <div class={classes.body}>
-        {#if html}
-            {@html html}
-        {:else if children}
-            {@render children()}
-        {:else}
-            <pre class="shiki">
+	<div class={classes.body}>
+		{#if html}
+			{@html html}
+		{:else if children}
+			{@render children()}
+		{:else}
+			<pre class="shiki">
                 <code>{code}</code>
             </pre>
-        {/if}
-    </div>
+		{/if}
+	</div>
 </div>

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

@@ -1,4 +1,4 @@
-import type { CodeBlockProps } from './code-block.types.js';
+import type { CodeBlockProps } from "./code-block.types.js";
 export type Props = CodeBlockProps;
 declare const CodeBlock: import("svelte").Component<CodeBlockProps, {}, "">;
 type CodeBlock = ReturnType<typeof CodeBlock>;

package/dist/components/CodeBlock/code-block.types.d.ts

@@ -1,14 +1,14 @@
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-import type { CodeBlockVariantProps, CodeBlockSlots } from './code-block.variants.js';
+import type { Snippet } from "svelte";
+import type { ClassNameValue } from "tailwind-merge";
+import type { CodeBlockVariantProps, CodeBlockSlots } from "./code-block.variants.js";
 export type CodeBlockProps = {
     title?: string;
     code?: string;
     copyText?: string;
     copyable?: boolean;
     html?: string;
-    variant?: NonNullable<CodeBlockVariantProps['variant']>;
-    size?: NonNullable<CodeBlockVariantProps['size']>;
+    variant?: NonNullable<CodeBlockVariantProps["variant"]>;
+    size?: NonNullable<CodeBlockVariantProps["size"]>;
     class?: ClassNameValue;
     ui?: Partial<Record<CodeBlockSlots, ClassNameValue>>;
     children?: Snippet;

package/dist/components/CodeBlock/code-block.variants.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from "tailwind-variants";
 export declare const codeBlockVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         outline: {

package/dist/components/CodeBlock/code-block.variants.js

@@ -1,69 +1,69 @@
-import { tv } from 'tailwind-variants';
+import { tv } from "tailwind-variants";
 export const codeBlockVariants = tv({
     slots: {
-        root: 'mt-4 overflow-hidden rounded-2xl border border-outline-variant bg-surface-container',
-        header: 'flex items-center justify-between border-b border-outline-variant',
-        title: 'text-sm font-medium text-on-surface-variant',
-        button: 'rounded-md border border-outline-variant text-xs font-medium text-on-surface-variant transition-colors hover:bg-surface-container-highest disabled:cursor-not-allowed disabled:opacity-50',
-        body: 'bg-surface-container-highest [&_.shiki]:rounded-none [&_.shiki]:overflow-x-auto [&_.shiki]:m-0'
+        root: "mt-4 overflow-hidden rounded-2xl border border-outline-variant bg-surface-container",
+        header: "flex items-center justify-between border-b border-outline-variant",
+        title: "text-sm font-medium text-on-surface-variant",
+        button: "rounded-md border border-outline-variant text-xs font-medium text-on-surface-variant transition-colors hover:bg-surface-container-highest disabled:cursor-not-allowed disabled:opacity-50",
+        body: "bg-surface-container-highest [&_.shiki]:rounded-none [&_.shiki]:overflow-x-auto [&_.shiki]:m-0",
     },
     variants: {
         variant: {
             outline: {
-                root: 'border border-outline-variant bg-surface-container',
-                header: 'border-outline-variant',
-                button: 'border-outline-variant'
+                root: "border border-outline-variant bg-surface-container",
+                header: "border-outline-variant",
+                button: "border-outline-variant",
             },
             soft: {
-                root: 'border border-outline-variant/60 bg-surface-container/40',
-                header: 'border-outline-variant/60',
-                button: 'border-outline-variant/60'
+                root: "border border-outline-variant/60 bg-surface-container/40",
+                header: "border-outline-variant/60",
+                button: "border-outline-variant/60",
             },
             subtle: {
-                root: 'border border-outline-variant/40 bg-surface-container/20',
-                header: 'border-outline-variant/40',
-                button: 'border-outline-variant/40'
+                root: "border border-outline-variant/40 bg-surface-container/20",
+                header: "border-outline-variant/40",
+                button: "border-outline-variant/40",
             },
             solid: {
-                root: 'border border-outline-variant/60 bg-surface-container-high',
-                header: 'border-outline-variant/60',
-                button: 'border-outline-variant/60'
+                root: "border border-outline-variant/60 bg-surface-container-high",
+                header: "border-outline-variant/60",
+                button: "border-outline-variant/60",
             },
             ghost: {
-                root: 'border border-transparent bg-transparent',
-                header: 'border-outline-variant/30',
-                button: 'border-outline-variant/30'
+                root: "border border-transparent bg-transparent",
+                header: "border-outline-variant/30",
+                button: "border-outline-variant/30",
             },
             none: {
-                root: 'border-0 bg-transparent rounded-none',
-                header: 'border-0 px-0',
-                button: 'border-outline-variant/40'
-            }
+                root: "border-0 bg-transparent rounded-none",
+                header: "border-0 px-0",
+                button: "border-outline-variant/40",
+            },
         },
         size: {
             sm: {
-                header: 'px-3 py-2',
-                button: 'px-2 py-1',
-                body: '[&_.shiki]:p-3 [&_.shiki]:text-xs [&_.shiki]:leading-5'
+                header: "px-3 py-2",
+                button: "px-2 py-1",
+                body: "[&_.shiki]:p-3 [&_.shiki]:text-xs [&_.shiki]:leading-5",
             },
             md: {
-                header: 'px-4 py-3',
-                button: 'px-2.5 py-1',
-                body: '[&_.shiki]:p-4 [&_.shiki]:text-sm [&_.shiki]:leading-6'
+                header: "px-4 py-3",
+                button: "px-2.5 py-1",
+                body: "[&_.shiki]:p-4 [&_.shiki]:text-sm [&_.shiki]:leading-6",
             },
             lg: {
-                header: 'px-5 py-4',
-                button: 'px-3 py-1.5',
-                body: '[&_.shiki]:p-5 [&_.shiki]:text-sm [&_.shiki]:leading-6'
-            }
-        }
+                header: "px-5 py-4",
+                button: "px-3 py-1.5",
+                body: "[&_.shiki]:p-5 [&_.shiki]:text-sm [&_.shiki]:leading-6",
+            },
+        },
     },
     defaultVariants: {
-        variant: 'outline',
-        size: 'md'
-    }
+        variant: "outline",
+        size: "md",
+    },
 });
 export const codeBlockDefaults = {
     defaultVariants: codeBlockVariants.defaultVariants,
-    slots: {}
+    slots: {},
 };

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

@@ -1,2 +1,2 @@
-export { default as CodeBlock } from './CodeBlock.svelte';
-export type { CodeBlockProps } from './code-block.types.js';
+export { default as CodeBlock } from "./CodeBlock.svelte";
+export type { CodeBlockProps } from "./code-block.types.js";

package/dist/components/CodeBlock/index.js

@@ -1 +1 @@
-export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as CodeBlock } from "./CodeBlock.svelte";

package/dist/components/ConfirmDialog/ConfirmDialog.svelte

@@ -76,107 +76,103 @@ const contentProps = $derived.by(() => {
 </script>
 
 <Dialog.Root bind:open onOpenChange={handleOpenChange}>
-    <Dialog.Portal>
-        <Dialog.Overlay
-            class="fixed inset-0 z-50 bg-(--scrim-bg,rgba(0,0,0,0.3)) backdrop-blur-sm"
-        />
-        {#if pending}
-            <Dialog.Content
-                {...contentProps}
-                class="fixed top-1/2 left-1/2 z-50 w-[min(24rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-outline-variant bg-surface p-6 text-center text-on-surface shadow-2xl focus:outline-none"
-            >
-                {#if pending.options.title}
-                    <Dialog.Title class="sr-only">{pending.options.title}</Dialog.Title>
-                {/if}
-                {#if pending.options.message}
-                    <Dialog.Description class="sr-only"
-                        >{pending.options.message}</Dialog.Description
-                    >
-                {/if}
+	<Dialog.Portal>
+		<Dialog.Overlay class="fixed inset-0 z-50 bg-(--scrim-bg,rgba(0,0,0,0.3)) backdrop-blur-sm" />
+		{#if pending}
+			<Dialog.Content
+				{...contentProps}
+				class="fixed top-1/2 left-1/2 z-50 w-[min(24rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-outline-variant bg-surface p-6 text-center text-on-surface shadow-2xl focus:outline-none"
+			>
+				{#if pending.options.title}
+					<Dialog.Title class="sr-only">{pending.options.title}</Dialog.Title>
+				{/if}
+				{#if pending.options.message}
+					<Dialog.Description class="sr-only">{pending.options.message}</Dialog.Description>
+				{/if}
 
-                {#if pending.options.icon}
-                    {#key pending.options.icon}
-                        <div class="mb-4 flex min-h-20 justify-center">
-                            <Icon
-                                name={iconNames[pending.options.icon]}
-                                size={80}
-                                class={iconColors[pending.options.icon]}
-                            />
-                        </div>
-                    {/key}
-                {/if}
+				{#if pending.options.icon}
+					{#key pending.options.icon}
+						<div class="mb-4 flex min-h-20 justify-center">
+							<Icon
+								name={iconNames[pending.options.icon]}
+								size={80}
+								class={iconColors[pending.options.icon]}
+							/>
+						</div>
+					{/key}
+				{/if}
 
-                {#if pending.options.title}
-                    <h3 class="mb-2 text-lg font-semibold text-on-surface">
-                        {pending.options.title}
-                    </h3>
-                {/if}
+				{#if pending.options.title}
+					<h3 class="mb-2 text-lg font-semibold text-on-surface">
+						{pending.options.title}
+					</h3>
+				{/if}
 
-                {#if pending.options.message}
-                    <p class="mb-6 text-sm text-on-surface-variant">
-                        {pending.options.message}
-                    </p>
-                {:else if !pending.options.inputPlaceholder}
-                    <div class="mb-6"></div>
-                {/if}
+				{#if pending.options.message}
+					<p class="mb-6 text-sm text-on-surface-variant">
+						{pending.options.message}
+					</p>
+				{:else if !pending.options.inputPlaceholder}
+					<div class="mb-6"></div>
+				{/if}
 
-                {#if pending.options.inputPlaceholder}
-                    {#if pending.options.inputChoices && pending.options.inputChoices.length > 0}
-                        <div class="mb-3 flex flex-wrap justify-center gap-1">
-                            {#each pending.options.inputChoices as choice (choice)}
-                                <Button
-                                    label={choice}
-                                    size="xs"
-                                    variant={currentInputValue === choice ? 'solid' : 'outline'}
-                                    color={currentInputValue === choice ? 'primary' : 'surface'}
-                                    onclick={() => (currentInputValue = choice)}
-                                />
-                            {/each}
-                        </div>
-                    {/if}
+				{#if pending.options.inputPlaceholder}
+					{#if pending.options.inputChoices && pending.options.inputChoices.length > 0}
+						<div class="mb-3 flex flex-wrap justify-center gap-1">
+							{#each pending.options.inputChoices as choice (choice)}
+								<Button
+									label={choice}
+									size="xs"
+									variant={currentInputValue === choice ? "solid" : "outline"}
+									color={currentInputValue === choice ? "primary" : "surface"}
+									onclick={() => (currentInputValue = choice)}
+								/>
+							{/each}
+						</div>
+					{/if}
 
-                    <div class="mb-6 text-left">
-                        {#if pending.options.inputType === 'textarea'}
-                            <Textarea
-                                bind:value={currentInputValue}
-                                placeholder={pending.options.inputPlaceholder}
-                                class="w-full"
-                            />
-                        {:else}
-                            <Input
-                                type={pending.options.inputType ?? 'text'}
-                                bind:value={currentInputValue}
-                                placeholder={pending.options.inputPlaceholder}
-                                class="w-full"
-                                onkeydown={(e) => {
-                                    if (e.key === 'Enter') {
-                                        e.preventDefault()
-                                        handleConfirm()
-                                    }
-                                }}
-                            />
-                        {/if}
-                    </div>
-                {/if}
+					<div class="mb-6 text-left">
+						{#if pending.options.inputType === "textarea"}
+							<Textarea
+								bind:value={currentInputValue}
+								placeholder={pending.options.inputPlaceholder}
+								class="w-full"
+							/>
+						{:else}
+							<Input
+								type={pending.options.inputType ?? "text"}
+								bind:value={currentInputValue}
+								placeholder={pending.options.inputPlaceholder}
+								class="w-full"
+								onkeydown={(e) => {
+									if (e.key === "Enter") {
+										e.preventDefault();
+										handleConfirm();
+									}
+								}}
+							/>
+						{/if}
+					</div>
+				{/if}
 
-                <div class="flex justify-center gap-2">
-                    {#if showCancel}
-                        <Button
-                            label={pending.options.cancelText ?? defaultCancelText}
-                            variant="outline"
-                            class="flex-1"
-                            onclick={handleCancel}
-                        />
-                    {/if}
-                    <Button
-                        label={pending.options.confirmText ?? defaultConfirmText}
-                        variant="solid"
-                        color={pending.options.confirmColor ?? 'primary'}
-                        class={showCancel ? 'flex-1' : 'w-full'}
-                        onclick={handleConfirm}
-                    />
-                </div>
-            </Dialog.Content>
-        {/if}
-    </Dialog.Portal>
+				<div class="flex justify-center gap-2">
+					{#if showCancel}
+						<Button
+							label={pending.options.cancelText ?? defaultCancelText}
+							variant="outline"
+							class="flex-1"
+							onclick={handleCancel}
+						/>
+					{/if}
+					<Button
+						label={pending.options.confirmText ?? defaultConfirmText}
+						variant="solid"
+						color={pending.options.confirmColor ?? "primary"}
+						class={showCancel ? "flex-1" : "w-full"}
+						onclick={handleConfirm}
+					/>
+				</div>
+			</Dialog.Content>
+		{/if}
+	</Dialog.Portal>
 </Dialog.Root>

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

@@ -2,7 +2,7 @@ export type Props = {
     confirmText?: string;
     cancelText?: string;
 };
-import type { ConfirmOptions } from './confirm.types.js';
+import type { ConfirmOptions } from "./confirm.types.js";
 declare const ConfirmDialog: import("svelte").Component<Props, {
     show: (options?: ConfirmOptions) => Promise<boolean>;
 }, "">;

package/dist/components/ConfirmDialog/confirm.d.ts

@@ -1,4 +1,4 @@
-import type { ConfirmOptions } from './confirm.types.js';
+import type { ConfirmOptions } from "./confirm.types.js";
 type ShowFn = (options?: ConfirmOptions) => Promise<boolean>;
 export declare function registerConfirmDialog(fn: ShowFn | null): void;
 export declare const confirmDialog: {

package/dist/components/ConfirmDialog/confirm.js

@@ -5,20 +5,20 @@ export function registerConfirmDialog(fn) {
 export const confirmDialog = {
     show(options = {}) {
         if (!showFn) {
-            console.warn('[confirmDialog] ConfirmDialog is not registered — add <ConfirmDialog /> to your root layout.');
+            console.warn("[confirmDialog] ConfirmDialog is not registered — add <ConfirmDialog /> to your root layout.");
             return Promise.resolve(false);
         }
         return showFn(options);
     },
     delete(options = {}) {
         return this.show({
-            title: 'Delete this item?',
-            message: 'This action is permanent and cannot be undone.',
-            confirmText: 'Delete',
-            cancelText: 'Cancel',
-            icon: 'warning',
-            confirmColor: 'error',
-            ...options
+            title: "Delete this item?",
+            message: "This action is permanent and cannot be undone.",
+            confirmText: "Delete",
+            cancelText: "Cancel",
+            icon: "warning",
+            confirmColor: "error",
+            ...options,
         });
-    }
+    },
 };

package/dist/components/ConfirmDialog/confirm.types.d.ts

@@ -1,6 +1,6 @@
-import type { ButtonProps } from 'sv5ui';
-export type ConfirmIcon = 'warning' | 'error' | 'question' | 'info' | 'success';
-export type ConfirmColor = NonNullable<ButtonProps['color']>;
+import type { ButtonProps } from "sv5ui";
+export type ConfirmIcon = "warning" | "error" | "question" | "info" | "success";
+export type ConfirmColor = NonNullable<ButtonProps["color"]>;
 export interface ConfirmOptions {
     title?: string;
     message?: string;
@@ -14,7 +14,7 @@ export interface ConfirmOptions {
     dismissible?: boolean;
     inputPlaceholder?: string;
     inputValue?: string;
-    inputType?: 'text' | 'password' | 'email' | 'number' | 'textarea';
+    inputType?: "text" | "password" | "email" | "number" | "textarea";
     inputChoices?: string[];
     onConfirm?: (value?: string) => void;
     onCancel?: () => void;

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

@@ -1,4 +1,4 @@
-export { default as ConfirmDialog } from './ConfirmDialog.svelte';
-export { confirmDialog, registerConfirmDialog } from './confirm.js';
-export type { ConfirmOptions, ConfirmIcon, ConfirmColor } from './confirm.types.js';
-export type { ConfirmDialogUtility } from './confirm.js';
+export { default as ConfirmDialog } from "./ConfirmDialog.svelte";
+export { confirmDialog, registerConfirmDialog } from "./confirm.js";
+export type { ConfirmOptions, ConfirmIcon, ConfirmColor } from "./confirm.types.js";
+export type { ConfirmDialogUtility } from "./confirm.js";

package/dist/components/ConfirmDialog/index.js

@@ -1,2 +1,2 @@
-export { default as ConfirmDialog } from './ConfirmDialog.svelte';
-export { confirmDialog, registerConfirmDialog } from './confirm.js';
+export { default as ConfirmDialog } from "./ConfirmDialog.svelte";
+export { confirmDialog, registerConfirmDialog } from "./confirm.js";

package/dist/components/DatePickerField/DatePickerField.svelte

@@ -27,15 +27,15 @@ function handleValueChange(next) {
 </script>
 
 <DatePicker
-    value={pickerValue}
-    onValueChange={handleValueChange}
-    {name}
-    {granularity}
-    {hourCycle}
-    {locale}
-    {weekStartsOn}
-    {required}
-    {disabled}
-    {readonly}
-    class={className}
+	value={pickerValue}
+	onValueChange={handleValueChange}
+	{name}
+	{granularity}
+	{hourCycle}
+	{locale}
+	{weekStartsOn}
+	{required}
+	{disabled}
+	{readonly}
+	class={className}
 />

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

@@ -1,5 +1,5 @@
-export type { DatePickerFieldProps as Props } from './date-picker-field.types.js';
-import type { DatePickerFieldProps } from './date-picker-field.types.js';
+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

@@ -1,4 +1,4 @@
-export type DateFieldGranularity = 'day' | 'hour' | 'minute' | 'second';
+export type DateFieldGranularity = "day" | "hour" | "minute" | "second";
 export type DatePickerFieldProps = {
     value?: string;
     name?: string;

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

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

package/dist/components/DatePickerField/index.js

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

package/dist/components/DateRangePickerField/DateRangePickerField.svelte

@@ -56,32 +56,32 @@ function handleClear() {
 </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}
+	<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

@@ -1,5 +1,5 @@
-export type { DateRangePickerFieldProps as Props } from './date-range-picker-field.types.js';
-import type { DateRangePickerFieldProps } from './date-range-picker-field.types.js';
+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

@@ -1,4 +1,4 @@
-import type { DateFieldGranularity } from '../DatePickerField/date-picker-field.types.js';
+import type { DateFieldGranularity } from "../DatePickerField/date-picker-field.types.js";
 export type DateRangePickerFieldProps = {
     start?: string;
     end?: string;