svelora 3.0.5 → 3.0.7

package/dist/Rating/Rating.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import Icon from "../Icon/Icon.svelte";
+import { ratingVariants } from "./rating.variants.js";
+let { value = $bindable(0), max = 5, size = "md", allowHalf = false, disabled = false, readonly = false, iconFull = "lucide:star", iconEmpty = "lucide:star", activeColor = "text-warning-500 fill-warning-500", inactiveColor = "text-surface-300 dark:text-surface-600", class: className, onchange, ...restProps } = $props();
+let styles = $derived(ratingVariants({
+	size,
+	disabled,
+	readonly
+}));
+let hoverValue = $state(null);
+// Calculate array of stars
+let stars = $derived(Array.from({ length: max }, (_, i) => i + 1));
+function handleMouseMove(e, index) {
+	if (disabled || readonly) return;
+	if (allowHalf) {
+		const rect = e.currentTarget.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const isHalf = x < rect.width / 2;
+		hoverValue = isHalf ? index - .5 : index;
+	} else {
+		hoverValue = index;
+	}
+}
+function handleMouseLeave() {
+	if (disabled || readonly) return;
+	hoverValue = null;
+}
+function handleClick(index) {
+	if (disabled || readonly) return;
+	value = hoverValue ?? index;
+	onchange?.(value);
+}
+function handleKeyDown(e, index) {
+	if (disabled || readonly) return;
+	let newValue = value;
+	if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+		newValue = Math.min(max, value + (allowHalf ? .5 : 1));
+	} else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+		newValue = Math.max(0, value - (allowHalf ? .5 : 1));
+	} else if (e.key === "Enter" || e.key === " ") {
+		newValue = index;
+	} else {
+		return;
+	}
+	e.preventDefault();
+	value = newValue;
+	onchange?.(value);
+}
+function getStarState(index) {
+	const currentValue = hoverValue ?? value;
+	if (currentValue >= index) return "full";
+	if (allowHalf && currentValue >= index - .5) return "half";
+	return "empty";
+}
+</script>
+
+<div 
+    class={twMerge(styles.base() as string, className)} 
+    onmouseleave={handleMouseLeave}
+    {...restProps}
+    role="radiogroup"
+>
+    {#each stars as starIndex}
+        {@const state = getStarState(starIndex)}
+        
+        <button
+            type="button"
+            role="radio"
+            aria-checked={value >= starIndex}
+            aria-label={`Rate ${starIndex} out of ${max} stars`}
+            class={styles.starWrapper() as string}
+            disabled={disabled || readonly}
+            tabindex={disabled || readonly ? -1 : 0}
+            onmousemove={(e) => handleMouseMove(e, starIndex)}
+            onclick={() => handleClick(starIndex)}
+            onkeydown={(e) => handleKeyDown(e, starIndex)}
+        >
+            {#if state === 'full'}
+                <Icon name={iconFull} class={twMerge(styles.star() as string, activeColor)} />
+            {:else if state === 'half'}
+                <!-- Simple half star implementation using CSS clip-path or two icons -->
+                <div class="relative">
+                    <Icon name={iconEmpty} class={twMerge(styles.star() as string, inactiveColor)} />
+                    <div class="absolute inset-0 overflow-hidden w-1/2">
+                        <Icon name={iconFull} class={twMerge(styles.star() as string, activeColor)} />
+                    </div>
+                </div>
+            {:else}
+                <Icon name={iconEmpty} class={twMerge(styles.star() as string, inactiveColor)} />
+            {/if}
+        </button>
+    {/each}
+</div>

package/dist/Rating/Rating.svelte.d.ts

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

package/dist/Rating/index.d.ts

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

package/dist/Rating/index.js

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

package/dist/Rating/rating.types.d.ts

@@ -0,0 +1,59 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { RatingVariantProps } from './rating.variants.js';
+export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+    /**
+     * The current rating value.
+     */
+    value?: number;
+    /**
+     * The maximum rating value (number of stars).
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Size of the stars.
+     * @default 'md'
+     */
+    size?: RatingVariantProps['size'];
+    /**
+     * Whether the rating allows half-star selection.
+     * @default false
+     */
+    allowHalf?: boolean;
+    /**
+     * Whether the rating is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the rating is read-only (cannot be changed by user).
+     */
+    readonly?: boolean;
+    /**
+     * Icon to use for the full star.
+     * @default 'lucide:star'
+     */
+    iconFull?: string;
+    /**
+     * Icon to use for the empty star.
+     * @default 'lucide:star'
+     */
+    iconEmpty?: string;
+    /**
+     * Color class for the active/filled stars.
+     * @default 'text-warning-500 fill-warning-500'
+     */
+    activeColor?: string;
+    /**
+     * Color class for the inactive/empty stars.
+     * @default 'text-surface-300 dark:text-surface-600'
+     */
+    inactiveColor?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Event fired when the rating changes.
+     */
+    onchange?: (value: number) => void;
+}

package/dist/Rating/rating.types.js

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

package/dist/Rating/rating.variants.d.ts

@@ -0,0 +1,93 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const ratingVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            star: string;
+        };
+        md: {
+            star: string;
+        };
+        lg: {
+            star: string;
+        };
+        xl: {
+            star: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            starWrapper: string;
+        };
+    };
+    readonly: {
+        true: {
+            starWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    starWrapper: string;
+    star: string;
+}, undefined, {
+    size: {
+        sm: {
+            star: string;
+        };
+        md: {
+            star: string;
+        };
+        lg: {
+            star: string;
+        };
+        xl: {
+            star: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            starWrapper: string;
+        };
+    };
+    readonly: {
+        true: {
+            starWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    starWrapper: string;
+    star: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            star: string;
+        };
+        md: {
+            star: string;
+        };
+        lg: {
+            star: string;
+        };
+        xl: {
+            star: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+            starWrapper: string;
+        };
+    };
+    readonly: {
+        true: {
+            starWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    starWrapper: string;
+    star: string;
+}, undefined, unknown, unknown, undefined>>;
+export type RatingVariantProps = VariantProps<typeof ratingVariants>;

package/dist/Rating/rating.variants.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const ratingVariants = tv({
+    slots: {
+        base: 'flex items-center gap-1',
+        starWrapper: 'relative cursor-pointer transition-transform hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full',
+        star: 'transition-colors duration-200'
+    },
+    variants: {
+        size: {
+            sm: { star: 'w-4 h-4' },
+            md: { star: 'w-5 h-5' },
+            lg: { star: 'w-6 h-6' },
+            xl: { star: 'w-8 h-8' }
+        },
+        disabled: {
+            true: {
+                base: 'opacity-50 cursor-not-allowed',
+                starWrapper: 'cursor-not-allowed hover:scale-100'
+            }
+        },
+        readonly: {
+            true: {
+                starWrapper: 'cursor-default hover:scale-100'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        disabled: false,
+        readonly: false
+    }
+});

package/dist/Resizable/Resizable.svelte

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

package/dist/Resizable/Resizable.svelte.d.ts

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

package/dist/Resizable/index.d.ts

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

package/dist/Resizable/index.js

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

package/dist/Resizable/resizable.types.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ResizableVariantProps } from './resizable.variants.js';
+export interface ResizableProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The direction in which the element can be resized.
+     * @default 'both'
+     */
+    direction?: ResizableVariantProps['direction'];
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Content inside the resizable container.
+     */
+    children?: Snippet;
+}

package/dist/Resizable/resizable.types.js

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

package/dist/Resizable/resizable.variants.d.ts

@@ -0,0 +1,48 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const resizableVariants: import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, undefined, {
+    direction: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+        both: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    handle: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ResizableVariantProps = VariantProps<typeof resizableVariants>;

package/dist/Resizable/resizable.variants.js

@@ -0,0 +1,17 @@
+import { tv } from 'tailwind-variants';
+export const resizableVariants = tv({
+    slots: {
+        base: 'relative overflow-auto border border-outline-variant bg-surface-50 dark:bg-surface-900',
+        handle: 'absolute right-0 bottom-0 w-4 h-4 cursor-se-resize flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity'
+    },
+    variants: {
+        direction: {
+            horizontal: { base: 'resize-x' },
+            vertical: { base: 'resize-y' },
+            both: { base: 'resize' }
+        }
+    },
+    defaultVariants: {
+        direction: 'both'
+    }
+});

package/dist/ScrollArea/ScrollArea.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { scrollAreaVariants } from "./scroll-area.variants.js";
+let { orientation = "vertical", hideScrollbar = false, class: className, viewportClass, children, ...restProps } = $props();
+let styles = $derived(scrollAreaVariants({
+	orientation,
+	hideScrollbar
+}));
+</script>
+
+<div class={twMerge(styles.root(), className)} {...restProps}>
+    <div 
+        class={twMerge(
+            styles.viewport(), 
+            !hideScrollbar && 'svelora-scrollbar',
+            viewportClass
+        )}
+        data-orientation={orientation}
+    >
+        {@render children?.()}
+    </div>
+</div>
+
+<style>
+    /* Custom scrollbar styling for Webkit browsers */
+    :global(.svelora-scrollbar::-webkit-scrollbar) {
+        width: 6px;
+        height: 6px;
+    }
+    :global(.svelora-scrollbar::-webkit-scrollbar-track) {
+        background: transparent;
+    }
+    :global(.svelora-scrollbar::-webkit-scrollbar-thumb) {
+        background-color: var(--color-outline-variant, rgba(156, 163, 175, 0.5));
+        border-radius: 9999px;
+    }
+    :global(.svelora-scrollbar::-webkit-scrollbar-thumb:hover) {
+        background-color: var(--color-outline, rgba(107, 114, 128, 0.8));
+    }
+    
+    /* Firefox support */
+    :global(.svelora-scrollbar) {
+        scrollbar-width: thin;
+        scrollbar-color: var(--color-outline-variant, rgba(156, 163, 175, 0.5)) transparent;
+    }
+    
+    /* Hide scrollbar utility */
+    :global(.scrollbar-none::-webkit-scrollbar) {
+        display: none;
+    }
+    :global(.scrollbar-none) {
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+    }
+</style>

package/dist/ScrollArea/ScrollArea.svelte.d.ts

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

package/dist/ScrollArea/index.d.ts

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

package/dist/ScrollArea/index.js

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

package/dist/ScrollArea/scroll-area.types.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ScrollAreaVariantProps } from './scroll-area.variants.js';
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Orientation of the scrolling area.
+     * @default 'vertical'
+     */
+    orientation?: ScrollAreaVariantProps['orientation'];
+    /**
+     * Whether to hide the scrollbar track/thumb completely while still allowing scrolling.
+     * @default false
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Additional CSS classes for the root container.
+     */
+    class?: string;
+    /**
+     * Additional CSS classes for the viewport (the scrollable area).
+     */
+    viewportClass?: string;
+    /**
+     * Content to be scrolled.
+     */
+    children?: Snippet;
+}

package/dist/ScrollArea/scroll-area.types.js

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

package/dist/ScrollArea/scroll-area.variants.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const scrollAreaVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+        both: string;
+    };
+    hideScrollbar: {
+        true: {
+            viewport: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+}, undefined, {
+    orientation: {
+        vertical: string;
+        horizontal: string;
+        both: string;
+    };
+    hideScrollbar: {
+        true: {
+            viewport: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string;
+        both: string;
+    };
+    hideScrollbar: {
+        true: {
+            viewport: string;
+        };
+    };
+}, {
+    root: string;
+    viewport: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ScrollAreaVariantProps = VariantProps<typeof scrollAreaVariants>;

package/dist/ScrollArea/scroll-area.variants.js

@@ -0,0 +1,27 @@
+import { tv } from 'tailwind-variants';
+export const scrollAreaVariants = tv({
+    slots: {
+        root: 'relative overflow-hidden',
+        viewport: 'h-full w-full rounded-[inherit] overflow-auto'
+        // Note: For actual custom scrollbars without a JS library, we can use
+        // global CSS webkit scrollbar styles or a plugin.
+        // Here we just define standard utility classes to hide or style them if Tailwind scrollbar plugin is used.
+        // We'll add a custom class `svelora-scrollbar` to be styled in global css if needed.
+    },
+    variants: {
+        orientation: {
+            vertical: '',
+            horizontal: '',
+            both: ''
+        },
+        hideScrollbar: {
+            true: {
+                viewport: 'scrollbar-none' // Requires tailwind-scrollbar plugin or custom CSS
+            }
+        }
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+        hideScrollbar: false
+    }
+});