sv5ui-plus 4.0.0

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

@@ -0,0 +1,111 @@
+import type { ClassNameValue } from 'tailwind-merge';
+import type { InputProps } from 'sv5ui';
+import type { PasswordInputSlots, PasswordInputVariantProps } from './password-input.variants.js';
+/**
+ * All slots available for class overrides in PasswordInput.
+ * Combines PasswordInput-specific slots with a subset of the inner
+ * Input's slots that are safe to forward.
+ */
+export type PasswordInputUISlots = PasswordInputSlots
+/** Root wrapper of the inner `<Input>` component. */
+ | 'inputRoot'
+/** The `<input>` element base class inside the inner `<Input>`. */
+ | 'base' | 'leading' | 'leadingIcon' | 'trailing' | 'trailingIcon';
+export type PasswordInputProps = Omit<InputProps, 'type'> & {
+    /**
+     * Bind a reference to the underlying HTMLInputElement.
+     */
+    ref?: HTMLInputElement | null;
+    /**
+     * Whether to show the password strength meter below the input.
+     * @default false
+     */
+    showStrength?: boolean;
+    /**
+     * Custom function to calculate password strength.
+     * Should return a number from 0 (Very Weak) to 4 (Strong).
+     * Falls back to the built-in heuristic when not provided.
+     */
+    strengthFn?: (password: string) => number;
+    /**
+     * Labels for the five strength levels, indexed 0–4.
+     * @default ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong']
+     */
+    strengthLabels?: [string, string, string, string, string];
+    /**
+     * Iconify icon name to use for each strength meter segment instead of the
+     * default filled bar. When set, four icons are rendered side-by-side and
+     * coloured by strength level.
+     *
+     * @example 'lucide:star'    // ★ ★ ☆ ☆
+     * @example 'lucide:shield'  // shields
+     * @example 'ph:lock-fill'   // locks
+     * @example 'lucide:circle'  // circles
+     */
+    segmentIcon?: string;
+    /**
+     * Custom Unicode character to display as mask symbol instead of the default bullet (•).
+     * Works natively with password input selection, focus caret, and accessibility.
+     *
+     * @example '✦'
+     * @example '★'
+     * @example '●'
+     * @example '*'
+     */
+    maskChar?: string;
+    /**
+     * Icon to display when the password is hidden (eye-off state).
+     * Supports any valid Iconify icon name.
+     * @default 'lucide:eye-off'
+     */
+    hideIcon?: string;
+    /**
+     * Icon to display when the password is visible (eye state).
+     * Supports any valid Iconify icon name.
+     * @default 'lucide:eye'
+     */
+    showIcon?: string;
+    /**
+     * Accessible label for the toggle button when password is visible (clicking will hide it).
+     * @default 'Hide password'
+     */
+    hideLabel?: string;
+    /**
+     * Accessible label for the toggle button when password is hidden (clicking will show it).
+     * @default 'Show password'
+     */
+    showLabel?: string;
+    /**
+     * Controls the dimensions and text size of the field.
+     * Also scales the toggle button icon and strength meter segments to match.
+     * @default 'md'
+     */
+    size?: NonNullable<PasswordInputVariantProps['size']>;
+    /**
+     * Controls the visual style of the input field.
+     * Mirrors `<Input>` variants — the value is forwarded directly to the inner Input.
+     * @default 'outline'
+     */
+    variant?: NonNullable<InputProps['variant']>;
+    /**
+     * Sets the color scheme for focus ring and highlight.
+     * Also applied to the toggle button's focus ring for visual consistency.
+     * Automatically overridden with `'error'` when inside a FormField with an error.
+     * @default 'primary'
+     */
+    color?: NonNullable<InputProps['color']>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific slots.
+     *
+     * **PasswordInput slots:** `root`, `inputWrapper`, `toggleBtn`, `toggleIcon`,
+     * `meterWrapper`, `meterSegment`, `meterIcon`, `strengthText`.
+     *
+     * **Inner Input slots:** `base`, `inputRoot`, `leading`, `leadingIcon`,
+     * `trailing`, `trailingIcon`.
+     */
+    ui?: Partial<Record<PasswordInputUISlots, ClassNameValue>>;
+};

package/dist/components/PasswordInput/password-input.types.js

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

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

@@ -0,0 +1,273 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const passwordInputVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        sm: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        md: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        lg: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        xl: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+    };
+    color: {
+        primary: {
+            toggleBtn: string;
+        };
+        secondary: {
+            toggleBtn: string;
+        };
+        tertiary: {
+            toggleBtn: string;
+        };
+        success: {
+            toggleBtn: string;
+        };
+        warning: {
+            toggleBtn: string;
+        };
+        error: {
+            toggleBtn: string;
+        };
+        info: {
+            toggleBtn: string;
+        };
+        surface: {
+            toggleBtn: string;
+        };
+    };
+    variant: {
+        outline: {};
+        soft: {};
+        subtle: {};
+        ghost: {};
+        none: {};
+    };
+}, {
+    root: string;
+    inputWrapper: string;
+    toggleBtn: string[];
+    toggleIcon: string;
+    meterWrapper: string;
+    meterSegment: string;
+    meterIcon: string;
+    strengthText: string;
+    maskOverlay: string[];
+    maskIconItem: string;
+}, undefined, {
+    size: {
+        xs: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        sm: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        md: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        lg: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        xl: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+    };
+    color: {
+        primary: {
+            toggleBtn: string;
+        };
+        secondary: {
+            toggleBtn: string;
+        };
+        tertiary: {
+            toggleBtn: string;
+        };
+        success: {
+            toggleBtn: string;
+        };
+        warning: {
+            toggleBtn: string;
+        };
+        error: {
+            toggleBtn: string;
+        };
+        info: {
+            toggleBtn: string;
+        };
+        surface: {
+            toggleBtn: string;
+        };
+    };
+    variant: {
+        outline: {};
+        soft: {};
+        subtle: {};
+        ghost: {};
+        none: {};
+    };
+}, {
+    root: string;
+    inputWrapper: string;
+    toggleBtn: string[];
+    toggleIcon: string;
+    meterWrapper: string;
+    meterSegment: string;
+    meterIcon: string;
+    strengthText: string;
+    maskOverlay: string[];
+    maskIconItem: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        sm: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        md: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        lg: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+        xl: {
+            toggleBtn: string;
+            toggleIcon: string;
+            meterSegment: string;
+            meterIcon: string;
+            maskOverlay: string;
+            maskIconItem: string;
+        };
+    };
+    color: {
+        primary: {
+            toggleBtn: string;
+        };
+        secondary: {
+            toggleBtn: string;
+        };
+        tertiary: {
+            toggleBtn: string;
+        };
+        success: {
+            toggleBtn: string;
+        };
+        warning: {
+            toggleBtn: string;
+        };
+        error: {
+            toggleBtn: string;
+        };
+        info: {
+            toggleBtn: string;
+        };
+        surface: {
+            toggleBtn: string;
+        };
+    };
+    variant: {
+        outline: {};
+        soft: {};
+        subtle: {};
+        ghost: {};
+        none: {};
+    };
+}, {
+    root: string;
+    inputWrapper: string;
+    toggleBtn: string[];
+    toggleIcon: string;
+    meterWrapper: string;
+    meterSegment: string;
+    meterIcon: string;
+    strengthText: string;
+    maskOverlay: string[];
+    maskIconItem: string;
+}>>;
+export type PasswordInputVariantProps = VariantProps<typeof passwordInputVariants>;
+export type PasswordInputSlots = keyof ReturnType<typeof passwordInputVariants>;
+export declare const passwordInputDefaults: {
+    defaultVariants: {
+        color?: "primary" | "surface" | "error" | "secondary" | "tertiary" | "success" | "warning" | "info" | undefined;
+        variant?: "none" | "outline" | "soft" | "subtle" | "ghost" | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    };
+    slots: Partial<Record<PasswordInputSlots, string>>;
+};

package/dist/components/PasswordInput/password-input.variants.js

@@ -0,0 +1,105 @@
+import { tv } from 'tailwind-variants';
+export const passwordInputVariants = tv({
+    slots: {
+        root: 'flex flex-col gap-2 w-full',
+        inputWrapper: 'relative flex items-center w-full',
+        toggleBtn: [
+            'absolute end-0 inset-y-0 flex items-center justify-center',
+            'text-on-surface-variant/75 hover:text-on-surface',
+            'focus:outline-none focus-visible:ring-2 rounded-sm',
+            'transition-colors select-none'
+        ],
+        toggleIcon: 'shrink-0',
+        meterWrapper: 'flex items-center gap-1 w-full mt-1',
+        meterSegment: 'flex-1 rounded-full transition-colors duration-300',
+        meterIcon: 'shrink-0 transition-colors duration-300',
+        strengthText: 'text-xs text-on-surface-variant mt-1 text-right',
+        // maskOverlay covers the transparent input text with icon rows.
+        // ps-* aligns with the input's own horizontal padding;
+        // end-* stops before the toggle button.
+        maskOverlay: [
+            'absolute inset-y-0 start-0 flex items-center',
+            'gap-0.5 overflow-hidden pointer-events-none select-none'
+        ],
+        maskIconItem: 'shrink-0 text-on-surface/80'
+    },
+    variants: {
+        // ==================== SIZE ====================
+        size: {
+            xs: {
+                toggleBtn: 'w-7',
+                toggleIcon: 'size-3.5',
+                meterSegment: 'h-1',
+                meterIcon: 'size-3',
+                maskOverlay: 'ps-2 end-7',
+                maskIconItem: 'size-2'
+            },
+            sm: {
+                toggleBtn: 'w-8',
+                toggleIcon: 'size-4',
+                meterSegment: 'h-1.5',
+                meterIcon: 'size-3.5',
+                maskOverlay: 'ps-2.5 end-8',
+                maskIconItem: 'size-2.5'
+            },
+            md: {
+                toggleBtn: 'w-9',
+                toggleIcon: 'size-5',
+                meterSegment: 'h-1.5',
+                meterIcon: 'size-4',
+                maskOverlay: 'ps-3 end-9',
+                maskIconItem: 'size-3'
+            },
+            lg: {
+                toggleBtn: 'w-10',
+                toggleIcon: 'size-5',
+                meterSegment: 'h-2',
+                meterIcon: 'size-5',
+                maskOverlay: 'ps-4 end-10',
+                maskIconItem: 'size-3.5'
+            },
+            xl: {
+                toggleBtn: 'w-12',
+                toggleIcon: 'size-6',
+                meterSegment: 'h-2',
+                meterIcon: 'size-6',
+                maskOverlay: 'ps-5 end-12',
+                maskIconItem: 'size-4'
+            }
+        },
+        // ==================== COLOR ====================
+        // Controls the toggle button's focus ring color to match the input's color.
+        color: {
+            primary: { toggleBtn: 'focus-visible:ring-primary' },
+            secondary: { toggleBtn: 'focus-visible:ring-secondary' },
+            tertiary: { toggleBtn: 'focus-visible:ring-tertiary' },
+            success: { toggleBtn: 'focus-visible:ring-success' },
+            warning: { toggleBtn: 'focus-visible:ring-warning' },
+            error: { toggleBtn: 'focus-visible:ring-error' },
+            info: { toggleBtn: 'focus-visible:ring-info' },
+            surface: { toggleBtn: 'focus-visible:ring-surface-foreground' }
+        },
+        // ==================== VARIANT ====================
+        // Kept for API symmetry with <Input>; visual differences are handled by
+        // the inner <Input> component. PasswordInput-level slots have no
+        // variant-specific styling by default.
+        variant: {
+            outline: {},
+            soft: {},
+            subtle: {},
+            ghost: {},
+            none: {}
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        variant: 'outline'
+    }
+});
+export const passwordInputDefaults = {
+    defaultVariants: {
+        ...passwordInputVariants.defaultVariants
+    },
+    slots: {}
+};

package/dist/components/Prose/Prose.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import { twMerge } from "tailwind-merge";
+import { proseVariants } from "./prose.variants.js";
+let { size = "base", html, class: className, children, ...restProps } = $props();
+let styles = $derived(proseVariants({ size }));
+</script>
+
+<div class={twMerge(styles.base() as string, className)} {...restProps}>
+    {#if html}
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html html}
+    {/if}
+    {@render children?.()}
+</div>

package/dist/components/Prose/Prose.svelte.d.ts

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

package/dist/components/Prose/index.d.ts

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

package/dist/components/Prose/index.js

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

package/dist/components/Prose/prose.types.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ProseVariantProps } from './prose.variants.js';
+export interface ProseProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the typography text.
+     * @default 'base'
+     */
+    size?: ProseVariantProps['size'];
+    /**
+     * Html string to render. Usually coming from a markdown parser.
+     */
+    html?: string;
+    /**
+     * Additional CSS classes.
+     */
+    class?: string;
+    /**
+     * Content inside the prose container.
+     */
+    children?: Snippet;
+}

package/dist/components/Prose/prose.types.js

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

package/dist/components/Prose/prose.variants.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const proseVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    size: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            base: string;
+        };
+        base: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}>>;
+export type ProseVariantProps = VariantProps<typeof proseVariants>;

package/dist/components/Prose/prose.variants.js

@@ -0,0 +1,45 @@
+import { tv } from 'tailwind-variants';
+export const proseVariants = tv({
+    slots: {
+        base: [
+            'text-surface-900 dark:text-surface-50 max-w-none',
+            // Paragraphs
+            '[&_p]:leading-7 [&_p]:mb-6 [&_p:last-child]:mb-0',
+            // Headings
+            '[&_h1]:text-4xl [&_h1]:font-extrabold [&_h1]:tracking-tight [&_h1]:mt-0 [&_h1]:mb-6',
+            '[&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:tracking-tight [&_h2]:mt-10 [&_h2]:mb-4',
+            '[&_h3]:text-2xl [&_h3]:font-semibold [&_h3]:tracking-tight [&_h3]:mt-8 [&_h3]:mb-4',
+            '[&_h4]:text-xl [&_h4]:font-semibold [&_h4]:tracking-tight [&_h4]:mt-8 [&_h4]:mb-4',
+            // Links
+            '[&_a]:font-medium [&_a]:text-primary-600 dark:[&_a]:text-primary-400 [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary-500',
+            // Blockquotes
+            '[&_blockquote]:mt-6 [&_blockquote]:mb-6 [&_blockquote]:border-l-4 [&_blockquote]:border-primary-500 [&_blockquote]:pl-6 [&_blockquote]:italic [&_blockquote]:text-surface-700 dark:[&_blockquote]:text-surface-300',
+            // Lists
+            '[&_ul]:my-6 [&_ul]:ml-6 [&_ul]:list-disc [&_ul>li]:mt-2',
+            '[&_ol]:my-6 [&_ol]:ml-6 [&_ol]:list-decimal [&_ol>li]:mt-2',
+            // Code & Pre
+            '[&_code]:relative [&_code]:rounded [&_code]:bg-surface-200 dark:[&_code]:bg-surface-800 [&_code]:px-[0.3rem] [&_code]:py-[0.2rem] [&_code]:font-mono [&_code]:text-sm [&_code]:font-semibold',
+            '[&_pre]:mb-6 [&_pre]:mt-6 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-surface-900 [&_pre]:py-4 [&_pre]:dark:bg-surface-800',
+            '[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-surface-50 [&_pre_code]:font-normal',
+            // Images & Media
+            '[&_img]:rounded-lg [&_img]:border [&_img]:border-outline-variant [&_video]:rounded-lg',
+            // Tables
+            '[&_table]:w-full [&_table]:my-6 [&_table]:overflow-y-auto [&_table]:text-left',
+            '[&_th]:border [&_th]:border-outline-variant [&_th]:px-4 [&_th]:py-2 [&_th]:font-semibold [&_th]:bg-surface-100 dark:[&_th]:bg-surface-800',
+            '[&_td]:border [&_td]:border-outline-variant [&_td]:px-4 [&_td]:py-2',
+            '[&_tr:nth-child(even)]:bg-surface-50 dark:[&_tr:nth-child(even)]:bg-surface-900/50',
+            // HR
+            '[&_hr]:my-8 [&_hr]:border-outline-variant'
+        ]
+    },
+    variants: {
+        size: {
+            sm: { base: 'text-sm [&_h1]:text-3xl [&_h2]:text-2xl [&_h3]:text-xl' },
+            base: { base: 'text-base' },
+            lg: { base: 'text-lg [&_h1]:text-5xl [&_h2]:text-4xl [&_h3]:text-3xl' }
+        }
+    },
+    defaultVariants: {
+        size: 'base'
+    }
+});

package/dist/components/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/components/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/components/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/components/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/components/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;
+}