svelora 3.0.5 → 3.0.7

package/dist/BentoGrid/BentoCard.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import Button from "../Button/Button.svelte";
+import { bentoGridVariants } from "./bento-grid.variants.js";
+let { name, description, icon, href, cta = "Learn more", class: className, background, actionSnippet, ...restProps } = $props();
+let styles = $derived(bentoGridVariants());
+</script>
+
+<div class={twMerge(styles.cardBase(), className)} {...restProps}>
+    <div class={styles.cardBackground()}>
+        {#if background}
+            {@render background()}
+        {/if}
+    </div>
+
+    <!-- Push content up slightly on hover by adjusting group styles or locally -->
+    <div class={twMerge(styles.cardContent(), href && 'group-hover:-translate-y-4')}>
+        {#if icon}
+            <div class={styles.cardIconWrapper()}>
+                <Icon {name} class="w-6 h-6" />
+            </div>
+        {/if}
+        
+        <h3 class={styles.cardTitle()}>{name}</h3>
+        
+        {#if description}
+            <p class={styles.cardDescription()}>{description}</p>
+        {/if}
+    </div>
+
+    {#if href || actionSnippet}
+        <div class={twMerge(styles.cardAction(), !href && !actionSnippet && 'hidden')}>
+            {#if actionSnippet}
+                {@render actionSnippet()}
+            {:else if href}
+                <Button {href} variant="ghost" size="sm" class="pl-0 hover:bg-transparent">
+                    {cta}
+                    {#snippet trailingSlot()}
+                        <Icon name="lucide:arrow-right" class="w-4 h-4 ml-1" />
+                    {/snippet}
+                </Button>
+            {/if}
+        </div>
+    {/if}
+</div>

package/dist/BentoGrid/BentoCard.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BentoCardProps } from './bento-grid.types.js';
+declare const BentoCard: import("svelte").Component<BentoCardProps, {}, "">;
+type BentoCard = ReturnType<typeof BentoCard>;
+export default BentoCard;

package/dist/BentoGrid/BentoGrid.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { bentoGridVariants } from "./bento-grid.variants.js";
+let { class: className, children, ...restProps } = $props();
+let styles = $derived(bentoGridVariants());
+</script>
+
+<div class={twMerge(styles.gridBase(), className)} {...restProps}>
+    {@render children?.()}
+</div>

package/dist/BentoGrid/BentoGrid.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BentoGridProps } from './bento-grid.types.js';
+declare const BentoGrid: import("svelte").Component<BentoGridProps, {}, "">;
+type BentoGrid = ReturnType<typeof BentoGrid>;
+export default BentoGrid;

package/dist/BentoGrid/bento-grid.types.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface BentoGridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * The cards to render inside the grid.
+     */
+    children?: Snippet;
+}
+export interface BentoCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title of the card.
+     */
+    name: string;
+    /**
+     * Description text.
+     */
+    description?: string;
+    /**
+     * Icon name.
+     */
+    icon?: string;
+    /**
+     * The href to navigate to when the call-to-action is clicked.
+     */
+    href?: string;
+    /**
+     * Text for the call-to-action button.
+     * @default 'Learn more'
+     */
+    cta?: string;
+    /**
+     * Additional CSS classes. Useful for setting grid column/row spans (e.g. `col-span-2`).
+     */
+    class?: string;
+    /**
+     * Snippet for background visual elements (e.g. gradients, images).
+     */
+    background?: Snippet;
+    /**
+     * Snippet for overriding or extending the action area.
+     */
+    actionSnippet?: Snippet;
+}

package/dist/BentoGrid/bento-grid.types.js

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

package/dist/BentoGrid/bento-grid.variants.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const bentoGridVariants: import("tailwind-variants").TVReturnType<{}, {
+    gridBase: string;
+    cardBase: string;
+    cardBackground: string;
+    cardContent: string;
+    cardIconWrapper: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardAction: string;
+}, undefined, {}, {
+    gridBase: string;
+    cardBase: string;
+    cardBackground: string;
+    cardContent: string;
+    cardIconWrapper: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardAction: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    gridBase: string;
+    cardBase: string;
+    cardBackground: string;
+    cardContent: string;
+    cardIconWrapper: string;
+    cardTitle: string;
+    cardDescription: string;
+    cardAction: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BentoGridVariantProps = VariantProps<typeof bentoGridVariants>;

package/dist/BentoGrid/bento-grid.variants.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const bentoGridVariants = tv({
+    slots: {
+        gridBase: 'grid grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto w-full',
+        cardBase: 'group relative flex flex-col justify-between overflow-hidden rounded-xl bg-surface-50 dark:bg-surface-900 border border-outline-variant transition-all hover:shadow-md dark:hover:shadow-surface-800/50',
+        cardBackground: 'absolute inset-0 transition-all duration-300 pointer-events-none',
+        cardContent: 'pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300',
+        cardIconWrapper: 'mb-2 w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400',
+        cardTitle: 'text-lg font-semibold text-surface-900 dark:text-surface-50',
+        cardDescription: 'text-sm text-surface-500 dark:text-surface-400',
+        cardAction: 'pointer-events-auto absolute bottom-0 left-0 w-full p-6 opacity-0 translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0'
+    },
+    variants: {
+    // Variants can be added if we want different styles of grids
+    }
+});

package/dist/BentoGrid/index.d.ts

@@ -0,0 +1,5 @@
+import BentoGrid from './BentoGrid.svelte';
+import BentoCard from './BentoCard.svelte';
+export { BentoGrid, BentoCard };
+export * from './bento-grid.types.js';
+export * from './bento-grid.variants.js';

package/dist/BentoGrid/index.js

@@ -0,0 +1,5 @@
+import BentoGrid from './BentoGrid.svelte';
+import BentoCard from './BentoCard.svelte';
+export { BentoGrid, BentoCard };
+export * from './bento-grid.types.js';
+export * from './bento-grid.variants.js';

package/dist/Chart/Chart.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { onMount } from "svelte";
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, PointElement, LineElement, ArcElement, RadialLinearScale, Filler } from "chart.js";
+import { Bar, Line, Pie, Doughnut, Radar, PolarArea, Scatter, Bubble } from "svelte-chartjs";
+import { chartVariants } from "./chart.variants.js";
+// Register all common elements
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, PointElement, LineElement, ArcElement, RadialLinearScale, Filler);
+// Set default styling to match Tailwind/Svelora theme
+ChartJS.defaults.color = "currentColor";
+ChartJS.defaults.font.family = "inherit";
+ChartJS.defaults.plugins.tooltip.backgroundColor = "rgba(0, 0, 0, 0.8)";
+ChartJS.defaults.plugins.tooltip.titleColor = "#ffffff";
+ChartJS.defaults.plugins.tooltip.bodyColor = "#ffffff";
+ChartJS.defaults.plugins.tooltip.cornerRadius = 6;
+ChartJS.defaults.plugins.tooltip.padding = 10;
+let { type, data, options = {}, class: className, ...restProps } = $props();
+let styles = $derived(chartVariants());
+// Map string types to components
+const components = {
+	bar: Bar,
+	line: Line,
+	pie: Pie,
+	doughnut: Doughnut,
+	radar: Radar,
+	polarArea: PolarArea,
+	scatter: Scatter,
+	bubble: Bubble
+};
+// Default responsive options
+const defaultOptions = {
+	responsive: true,
+	maintainAspectRatio: false
+};
+let mergedOptions = $derived({
+	...defaultOptions,
+	...options
+});
+// We must use "as any" or "as typeof SvelteComponent" because svelte-chartjs types 
+// are sometimes tricky with svelte:component in Svelte 5.
+const ChartComponent = $derived(components[type]);
+</script>
+
+<div class={twMerge(styles, className)} {...restProps}>
+    {#if ChartComponent}
+        <ChartComponent data={data as any} options={mergedOptions as any} />
+    {/if}
+</div>

package/dist/Chart/Chart.svelte.d.ts

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

package/dist/Chart/chart.types.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChartData, ChartOptions, ChartType } from 'chart.js';
+export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'type'> {
+    /**
+     * Type of the chart.
+     */
+    type: ChartType;
+    /**
+     * The data object for the chart.
+     */
+    data: ChartData<ChartType, unknown, unknown>;
+    /**
+     * Configuration options for the chart.
+     */
+    options?: ChartOptions<ChartType>;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+}

package/dist/Chart/chart.types.js

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

package/dist/Chart/chart.variants.d.ts

@@ -0,0 +1,3 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const chartVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "w-full h-full relative", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "w-full h-full relative", unknown, unknown, undefined>>;
+export type ChartVariantProps = VariantProps<typeof chartVariants>;

package/dist/Chart/chart.variants.js

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const chartVariants = tv({
+    base: 'w-full h-full relative'
+});

package/dist/Chart/index.d.ts

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

package/dist/Chart/index.js

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

package/dist/Chat/ChatBubble.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { setContext } from "svelte";
+import { chatVariants } from "./chat.variants.js";
+let { position = "start", name, time, class: className, avatar, children, ...restProps } = $props();
+let styles = $derived(chatVariants({ position }));
+// Provide position context to child ChatMessage components for proper rounded corners
+setContext("chat-bubble-position", () => position);
+</script>
+
+<div class={twMerge(styles.bubbleBase() as string, className as string)} {...restProps}>
+    {#if avatar}
+        <div class={styles.bubbleAvatar()}>
+            {@render avatar()}
+        </div>
+    {/if}
+    
+    <div class={styles.bubbleContent()}>
+        {#if name || time}
+            <div class={styles.bubbleHeader()}>
+                {#if name}
+                    <span class={styles.bubbleName()}>{name}</span>
+                {/if}
+                {#if time}
+                    <span class={styles.bubbleTime()}>{time}</span>
+                {/if}
+            </div>
+        {/if}
+        {@render children?.()}
+    </div>
+</div>

package/dist/Chat/ChatBubble.svelte.d.ts

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

package/dist/Chat/ChatInput.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { chatVariants } from "./chat.variants.js";
+let { value = $bindable(""), placeholder = "Type a message...", disabled = false, class: className, leading, trailing, ...restProps } = $props();
+let styles = $derived(chatVariants());
+// Auto-resize textarea function could be added here
+function autoResize(node) {
+	function resize() {
+		node.style.height = "auto";
+		node.style.height = node.scrollHeight + "px";
+	}
+	node.addEventListener("input", resize);
+	// Initial resize
+	setTimeout(resize, 0);
+	return { destroy() {
+		node.removeEventListener("input", resize);
+	} };
+}
+</script>
+
+<div class={twMerge(styles.inputBase() as string, className as string)} {...restProps}>
+    {#if leading}
+        <div class={styles.inputActions()}>
+            {@render leading()}
+        </div>
+    {/if}
+
+    <div class={styles.inputFieldWrapper()}>
+        <textarea
+            bind:value
+            {placeholder}
+            {disabled}
+            rows="1"
+            use:autoResize
+            class={styles.inputField()}
+            onkeydown={(e) => {
+                // If you want Shift+Enter for new line, and Enter to submit:
+                // if (e.key === 'Enter' && !e.shiftKey) {
+                //     e.preventDefault()
+                //     // Dispatch submit event
+                // }
+            }}
+        ></textarea>
+    </div>
+
+    {#if trailing}
+        <div class={styles.inputActions()}>
+            {@render trailing()}
+        </div>
+    {/if}
+</div>

package/dist/Chat/ChatInput.svelte.d.ts

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

package/dist/Chat/ChatMessage.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { getContext } from "svelte";
+import { chatVariants } from "./chat.variants.js";
+let { variant = "surface", position: propPosition, class: className, children, ...restProps } = $props();
+const getPositionContext = getContext("chat-bubble-position");
+let position = $derived(propPosition ?? (getPositionContext ? getPositionContext() : "start"));
+let styles = $derived(chatVariants({
+	variant,
+	position
+}));
+</script>
+
+<div class={twMerge(styles.messageBase() as string, className as string)} {...restProps}>
+    {@render children?.()}
+</div>

package/dist/Chat/ChatMessage.svelte.d.ts

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

package/dist/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/Chat/chat.types.js

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

package/dist/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").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, unknown, unknown, undefined>>;
+export type ChatVariantProps = VariantProps<typeof chatVariants>;

package/dist/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/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/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';