sv5ui-plus 4.0.0

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { Popover } from "sv5ui";
+import { Input } from "sv5ui";
+import { Icon } from "sv5ui";
+import { colorPickerVariants } from "./color-picker.variants.js";
+let { value = $bindable("#000000"), placeholder = "Select color", swatches = [
+	"#ef4444",
+	"#f97316",
+	"#f59e0b",
+	"#eab308",
+	"#84cc16",
+	"#22c55e",
+	"#10b981",
+	"#14b8a6",
+	"#06b6d4",
+	"#0ea5e9",
+	"#3b82f6",
+	"#6366f1",
+	"#8b5cf6",
+	"#a855f7",
+	"#d946ef",
+	"#ec4899",
+	"#f43f5e",
+	"#ffffff",
+	"#94a3b8",
+	"#000000"
+], disabled = false, class: className, ...restProps } = $props();
+const styles = $derived(colorPickerVariants());
+// Validate hex
+let hexInput = $state(value);
+$effect(() => {
+	hexInput = value;
+});
+function handleHexInput(e) {
+	const target = e.target;
+	let val = target.value;
+	if (!val.startsWith("#")) {
+		val = "#" + val;
+	}
+	hexInput = val;
+	// Basic hex validation regex (3, 4, 6, or 8 digits)
+	if (/^#([A-Fa-f0-9]{3,4}){1,2}$/.test(val)) {
+		value = val;
+	}
+}
+function setSwatch(swatch) {
+	value = swatch;
+	hexInput = swatch;
+}
+</script>
+
+<div class={twMerge(styles.base(), className)} {...restProps}>
+    <Popover>
+        {#snippet children({ open })}
+            <div 
+                class={styles.trigger()}
+                aria-disabled={disabled}
+            >
+                <div 
+                    class={styles.colorIndicator()} 
+                    style="background-color: {value || '#000'};"
+                ></div>
+                <span class="truncate flex-1 text-left text-on-surface">
+                    {value || placeholder}
+                </span>
+                <Icon name="lucide:chevron-down" class="text-on-surface-variant w-4 h-4" />
+            </div>
+        {/snippet}
+
+        {#snippet content()}
+            <div class={styles.content()}>
+                <div class={styles.hexInputWrapper()}>
+                    <span class="text-sm font-medium">Hex</span>
+                    <Input 
+                        value={hexInput} 
+                        oninput={handleHexInput} 
+                        class="h-8 font-mono text-xs" 
+                    />
+                </div>
+                
+                <div class={styles.swatchGrid()}>
+                    {#each swatches as swatch}
+                        <button
+                            type="button"
+                            class={styles.swatch()}
+                            style="background-color: {swatch};"
+                            title={swatch}
+                            aria-label={`Select color ${swatch}`}
+                            onclick={() => setSwatch(swatch)}
+                        ></button>
+                    {/each}
+                </div>
+                
+                <div class="pt-2 border-t border-outline-variant flex flex-col gap-1">
+                    <span class="text-xs text-on-surface-variant mb-1">Custom Color</span>
+                    <!-- Native color picker wrapper -->
+                    <label class="cursor-pointer relative overflow-hidden rounded-md border border-outline-variant w-full h-8 flex items-center justify-center bg-surface-container hover:bg-surface-container-high transition-colors">
+                        <span class="text-xs font-medium z-10 pointer-events-none mix-blend-difference text-white">Pick Custom</span>
+                        <input 
+                            type="color" 
+                            bind:value
+                            class="absolute inset-0 opacity-0 w-full h-full cursor-pointer scale-150"
+                        />
+                    </label>
+                </div>
+            </div>
+        {/snippet}
+    </Popover>
+</div>

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

@@ -0,0 +1,4 @@
+import type { ColorPickerProps } from './color-picker.types.js';
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/components/ColorPicker/color-picker.types.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'value'> {
+    /**
+     * The bound color value (Hex format).
+     * @default '#000000'
+     */
+    value?: string;
+    /**
+     * Placeholder text when no color is selected.
+     * @default 'Select color'
+     */
+    placeholder?: string;
+    /**
+     * Array of predefined color swatches.
+     */
+    swatches?: string[];
+    /**
+     * Whether the color picker is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+}

package/dist/components/ColorPicker/color-picker.types.js

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

package/dist/components/ColorPicker/color-picker.variants.d.ts

@@ -0,0 +1,69 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const colorPickerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            colorIndicator?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            swatchGrid?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            nativeInput?: import("tailwind-variants").ClassValue;
+            hexInputWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            colorIndicator?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            swatchGrid?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            nativeInput?: import("tailwind-variants").ClassValue;
+            hexInputWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+    colorIndicator: string;
+    content: string;
+    swatchGrid: string;
+    swatch: string;
+    nativeInput: string;
+    hexInputWrapper: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            colorIndicator?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            swatchGrid?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            nativeInput?: import("tailwind-variants").ClassValue;
+            hexInputWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+    colorIndicator: string;
+    content: string;
+    swatchGrid: string;
+    swatch: string;
+    nativeInput: string;
+    hexInputWrapper: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    base: string;
+    trigger: string;
+    colorIndicator: string;
+    content: string;
+    swatchGrid: string;
+    swatch: string;
+    nativeInput: string;
+    hexInputWrapper: string;
+}>>;
+export type ColorPickerVariantProps = VariantProps<typeof colorPickerVariants>;

package/dist/components/ColorPicker/color-picker.variants.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+export const colorPickerVariants = tv({
+    slots: {
+        base: 'relative inline-flex',
+        trigger: 'flex items-center gap-2 px-3 py-2 border border-outline-variant rounded-md bg-surface text-sm w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        colorIndicator: 'w-5 h-5 rounded border border-outline/50 shrink-0',
+        content: 'w-64 p-3 flex flex-col gap-3 bg-surface border border-outline-variant rounded-md shadow-md',
+        swatchGrid: 'grid grid-cols-6 gap-2',
+        swatch: 'w-6 h-6 rounded border border-outline/50 cursor-pointer hover:scale-110 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        nativeInput: 'w-full h-8 cursor-pointer rounded overflow-hidden',
+        hexInputWrapper: 'flex items-center gap-2'
+    }
+});

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

@@ -0,0 +1,4 @@
+import ColorPicker from './ColorPicker.svelte';
+export { ColorPicker };
+export * from './color-picker.types.js';
+export * from './color-picker.variants.js';

package/dist/components/ColorPicker/index.js

@@ -0,0 +1,4 @@
+import ColorPicker from './ColorPicker.svelte';
+export { ColorPicker };
+export * from './color-picker.types.js';
+export * from './color-picker.variants.js';

package/dist/components/ConfirmDialog/ConfirmDialog.svelte

@@ -0,0 +1,175 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { Dialog } from "bits-ui";
+import { Button } from "sv5ui";
+import { Input } from "sv5ui";
+import { Textarea } from "sv5ui";
+import { Icon } from "sv5ui";
+let { confirmText: defaultConfirmText = "Confirm", cancelText: defaultCancelText = "Cancel" } = $props();
+let open = $state(false);
+let pending = $state(null);
+let currentInputValue = $state("");
+const iconNames = {
+	warning: "lucide:triangle-alert",
+	error: "lucide:circle-x",
+	question: "lucide:circle-help",
+	info: "lucide:info",
+	success: "lucide:circle-check"
+};
+const iconColors = {
+	warning: "text-warning",
+	error: "text-error",
+	question: "text-primary",
+	info: "text-info",
+	success: "text-success"
+};
+const dismissible = $derived(pending?.options.dismissible !== false);
+const showCancel = $derived(pending?.options.showCancel !== false);
+export function show(options = {}) {
+	return new Promise((resolve) => {
+		currentInputValue = options.inputValue ?? "";
+		pending = {
+			options,
+			resolve
+		};
+		open = true;
+	});
+}
+function settle(result) {
+	const current = pending;
+	pending = null;
+	open = false;
+	current?.resolve(result);
+}
+function handleConfirm() {
+	pending?.options.onConfirm?.(currentInputValue);
+	settle(true);
+}
+function handleCancel() {
+	pending?.options.onCancel?.();
+	settle(false);
+}
+function handleOpenChange(value) {
+	if (!value && pending) {
+		handleCancel();
+		return;
+	}
+	open = value;
+}
+const contentProps = $derived.by(() => {
+	const behavior = dismissible ? "close" : "ignore";
+	return {
+		trapFocus: true,
+		preventScroll: true,
+		escapeKeydownBehavior: behavior,
+		interactOutsideBehavior: behavior
+	};
+});
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+    <Dialog.Portal>
+        <Dialog.Overlay
+            class="fixed inset-0 z-50 bg-[var(--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.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.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="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

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

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

@@ -0,0 +1,9 @@
+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: {
+    show(options?: ConfirmOptions): Promise<boolean>;
+    delete(options?: ConfirmOptions): Promise<boolean>;
+};
+export type ConfirmDialogUtility = typeof confirmDialog;
+export {};

package/dist/components/ConfirmDialog/confirm.js

@@ -0,0 +1,24 @@
+let showFn = null;
+export function registerConfirmDialog(fn) {
+    showFn = fn;
+}
+export const confirmDialog = {
+    show(options = {}) {
+        if (!showFn) {
+            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
+        });
+    }
+};

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

@@ -0,0 +1,21 @@
+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;
+    confirmText?: string;
+    cancelText?: string;
+    icon?: ConfirmIcon;
+    confirmColor?: ConfirmColor;
+    /** When false, only the confirm button is shown (alert-style). @default true */
+    showCancel?: boolean;
+    /** When false, backdrop click and Escape do not dismiss. @default true */
+    dismissible?: boolean;
+    inputPlaceholder?: string;
+    inputValue?: string;
+    inputType?: 'text' | 'password' | 'email' | 'number' | 'textarea';
+    inputChoices?: string[];
+    onConfirm?: (value?: string) => void;
+    onCancel?: () => void;
+}

package/dist/components/ConfirmDialog/confirm.types.js

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

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

@@ -0,0 +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';

package/dist/components/ConfirmDialog/index.js

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

package/dist/components/Fonts/Fonts.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { getConfig } from "../../config.js";
+import { buildFontVariablesCss, buildGoogleFontsUrl, buildLocalFontFaceCss, fontsDefaults, resolveFontsOptions } from "./fonts.js";
+const globalConfig = getConfig();
+const config = resolveFontsOptions(globalConfig.fonts);
+let { fonts, families, display, preconnect } = $props();
+const resolvedFamilies = $derived(families ?? fonts ?? (config === false ? [] : config.families ?? []));
+const resolvedDisplay = $derived(display ?? (config === false ? fontsDefaults.display : config.display));
+const resolvedPreconnect = $derived(preconnect ?? (config === false ? fontsDefaults.preconnect : config.preconnect));
+const href = $derived(buildGoogleFontsUrl(resolvedFamilies, resolvedDisplay));
+const localFontFaceCss = $derived(buildLocalFontFaceCss(resolvedFamilies, resolvedDisplay));
+const variableCss = $derived(buildFontVariablesCss(resolvedFamilies));
+const inlineCss = $derived([localFontFaceCss, variableCss].filter((value) => value.length > 0).join("\n\n"));
+const hasFonts = $derived(href.length > 0 || inlineCss.length > 0);
+</script>
+
+<svelte:head>
+    {#if hasFonts}
+        {#if resolvedPreconnect && href}
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+        {/if}
+        {#if href}
+            <link rel="stylesheet" href={href} />
+        {/if}
+        {#if inlineCss}
+            <svelte:element this={'style'}>{inlineCss}</svelte:element>
+        {/if}
+    {/if}
+</svelte:head>

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

@@ -0,0 +1,5 @@
+import type { FontsProps } from './fonts.types.js';
+export type Props = FontsProps;
+declare const Fonts: import("svelte").Component<FontsProps, {}, "">;
+type Fonts = ReturnType<typeof Fonts>;
+export default Fonts;

package/dist/components/Fonts/fonts.d.ts

@@ -0,0 +1,12 @@
+import type { FontDefinition, GoogleFontDisplay, FontsConfig, FontsOptions } from './fonts.types.js';
+export declare const defaultFontFamilies: FontDefinition[];
+export declare const fontsDefaults: {
+    families: FontDefinition[];
+    display: GoogleFontDisplay;
+    preconnect: boolean;
+};
+export declare function buildGoogleFontsUrl(fonts: FontDefinition[], display?: GoogleFontDisplay): string;
+export declare function buildFontFamily(font: FontDefinition): string;
+export declare function buildLocalFontFaceCss(fonts: FontDefinition[], defaultDisplay?: GoogleFontDisplay): string;
+export declare function buildFontVariablesCss(fonts: FontDefinition[]): string;
+export declare function resolveFontsOptions(config?: FontsConfig): FontsOptions | false;