sv5ui-plus 5.0.4 → 5.0.5

package/README.md

@@ -21,14 +21,14 @@ Import core UI from SV5UI and addons from SV5UI Plus:
 ```svelte
 <script lang="ts">
   import { Button, Icon } from 'sv5ui'
-  import { ColorPicker, ConfirmDialog, Search } from 'sv5ui-plus'
+  import { ConfirmDialog, Search } from 'sv5ui-plus'
 </script>
 ```
 
 For an incremental migration from Svelora, `sv5ui-plus/compat` re-exports SV5UI together with SV5UI Plus addons:
 
 ```ts
-import { Button, ColorPicker } from 'sv5ui-plus/compat'
+import { Button, ConfirmDialog } from 'sv5ui-plus/compat'
 ```
 
 New code should use the explicit `sv5ui` and `sv5ui-plus` imports.
@@ -36,8 +36,8 @@ New code should use the explicit `sv5ui` and `sv5ui-plus` imports.
 ## Addons
 
 - Content and display: `BentoGrid`, `Chart`, `Chat`, `CodeBlock`, `Fonts`, `List`, `Marquee`, `NumberTicker`, `Prose`, `Spotlight`
-- Forms and overlays: `ColorPicker`, `ConfirmDialog`, `LocaleButton`, `PasswordInput`, `Search`
-- Layout and data: `Resizable`, `ScrollArea`, `SafeTable`, `TableBulkActionBar`, `TreeView`
+- Forms and overlays: `ConfirmDialog`, `LocaleButton`, `PasswordInput`, `Search`
+- Layout and data: `Resizable`, `SafeTable`, `TableBulkActionBar`, `TreeView`
 - Forms: `FormSelect`, `DatePickerField`, `DateRangePickerField`, `PasswordInput`
 - Drag and drop: `SortableGroup`, `SortableList`, `useDragDrop`, `useSortable`
 - SvelteKit adapter: `SvelteKitNavigationMenu`

package/dist/components/PasswordInput/password-input.variants.d.ts

@@ -265,7 +265,7 @@ export type PasswordInputVariantProps = VariantProps<typeof passwordInputVariant
 export type PasswordInputSlots = keyof ReturnType<typeof passwordInputVariants>;
 export declare const passwordInputDefaults: {
     defaultVariants: {
-        color?: "primary" | "surface" | "error" | "secondary" | "tertiary" | "success" | "warning" | "info" | undefined;
+        color?: "primary" | "surface" | "error" | "warning" | "info" | "success" | "secondary" | "tertiary" | undefined;
         variant?: "none" | "outline" | "soft" | "subtle" | "ghost" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     };

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export * from './components/BentoGrid/index.js';
 export * from './components/Chart/index.js';
 export * from './components/Chat/index.js';
 export * from './components/CodeBlock/index.js';
-export * from './components/ColorPicker/index.js';
 export * from './components/ConfirmDialog/index.js';
 export * from './components/DatePickerField/index.js';
 export * from './components/DateRangePickerField/index.js';
@@ -16,7 +15,6 @@ export * from './components/NumberTicker/index.js';
 export * from './components/PasswordInput/index.js';
 export * from './components/Prose/index.js';
 export * from './components/Resizable/index.js';
-export * from './components/ScrollArea/index.js';
 export * from './components/Search/index.js';
 export * from './components/SortableGroup/index.js';
 export * from './components/SortableList/index.js';

package/dist/index.js

@@ -3,7 +3,6 @@ export * from './components/BentoGrid/index.js';
 export * from './components/Chart/index.js';
 export * from './components/Chat/index.js';
 export * from './components/CodeBlock/index.js';
-export * from './components/ColorPicker/index.js';
 export * from './components/ConfirmDialog/index.js';
 export * from './components/DatePickerField/index.js';
 export * from './components/DateRangePickerField/index.js';
@@ -17,7 +16,6 @@ export * from './components/NumberTicker/index.js';
 export * from './components/PasswordInput/index.js';
 export * from './components/Prose/index.js';
 export * from './components/Resizable/index.js';
-export * from './components/ScrollArea/index.js';
 export * from './components/Search/index.js';
 export * from './components/SortableGroup/index.js';
 export * from './components/SortableList/index.js';

package/dist/mcp/sv5ui-plus-docs.data.json

@@ -1,8 +1,8 @@
 {
   "version": 1,
   "packageName": "sv5ui-plus",
-  "packageVersion": "5.0.4",
-  "generatedAt": "2026-08-20T08:57:41.119Z",
+  "packageVersion": "5.0.5",
+  "generatedAt": "2026-08-26T00:15:54.432Z",
   "slugs": {
     "components": [],
     "hooks": [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sv5ui-plus",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "description": "Community companion components and hooks for SV5UI and Svelte 5",
     "packageManager": "bun@1.3.14",
     "author": "asphum",
@@ -120,19 +120,19 @@
         }
     },
     "devDependencies": {
-        "@biomejs/biome": "2.5.9",
+        "@biomejs/biome": "2.5.10",
         "@inlang/paraglide-js": "^2.24.1",
         "@sveltejs/adapter-vercel": "^6.3.4",
         "@sveltejs/kit": "^2.70.3",
         "@sveltejs/package": "^2.5.8",
         "@sveltejs/vite-plugin-svelte": "^7.3.0",
         "@tailwindcss/vite": "^4.3.3",
-        "@types/node": "^26.2.0",
+        "@types/node": "^26.3.0",
         "@vitest/browser-playwright": "^4.1.11",
         "playwright": "^1.62.1",
         "publint": "^0.3.24",
-        "sv5ui": "^2.5.0",
-        "svelte": "^5.56.9",
+        "sv5ui": "^2.6.1",
+        "svelte": "^5.56.10",
         "svelte-check": "^4.7.6",
         "tailwindcss": "^4.3.3",
         "typescript": "6.0.3",
@@ -163,7 +163,7 @@
         "@dnd-kit/svelte": "^0.5.0",
         "@internationalized/date": "^3.12.3",
         "@modelcontextprotocol/sdk": "^1.30.0",
-        "apexcharts": "^6.10.0",
+        "apexcharts": "^7.0.0",
         "bits-ui": "^2.19.0",
         "shiki": "^4.4.3",
         "tailwind-merge": "^3.6.0",

package/dist/components/ColorPicker/ColorPicker.svelte

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

@@ -1,4 +0,0 @@
-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/components/ColorPicker/color-picker.types.d.ts

@@ -1,26 +0,0 @@
-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/components/ColorPicker/color-picker.types.js

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

package/dist/components/ColorPicker/color-picker.variants.d.ts

@@ -1,69 +0,0 @@
-import { type VariantProps } from 'tailwind-variants';
-export declare const colorPickerVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            colorIndicator?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            swatchGrid?: import("tailwind-variants").ClassValue;
-            swatch?: import("tailwind-variants").ClassValue;
-            nativeInput?: import("tailwind-variants").ClassValue;
-            hexInputWrapper?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            colorIndicator?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            swatchGrid?: import("tailwind-variants").ClassValue;
-            swatch?: import("tailwind-variants").ClassValue;
-            nativeInput?: import("tailwind-variants").ClassValue;
-            hexInputWrapper?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    base: string;
-    trigger: string;
-    colorIndicator: string;
-    content: string;
-    swatchGrid: string;
-    swatch: string;
-    nativeInput: string;
-    hexInputWrapper: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            colorIndicator?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            swatchGrid?: import("tailwind-variants").ClassValue;
-            swatch?: import("tailwind-variants").ClassValue;
-            nativeInput?: import("tailwind-variants").ClassValue;
-            hexInputWrapper?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    base: string;
-    trigger: string;
-    colorIndicator: string;
-    content: string;
-    swatchGrid: string;
-    swatch: string;
-    nativeInput: string;
-    hexInputWrapper: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    trigger: string;
-    colorIndicator: string;
-    content: string;
-    swatchGrid: string;
-    swatch: string;
-    nativeInput: string;
-    hexInputWrapper: string;
-}>>;
-export type ColorPickerVariantProps = VariantProps<typeof colorPickerVariants>;

package/dist/components/ColorPicker/color-picker.variants.js

@@ -1,13 +0,0 @@
-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/components/ColorPicker/index.d.ts

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

package/dist/components/ColorPicker/index.js

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

package/dist/components/ScrollArea/ScrollArea.svelte

@@ -1,54 +0,0 @@
-<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 && 'sv5ui-plus-scrollbar',
-            viewportClass
-        )}
-        data-orientation={orientation}
-    >
-        {@render children?.()}
-    </div>
-</div>
-
-<style>
-    /* Custom scrollbar styling for Webkit browsers */
-    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar) {
-        width: 6px;
-        height: 6px;
-    }
-    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar-track) {
-        background: transparent;
-    }
-    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar-thumb) {
-        background-color: var(--color-outline-variant, rgba(156, 163, 175, 0.5));
-        border-radius: 9999px;
-    }
-    :global(.sv5ui-plus-scrollbar::-webkit-scrollbar-thumb:hover) {
-        background-color: var(--color-outline, rgba(107, 114, 128, 0.8));
-    }
-    
-    /* Firefox support */
-    :global(.sv5ui-plus-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/components/ScrollArea/ScrollArea.svelte.d.ts

@@ -1,4 +0,0 @@
-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/components/ScrollArea/index.d.ts

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

package/dist/components/ScrollArea/index.js

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

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

@@ -1,27 +0,0 @@
-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/components/ScrollArea/scroll-area.types.js

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

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

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

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

@@ -1,27 +0,0 @@
-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 `sv5ui-plus-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
-    }
-});