sv5ui-plus 4.0.0

package/dist/components/Chat/chat.types.d.ts

@@ -0,0 +1,63 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChatVariantProps } from './chat.variants.js';
+export interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Position of the chat bubble (start for receiver, end for sender).
+     * @default 'start'
+     */
+    position?: ChatVariantProps['position'];
+    /**
+     * Name of the sender.
+     */
+    name?: string;
+    /**
+     * Timestamp of the message.
+     */
+    time?: string;
+    /**
+     * Snippet for the avatar element.
+     */
+    avatar?: Snippet;
+    /**
+     * The actual chat messages.
+     */
+    children?: Snippet;
+}
+export interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Style variant of the message bubble.
+     */
+    variant?: ChatVariantProps['variant'];
+    /**
+     * Position inheritance (used internally for rounded corners).
+     * Automatically inherited from ChatBubble if used within it.
+     */
+    position?: ChatVariantProps['position'];
+    /**
+     * The message text or content.
+     */
+    children?: Snippet;
+}
+export interface ChatInputProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Value of the input field.
+     */
+    value?: string;
+    /**
+     * Placeholder text.
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Snippet for leading actions (e.g. attachment button).
+     */
+    leading?: Snippet;
+    /**
+     * Snippet for trailing actions (e.g. send button).
+     */
+    trailing?: Snippet;
+}

package/dist/components/Chat/chat.types.js

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

package/dist/components/Chat/chat.variants.d.ts

@@ -0,0 +1,117 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const chatVariants: import("tailwind-variants").TVReturnType<{
+    position: {
+        start: {
+            bubbleBase: string;
+            bubbleContent: string;
+            bubbleHeader: string;
+            messageBase: string;
+        };
+        end: {
+            bubbleBase: string;
+            bubbleContent: string;
+            bubbleHeader: string;
+            messageBase: string;
+        };
+    };
+    variant: {
+        primary: {
+            messageBase: string;
+        };
+        surface: {
+            messageBase: string;
+        };
+        outline: {
+            messageBase: string;
+        };
+    };
+}, {
+    bubbleBase: string;
+    bubbleAvatar: string;
+    bubbleContent: string;
+    bubbleHeader: string;
+    bubbleName: string;
+    bubbleTime: string;
+    messageBase: string;
+    inputBase: string;
+    inputFieldWrapper: string;
+    inputField: string;
+    inputActions: string;
+}, undefined, {
+    position: {
+        start: {
+            bubbleBase: string;
+            bubbleContent: string;
+            bubbleHeader: string;
+            messageBase: string;
+        };
+        end: {
+            bubbleBase: string;
+            bubbleContent: string;
+            bubbleHeader: string;
+            messageBase: string;
+        };
+    };
+    variant: {
+        primary: {
+            messageBase: string;
+        };
+        surface: {
+            messageBase: string;
+        };
+        outline: {
+            messageBase: string;
+        };
+    };
+}, {
+    bubbleBase: string;
+    bubbleAvatar: string;
+    bubbleContent: string;
+    bubbleHeader: string;
+    bubbleName: string;
+    bubbleTime: string;
+    messageBase: string;
+    inputBase: string;
+    inputFieldWrapper: string;
+    inputField: string;
+    inputActions: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    position: {
+        start: {
+            bubbleBase: string;
+            bubbleContent: string;
+            bubbleHeader: string;
+            messageBase: string;
+        };
+        end: {
+            bubbleBase: string;
+            bubbleContent: string;
+            bubbleHeader: string;
+            messageBase: string;
+        };
+    };
+    variant: {
+        primary: {
+            messageBase: string;
+        };
+        surface: {
+            messageBase: string;
+        };
+        outline: {
+            messageBase: string;
+        };
+    };
+}, {
+    bubbleBase: string;
+    bubbleAvatar: string;
+    bubbleContent: string;
+    bubbleHeader: string;
+    bubbleName: string;
+    bubbleTime: string;
+    messageBase: string;
+    inputBase: string;
+    inputFieldWrapper: string;
+    inputField: string;
+    inputActions: string;
+}>>;
+export type ChatVariantProps = VariantProps<typeof chatVariants>;

package/dist/components/Chat/chat.variants.js

@@ -0,0 +1,47 @@
+import { tv } from 'tailwind-variants';
+export const chatVariants = tv({
+    slots: {
+        bubbleBase: 'flex w-full gap-3 py-2',
+        bubbleAvatar: 'shrink-0 mt-1',
+        bubbleContent: 'flex flex-col gap-1 min-w-0 max-w-[80%]',
+        bubbleHeader: 'flex items-center gap-2 text-xs text-surface-500 dark:text-surface-400',
+        bubbleName: 'font-semibold text-surface-900 dark:text-surface-50',
+        bubbleTime: '',
+        messageBase: 'px-4 py-2.5 rounded-2xl text-sm break-words',
+        inputBase: 'flex items-end gap-2 p-3 bg-surface-50 dark:bg-surface-900 border-t border-outline-variant',
+        inputFieldWrapper: 'flex-1 relative bg-surface-100 dark:bg-surface-800 rounded-2xl border border-outline-variant focus-within:border-primary focus-within:ring-1 focus-within:ring-primary transition-colors',
+        inputField: 'w-full bg-transparent border-0 px-4 py-3 min-h-[44px] max-h-32 resize-none focus:ring-0 text-sm outline-none',
+        inputActions: 'shrink-0 flex items-center gap-1'
+    },
+    variants: {
+        position: {
+            start: {
+                bubbleBase: 'justify-start',
+                bubbleContent: 'items-start',
+                bubbleHeader: 'flex-row',
+                messageBase: 'rounded-tl-sm'
+            },
+            end: {
+                bubbleBase: 'justify-end flex-row-reverse',
+                bubbleContent: 'items-end',
+                bubbleHeader: 'flex-row-reverse',
+                messageBase: 'rounded-tr-sm'
+            }
+        },
+        variant: {
+            primary: {
+                messageBase: 'bg-primary text-on-primary'
+            },
+            surface: {
+                messageBase: 'bg-surface-200 dark:bg-surface-800 text-surface-900 dark:text-surface-50'
+            },
+            outline: {
+                messageBase: 'bg-transparent border border-outline-variant text-surface-900 dark:text-surface-50'
+            }
+        }
+    },
+    defaultVariants: {
+        position: 'start',
+        variant: 'surface'
+    }
+});

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

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

package/dist/components/Chat/index.js

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

package/dist/components/CodeBlock/CodeBlock.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { getComponentConfig } from "../../config.js";
+import { codeBlockDefaults, codeBlockVariants } from "./code-block.variants.js";
+const config = getComponentConfig("codeBlock", codeBlockDefaults);
+let { title = "Code", code = "", copyText, copyable = true, html, variant = config.defaultVariants.variant, size = config.defaultVariants.size, class: className, ui, children } = $props();
+let copyLabel = $state("Copy");
+const resolvedCopyText = $derived((copyText ?? code).trim());
+const canCopy = $derived(copyable && resolvedCopyText.length > 0);
+const classes = $derived.by(() => {
+	const slots = codeBlockVariants({
+		variant,
+		size
+	});
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			ui?.root
+		] }),
+		header: slots.header({ class: [config.slots.header, ui?.header] }),
+		title: slots.title({ class: [config.slots.title, ui?.title] }),
+		button: slots.button({ class: [config.slots.button, ui?.button] }),
+		body: slots.body({ class: [config.slots.body, ui?.body] })
+	};
+});
+function scheduleLabelReset(resetLabel) {
+	window.setTimeout(() => {
+		copyLabel = resetLabel;
+	}, 1200);
+}
+async function handleCopy() {
+	if (!canCopy) return;
+	if (typeof navigator === "undefined" || !navigator.clipboard) return;
+	const resetLabel = copyLabel;
+	try {
+		await navigator.clipboard.writeText(resolvedCopyText);
+		copyLabel = "Copied";
+	} catch {
+		copyLabel = "Failed";
+	}
+	scheduleLabelReset(resetLabel);
+}
+</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.body}>
+        {#if html}
+            {@html html}
+        {:else if children}
+            {@render children()}
+        {:else}
+            <pre class="shiki">
+                <code>{code}</code>
+            </pre>
+        {/if}
+    </div>
+</div>

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

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

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

@@ -0,0 +1,15 @@
+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']>;
+    class?: ClassNameValue;
+    ui?: Partial<Record<CodeBlockSlots, ClassNameValue>>;
+    children?: Snippet;
+};

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

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

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

@@ -0,0 +1,288 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const codeBlockVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        soft: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        subtle: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        solid: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        ghost: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        none: {
+            root: string;
+            header: string;
+            button: string;
+        };
+    };
+    size: {
+        sm: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        md: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        lg: {
+            header: string;
+            button: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    title: string;
+    button: string;
+    body: string;
+}, undefined, {
+    variant: {
+        outline: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        soft: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        subtle: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        solid: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        ghost: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        none: {
+            root: string;
+            header: string;
+            button: string;
+        };
+    };
+    size: {
+        sm: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        md: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        lg: {
+            header: string;
+            button: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    title: string;
+    button: string;
+    body: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        outline: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        soft: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        subtle: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        solid: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        ghost: {
+            root: string;
+            header: string;
+            button: string;
+        };
+        none: {
+            root: string;
+            header: string;
+            button: string;
+        };
+    };
+    size: {
+        sm: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        md: {
+            header: string;
+            button: string;
+            body: string;
+        };
+        lg: {
+            header: string;
+            button: string;
+            body: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    title: string;
+    button: string;
+    body: string;
+}>>;
+export type CodeBlockVariantProps = VariantProps<typeof codeBlockVariants>;
+export type CodeBlockSlots = keyof ReturnType<typeof codeBlockVariants>;
+export declare const codeBlockDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        variant: {
+            outline: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            soft: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            subtle: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            solid: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            ghost: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            none: {
+                root: string;
+                header: string;
+                button: string;
+            };
+        };
+        size: {
+            sm: {
+                header: string;
+                button: string;
+                body: string;
+            };
+            md: {
+                header: string;
+                button: string;
+                body: string;
+            };
+            lg: {
+                header: string;
+                button: string;
+                body: string;
+            };
+        };
+    }, {
+        root: string;
+        header: string;
+        title: string;
+        button: string;
+        body: string;
+    }, {
+        variant: {
+            outline: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            soft: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            subtle: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            solid: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            ghost: {
+                root: string;
+                header: string;
+                button: string;
+            };
+            none: {
+                root: string;
+                header: string;
+                button: string;
+            };
+        };
+        size: {
+            sm: {
+                header: string;
+                button: string;
+                body: string;
+            };
+            md: {
+                header: string;
+                button: string;
+                body: string;
+            };
+            lg: {
+                header: string;
+                button: string;
+                body: string;
+            };
+        };
+    }, {
+        root: string;
+        header: string;
+        title: string;
+        button: string;
+        body: string;
+    }>;
+    slots: Partial<Record<CodeBlockSlots, string>>;
+};

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

@@ -0,0 +1,69 @@
+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'
+    },
+    variants: {
+        variant: {
+            outline: {
+                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'
+            },
+            subtle: {
+                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'
+            },
+            ghost: {
+                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'
+            }
+        },
+        size: {
+            sm: {
+                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'
+            },
+            lg: {
+                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'
+    }
+});
+export const codeBlockDefaults = {
+    defaultVariants: codeBlockVariants.defaultVariants,
+    slots: {}
+};

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

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

package/dist/components/CodeBlock/index.js

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