sv5ui-plus 5.0.4 → 5.0.6

package/dist/components/NumberTicker/number-ticker.variants.js

@@ -1,6 +1,6 @@
-import { tv } from 'tailwind-variants';
+import { tv } from "tailwind-variants";
 export const numberTickerVariants = tv({
     slots: {
-        base: 'inline-block font-mono tracking-wider tabular-nums text-surface-900 dark:text-surface-50'
-    }
+        base: "inline-block font-mono tracking-wider tabular-nums text-surface-900 dark:text-surface-50",
+    },
 });

package/dist/components/PasswordInput/PasswordInput.svelte

@@ -119,64 +119,64 @@ const classes = $derived({
 </script>
 
 <div class={classes.root}>
-    {#if useMaskChar && name}
-        <input type="hidden" {name} value={value ?? ''} />
-    {/if}
-    <div class={classes.inputWrapper}>
-        <Input
-            {...restProps}
-            bind:ref
-            name={useMaskChar ? undefined : name}
-            value={useMaskChar ? displayValue : value}
-            {size}
-            {color}
-            {variant}
-            type={useMaskChar || isVisible ? 'text' : 'password'}
-            class="w-full"
-            oninput={handleInput}
-            ui={{
-                base: ui?.base,
-                root: ui?.inputRoot,
-                leading: ui?.leading,
-                leadingIcon: ui?.leadingIcon,
-                trailing: ui?.trailing,
-                trailingIcon: ui?.trailingIcon
-            }}
-            trailing
-        />
+	{#if useMaskChar && name}
+		<input type="hidden" {name} value={value ?? ""} />
+	{/if}
+	<div class={classes.inputWrapper}>
+		<Input
+			{...restProps}
+			bind:ref
+			name={useMaskChar ? undefined : name}
+			value={useMaskChar ? displayValue : value}
+			{size}
+			{color}
+			{variant}
+			type={useMaskChar || isVisible ? "text" : "password"}
+			class="w-full"
+			oninput={handleInput}
+			ui={{
+				base: ui?.base,
+				root: ui?.inputRoot,
+				leading: ui?.leading,
+				leadingIcon: ui?.leadingIcon,
+				trailing: ui?.trailing,
+				trailingIcon: ui?.trailingIcon,
+			}}
+			trailing
+		/>
 
-        <button
-            type="button"
-            class={classes.toggleBtn}
-            onclick={toggleVisibility}
-            aria-label={isVisible ? hideLabel : showLabel}
-            aria-pressed={isVisible}
-        >
-            {#if isVisible}
-                <Icon name={hideIcon} class={classes.toggleIcon} />
-            {:else}
-                <Icon name={showIcon} class={classes.toggleIcon} />
-            {/if}
-        </button>
-    </div>
+		<button
+			type="button"
+			class={classes.toggleBtn}
+			onclick={toggleVisibility}
+			aria-label={isVisible ? hideLabel : showLabel}
+			aria-pressed={isVisible}
+		>
+			{#if isVisible}
+				<Icon name={hideIcon} class={classes.toggleIcon} />
+			{:else}
+				<Icon name={showIcon} class={classes.toggleIcon} />
+			{/if}
+		</button>
+	</div>
 
-    {#if showStrength && String(value ?? '').length > 0}
-        <div>
-            <div class={classes.meterWrapper}>
-                {#each { length: 4 } as _, i (i)}
-                    {#if segmentIcon}
-                        <Icon
-                            name={segmentIcon}
-                            class="{classes.meterIcon} {getSegmentTextColor(i, strength)}"
-                        />
-                    {:else}
-                        <div class="{classes.meterSegment} {getSegmentBgColor(i, strength)}"></div>
-                    {/if}
-                {/each}
-            </div>
-            <p class={classes.strengthText}>
-                {strengthLabels[Math.max(0, strength)]}
-            </p>
-        </div>
-    {/if}
+	{#if showStrength && String(value ?? "").length > 0}
+		<div>
+			<div class={classes.meterWrapper}>
+				{#each { length: 4 } as _, i (i)}
+					{#if segmentIcon}
+						<Icon
+							name={segmentIcon}
+							class="{classes.meterIcon} {getSegmentTextColor(i, strength)}"
+						/>
+					{:else}
+						<div class="{classes.meterSegment} {getSegmentBgColor(i, strength)}"></div>
+					{/if}
+				{/each}
+			</div>
+			<p class={classes.strengthText}>
+				{strengthLabels[Math.max(0, strength)]}
+			</p>
+		</div>
+	{/if}
 </div>

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

@@ -1,4 +1,4 @@
-import type { PasswordInputProps } from './password-input.types.js';
+import type { PasswordInputProps } from "./password-input.types.js";
 export type Props = PasswordInputProps;
 declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "value" | "ref">;
 type PasswordInput = ReturnType<typeof PasswordInput>;

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

@@ -1,2 +1,2 @@
-export { default as PasswordInput } from './PasswordInput.svelte';
-export type { PasswordInputProps } from './password-input.types.js';
+export { default as PasswordInput } from "./PasswordInput.svelte";
+export type { PasswordInputProps } from "./password-input.types.js";

package/dist/components/PasswordInput/index.js

@@ -1 +1 @@
-export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as PasswordInput } from "./PasswordInput.svelte";

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

@@ -1,6 +1,6 @@
-import type { ClassNameValue } from 'tailwind-merge';
-import type { InputProps } from 'sv5ui';
-import type { PasswordInputSlots, PasswordInputVariantProps } from './password-input.variants.js';
+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
@@ -8,10 +8,10 @@ import type { PasswordInputSlots, PasswordInputVariantProps } from './password-i
  */
 export type PasswordInputUISlots = PasswordInputSlots
 /** Root wrapper of the inner `<Input>` component. */
- | 'inputRoot'
+ | "inputRoot"
 /** The `<input>` element base class inside the inner `<Input>`. */
- | 'base' | 'leading' | 'leadingIcon' | 'trailing' | 'trailingIcon';
-export type PasswordInputProps = Omit<InputProps, 'type'> & {
+ | "base" | "leading" | "leadingIcon" | "trailing" | "trailingIcon";
+export type PasswordInputProps = Omit<InputProps, "type"> & {
     /**
      * Bind a reference to the underlying HTMLInputElement.
      */
@@ -80,20 +80,20 @@ export type PasswordInputProps = Omit<InputProps, 'type'> & {
      * Also scales the toggle button icon and strength meter segments to match.
      * @default 'md'
      */
-    size?: NonNullable<PasswordInputVariantProps['size']>;
+    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']>;
+    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']>;
+    color?: NonNullable<InputProps["color"]>;
     /**
      * Additional CSS classes for the root element.
      */

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from "tailwind-variants";
 export declare const passwordInputVariants: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -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/components/PasswordInput/password-input.variants.js

@@ -1,83 +1,83 @@
-import { tv } from 'tailwind-variants';
+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',
+        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'
+            "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',
+        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'
+            "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'
+        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'
+                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'
+                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'
+                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'
+                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'
-            }
+                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' }
+            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
@@ -88,18 +88,18 @@ export const passwordInputVariants = tv({
             soft: {},
             subtle: {},
             ghost: {},
-            none: {}
-        }
+            none: {},
+        },
     },
     defaultVariants: {
-        size: 'md',
-        color: 'primary',
-        variant: 'outline'
-    }
+        size: "md",
+        color: "primary",
+        variant: "outline",
+    },
 });
 export const passwordInputDefaults = {
     defaultVariants: {
-        ...passwordInputVariants.defaultVariants
+        ...passwordInputVariants.defaultVariants,
     },
-    slots: {}
+    slots: {},
 };

package/dist/components/Prose/Prose.svelte

@@ -5,9 +5,9 @@ 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?.()}
+	{#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

@@ -1,4 +1,4 @@
-import type { ProseProps } from './prose.types.js';
+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

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

package/dist/components/Prose/index.js

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

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

@@ -1,12 +1,12 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ProseVariantProps } from './prose.variants.js';
+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'];
+    size?: ProseVariantProps["size"];
     /**
      * Html string to render. Usually coming from a markdown parser.
      */

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from "tailwind-variants";
 export declare const proseVariants: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {

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

@@ -1,45 +1,45 @@
-import { tv } from 'tailwind-variants';
+import { tv } from "tailwind-variants";
 export const proseVariants = tv({
     slots: {
         base: [
-            'text-surface-900 dark:text-surface-50 max-w-none',
+            "text-surface-900 dark:text-surface-50 max-w-none",
             // Paragraphs
-            '[&_p]:leading-7 [&_p]:mb-6 [&_p:last-child]:mb-0',
+            "[&_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',
+            "[&_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',
+            "[&_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',
+            "[&_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',
+            "[&_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',
+            "[&_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',
+            "[&_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',
+            "[&_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'
-        ]
+            "[&_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' }
-        }
+            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'
-    }
+        size: "base",
+    },
 });

package/dist/components/{Resizable/Resizable.svelte → ResizeContainer/ResizeContainer.svelte}

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

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

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

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

@@ -0,0 +1,4 @@
+import ResizeContainer from "./ResizeContainer.svelte";
+export { ResizeContainer };
+export * from "./resize-container.types.js";
+export * from "./resize-container.variants.js";

package/dist/components/ResizeContainer/index.js

@@ -0,0 +1,4 @@
+import ResizeContainer from "./ResizeContainer.svelte";
+export { ResizeContainer };
+export * from "./resize-container.types.js";
+export * from "./resize-container.variants.js";

package/dist/components/ResizeContainer/resize-container.types.d.ts

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

package/dist/components/ResizeContainer/resize-container.variants.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const resizeContainerVariants: import("tailwind-variants").TVReturnType<{
+    direction: {
+        both: "resize";
+        horizontal: "resize-x";
+        vertical: "resize-y";
+        none: "resize-none";
+    };
+}, {
+    base: string;
+}, undefined, {
+    direction: {
+        both: "resize";
+        horizontal: "resize-x";
+        vertical: "resize-y";
+        none: "resize-none";
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    direction: {
+        both: "resize";
+        horizontal: "resize-x";
+        vertical: "resize-y";
+        none: "resize-none";
+    };
+}, {
+    base: string;
+}>>;
+export type ResizeContainerVariantProps = VariantProps<typeof resizeContainerVariants>;

package/dist/components/ResizeContainer/resize-container.variants.js

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+export const resizeContainerVariants = tv({
+    slots: {
+        base: "overflow-hidden",
+    },
+    variants: {
+        direction: {
+            both: "resize",
+            horizontal: "resize-x",
+            vertical: "resize-y",
+            none: "resize-none",
+        },
+    },
+    defaultVariants: {
+        direction: "both",
+    },
+});