svelora 3.0.6 → 3.0.7

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
+    }
+});

package/dist/Sidebar/Sidebar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { setContext } from "svelte";
+import { sidebarVariants } from "./sidebar.variants.js";
+let { collapsed = false, position = "left", class: className, header, footer, children, ...restProps } = $props();
+let styles = $derived(sidebarVariants({
+	collapsed,
+	position
+}));
+// Provide context to children (like Menu) so they know if sidebar is collapsed
+// Useful if we want the Menu to hide labels when collapsed
+setContext("sidebar-collapsed", () => collapsed);
+</script>
+
+<aside class={twMerge(styles.base(), className)} {...restProps}>
+    {#if header}
+        <div class={styles.header()}>
+            {@render header()}
+        </div>
+    {/if}
+
+    <div class={styles.content()}>
+        {@render children?.()}
+    </div>
+
+    {#if footer}
+        <div class={styles.footer()}>
+            {@render footer()}
+        </div>
+    {/if}
+</aside>

package/dist/Sidebar/Sidebar.svelte.d.ts

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

package/dist/Sidebar/index.d.ts

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

package/dist/Sidebar/index.js

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

package/dist/Sidebar/sidebar.types.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SidebarVariantProps } from './sidebar.variants.js';
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Whether the sidebar is collapsed (icons only).
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * Position of the sidebar.
+     * @default 'left'
+     */
+    position?: SidebarVariantProps['position'];
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Snippet for the top header section (e.g. Logo).
+     */
+    header?: Snippet;
+    /**
+     * Snippet for the main content (e.g. Navigation Menu).
+     */
+    children?: Snippet;
+    /**
+     * Snippet for the bottom footer section (e.g. User Profile).
+     */
+    footer?: Snippet;
+}

package/dist/Sidebar/sidebar.types.js

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

package/dist/Sidebar/sidebar.variants.d.ts

@@ -0,0 +1,69 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const sidebarVariants: import("tailwind-variants").TVReturnType<{
+    position: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+    collapsed: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    content: string;
+    footer: string;
+}, undefined, {
+    position: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+    collapsed: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    content: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+    collapsed: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    content: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SidebarVariantProps = VariantProps<typeof sidebarVariants>;

package/dist/Sidebar/sidebar.variants.js

@@ -0,0 +1,23 @@
+import { tv } from 'tailwind-variants';
+export const sidebarVariants = tv({
+    slots: {
+        base: 'flex flex-col h-full bg-surface-50 dark:bg-surface-900 border-outline-variant text-surface-900 dark:text-surface-50 transition-all duration-300',
+        header: 'flex items-center px-4 h-16 shrink-0 border-b border-outline-variant',
+        content: 'flex-1 overflow-y-auto px-3 py-4',
+        footer: 'p-4 mt-auto border-t border-outline-variant shrink-0'
+    },
+    variants: {
+        position: {
+            left: { base: 'border-r' },
+            right: { base: 'border-l' }
+        },
+        collapsed: {
+            true: { base: 'w-16' },
+            false: { base: 'w-64' }
+        }
+    },
+    defaultVariants: {
+        position: 'left',
+        collapsed: false
+    }
+});

package/dist/Spotlight/Spotlight.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { spotlightVariants } from "./spotlight.variants.js";
+let { size = 400, color = "rgba(255, 255, 255, 0.1)", class: className, children, ...restProps } = $props();
+let styles = $derived(spotlightVariants());
+let mouseX = $state(0);
+let mouseY = $state(0);
+function handleMouseMove(e) {
+	const target = e.currentTarget;
+	const rect = target.getBoundingClientRect();
+	mouseX = e.clientX - rect.left;
+	mouseY = e.clientY - rect.top;
+}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div 
+    class={twMerge(styles.root() as string, className)}
+    onmousemove={handleMouseMove}
+    {...restProps}
+>
+    <!-- Spotlight Effect Background -->
+    <div 
+        class={styles.spotlight() as string}
+        style:background={`radial-gradient(${size}px circle at ${mouseX}px ${mouseY}px, ${color}, transparent 80%)`}
+    ></div>
+
+    <!-- Content -->
+    <div class={styles.content() as string}>
+        {@render children?.()}
+    </div>
+</div>

package/dist/Spotlight/Spotlight.svelte.d.ts

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

package/dist/Spotlight/index.d.ts

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

package/dist/Spotlight/index.js

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

package/dist/Spotlight/spotlight.types.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the spotlight in pixels.
+     * @default 400
+     */
+    size?: number;
+    /**
+     * Color of the spotlight in rgba, hex, or CSS variable.
+     * @default 'rgba(255, 255, 255, 0.1)'
+     */
+    color?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Content to render inside the spotlight container.
+     */
+    children?: Snippet;
+}

package/dist/Spotlight/spotlight.types.js

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