svelora 3.0.6 → 3.0.8

package/dist/ColorPicker/ColorPicker.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { Popover } from "../Popover/index.js";
+import { Input } from "../Input/index.js";
+import Icon from "../Icon/Icon.svelte";
+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/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/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/ColorPicker/color-picker.types.js

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

package/dist/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-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            colorIndicator?: import("tailwind-merge").ClassNameValue;
+            swatchGrid?: import("tailwind-merge").ClassNameValue;
+            swatch?: import("tailwind-merge").ClassNameValue;
+            nativeInput?: import("tailwind-merge").ClassNameValue;
+            hexInputWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            colorIndicator?: import("tailwind-merge").ClassNameValue;
+            swatchGrid?: import("tailwind-merge").ClassNameValue;
+            swatch?: import("tailwind-merge").ClassNameValue;
+            nativeInput?: import("tailwind-merge").ClassNameValue;
+            hexInputWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+    colorIndicator: string;
+    content: string;
+    swatchGrid: string;
+    swatch: string;
+    nativeInput: string;
+    hexInputWrapper: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            colorIndicator?: import("tailwind-merge").ClassNameValue;
+            swatchGrid?: import("tailwind-merge").ClassNameValue;
+            swatch?: import("tailwind-merge").ClassNameValue;
+            nativeInput?: import("tailwind-merge").ClassNameValue;
+            hexInputWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    trigger: string;
+    colorIndicator: string;
+    content: string;
+    swatchGrid: string;
+    swatch: string;
+    nativeInput: string;
+    hexInputWrapper: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    trigger: string;
+    colorIndicator: string;
+    content: string;
+    swatchGrid: string;
+    swatch: string;
+    nativeInput: string;
+    hexInputWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorPickerVariantProps = VariantProps<typeof colorPickerVariants>;

package/dist/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/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/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/DateRangePicker/DateRangePicker.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { DateFormatter } from "@internationalized/date";
+import Icon from "../Icon/Icon.svelte";
+import Popover from "../Popover/Popover.svelte";
+import Calendar from "../Calendar/Calendar.svelte";
+import { dateRangePickerVariants } from "./date-range-picker.variants.js";
+let { value = $bindable({
+	start: undefined,
+	end: undefined
+}), placeholder = "Select date range", numberOfMonths = 2, disabled = false, class: className, onchange, ...restProps } = $props();
+let styles = $derived(dateRangePickerVariants({ disabled }));
+// Internal state for popover
+let open = $state(false);
+// Formatter for displaying dates
+const df = new DateFormatter("en-US", { dateStyle: "medium" });
+let displayText = $derived.by(() => {
+	if (value.start) {
+		if (value.end) {
+			return `${df.format(value.start.toDate("UTC"))} - ${df.format(value.end.toDate("UTC"))}`;
+		}
+		return df.format(value.start.toDate("UTC"));
+	}
+	return placeholder;
+});
+function handleDateChange(v) {
+	// Range calendar passes an object with start/end
+	const rangeValue = v;
+	value = rangeValue;
+	onchange?.(rangeValue);
+}
+</script>
+
+<Popover bind:open>
+    {#snippet children({ open })}
+        <button
+            type="button"
+            class={twMerge(styles.trigger() as string, className, !value.start && 'text-surface-500')}
+            {disabled}
+            {...restProps}
+        >
+            <div class="flex items-center gap-2 overflow-hidden">
+                <Icon name="lucide:calendar" class={styles.icon() as string} />
+                <span class={styles.triggerText() as string}>{displayText}</span>
+            </div>
+            <Icon name="lucide:chevron-down" class={styles.icon() as string} />
+        </button>
+    {/snippet}
+
+    {#snippet content()}
+        <div class={styles.popoverContent() as string}>
+            <Calendar 
+                range={true}
+                value={value as any}
+                {numberOfMonths}
+                onValueChange={handleDateChange}
+            />
+        </div>
+    {/snippet}
+</Popover>

package/dist/DateRangePicker/DateRangePicker.svelte.d.ts

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

package/dist/DateRangePicker/date-range-picker.types.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { DateValue } from '@internationalized/date';
+export interface DateRange {
+    start: DateValue | undefined;
+    end: DateValue | undefined;
+}
+export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'value' | 'onchange'> {
+    /**
+     * The selected date range.
+     */
+    value?: DateRange;
+    /**
+     * Placeholder text when no dates are selected.
+     * @default 'Select date range'
+     */
+    placeholder?: string;
+    /**
+     * Number of months to display side-by-side.
+     * @default 2
+     */
+    numberOfMonths?: number;
+    /**
+     * Whether the picker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes for the trigger button.
+     */
+    class?: string;
+    /**
+     * Event fired when the date range changes.
+     */
+    onchange?: (value: DateRange) => void;
+}

package/dist/DateRangePicker/date-range-picker.types.js

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

package/dist/DateRangePicker/date-range-picker.variants.d.ts

@@ -0,0 +1,39 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const dateRangePickerVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    triggerText: string;
+    icon: string;
+    popoverContent: string;
+    calendarWrapper: string;
+}, undefined, {
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    triggerText: string;
+    icon: string;
+    popoverContent: string;
+    calendarWrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    triggerText: string;
+    icon: string;
+    popoverContent: string;
+    calendarWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DateRangePickerVariantProps = VariantProps<typeof dateRangePickerVariants>;

package/dist/DateRangePicker/date-range-picker.variants.js

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+export const dateRangePickerVariants = tv({
+    slots: {
+        trigger: 'flex w-full items-center justify-between gap-2 px-3 py-2 text-sm text-left border border-outline-variant bg-surface-50 dark:bg-surface-900 rounded-md hover:bg-surface-100 dark:hover:bg-surface-800 focus:outline-none focus:ring-2 focus:ring-primary transition-colors',
+        triggerText: 'truncate flex-1',
+        icon: 'w-4 h-4 shrink-0 text-surface-500',
+        popoverContent: 'w-auto p-3 bg-surface-50 dark:bg-surface-900 border border-outline-variant rounded-md shadow-md',
+        calendarWrapper: 'flex flex-col sm:flex-row gap-4'
+    },
+    variants: {
+        disabled: {
+            true: {
+                trigger: 'opacity-50 cursor-not-allowed pointer-events-none'
+            }
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});

package/dist/DateRangePicker/index.d.ts

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

package/dist/DateRangePicker/index.js

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

package/dist/List/List.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { setContext } from "svelte";
+import { listVariants } from "./list.variants.js";
+let { variant = "default", class: className, children, ...restProps } = $props();
+let styles = $derived(listVariants({ variant }));
+// Pass the variant down to children if needed, or just let them style themselves
+// Since the variant affects the parent 'base', but 'bordered' also affects 'item',
+// we should provide the list context so ListItems know the current variant.
+setContext("list-variant", () => variant);
+</script>
+
+<ul class={twMerge(styles.base(), className)} {...restProps}>
+    {@render children?.()}
+</ul>

package/dist/List/List.svelte.d.ts

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

package/dist/List/ListItem.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { getContext } from "svelte";
+import { listVariants } from "./list.variants.js";
+let { title, description, interactive = false, disabled = false, href, target, class: className, leading, trailing, children, ...restProps } = $props();
+// Get the parent list variant, default to 'default' if used outside a List
+const getListVariant = getContext("list-variant");
+let parentVariant = $derived(getListVariant ? getListVariant() : "default");
+// Determine if it should be interactive automatically if it's a link
+let isInteractive = $derived(interactive || !!href);
+let styles = $derived(listVariants({
+	variant: parentVariant,
+	interactive: isInteractive,
+	disabled
+}));
+// Using svelte:element with conditional tags and spreading restProps causes TS errors.
+// We use a snippet to keep the markup DRY while using explicit if/else tags.
+</script>
+
+{#snippet contentWrapper()}
+    {#if leading}
+        <div class={styles.leading()}>
+            {@render leading()}
+        </div>
+    {/if}
+
+    <div class={styles.itemContent()}>
+        {#if children}
+            {@render children()}
+        {:else}
+            {#if title}
+                <div class={styles.itemTitle()}>{title}</div>
+            {/if}
+            {#if description}
+                <div class={styles.itemDescription()}>{description}</div>
+            {/if}
+        {/if}
+    </div>
+
+    {#if trailing}
+        <div class={styles.trailing()}>
+            {@render trailing()}
+        </div>
+    {/if}
+{/snippet}
+
+<li>
+    {#if href}
+        <a 
+            {href}
+            {target}
+            class={twMerge(styles.item(), className)}
+            {...restProps as any}
+        >
+            {@render contentWrapper()}
+        </a>
+    {:else}
+        <div 
+            class={twMerge(styles.item(), className)}
+            {...restProps as any}
+        >
+            {@render contentWrapper()}
+        </div>
+    {/if}
+</li>

package/dist/List/ListItem.svelte.d.ts

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

package/dist/List/index.d.ts

@@ -0,0 +1,5 @@
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+export { List, ListItem };
+export * from './list.types.js';
+export * from './list.variants.js';

package/dist/List/index.js

@@ -0,0 +1,5 @@
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+export { List, ListItem };
+export * from './list.types.js';
+export * from './list.variants.js';

package/dist/List/list.types.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLLiAttributes } from 'svelte/elements';
+import type { ListVariantProps } from './list.variants.js';
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * The variant of the list.
+     * @default 'default'
+     */
+    variant?: ListVariantProps['variant'];
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Content of the list.
+     */
+    children?: Snippet;
+}
+export interface ListItemProps extends HTMLLiAttributes {
+    /**
+     * Title of the list item.
+     */
+    title?: string;
+    /**
+     * Description below the title.
+     */
+    description?: string;
+    /**
+     * Whether the item is interactive (hover/active states).
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional href. If provided, the item renders as an anchor tag `<a>`.
+     */
+    href?: string;
+    /**
+     * Target attribute for the anchor tag if `href` is provided.
+     */
+    target?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Snippet for the leading section (e.g., Avatar, Icon).
+     */
+    leading?: Snippet;
+    /**
+     * Snippet for the trailing section (e.g., Badge, Chevron, Switch).
+     */
+    trailing?: Snippet;
+    /**
+     * Snippet to replace the default title/description content completely.
+     */
+    children?: Snippet;
+}

package/dist/List/list.types.js

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