@dryui/ui 0.3.0 → 0.4.0

package/dist/select/select-item.svelte

@@ -23,11 +23,9 @@
 
 	const isSelected = $derived(ctx.value === value);
 
-	let el = $state<HTMLDivElement>();
-
 	function handleClick(e: MouseEvent & { currentTarget: HTMLDivElement }) {
 		if (disabled) return;
-		const text = el?.textContent?.trim() ?? '';
+		const text = e.currentTarget.textContent?.trim() ?? '';
 		ctx.select(value, text);
 		ctx.close();
 		ctx.triggerEl?.focus();
@@ -38,7 +36,7 @@
 		if (disabled) return;
 		if (e.key === 'Enter' || e.key === ' ') {
 			e.preventDefault();
-			const text = el?.textContent?.trim() ?? '';
+			const text = e.currentTarget.textContent?.trim() ?? '';
 			ctx.select(value, text);
 			ctx.close();
 			ctx.triggerEl?.focus();
@@ -48,7 +46,6 @@
 </script>
 
 <div
-	bind:this={el}
 	role="option"
 	tabindex={disabled ? undefined : -1}
 	aria-disabled={disabled || undefined}
@@ -67,12 +64,17 @@
 
 <style>
 	[data-select-item] {
+		--dry-select-item-radius: min(
+			var(--dry-control-radius, var(--dry-radius-sm)),
+			var(--dry-space-4)
+		);
+
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
 		align-items: center;
 		padding: var(--dry-space-2) var(--dry-space-3);
-		border-radius: var(--dry-radius-sm);
+		border-radius: var(--dry-select-item-radius);
 		font-size: var(--dry-type-small-size);
 		cursor: pointer;
 		user-select: none;

package/dist/select/select-item.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value: string;
-	disabled?: boolean;
-	children: Snippet;
+    value: string;
+    disabled?: boolean;
+    children: Snippet;
 }
-declare const SelectItem: import('svelte').Component<Props, {}, ''>;
+declare const SelectItem: import("svelte").Component<Props, {}, "">;
 type SelectItem = ReturnType<typeof SelectItem>;
 export default SelectItem;

package/dist/select/{select-root.svelte → select-root-input.svelte}

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { generateFormId } from '@dryui/primitives';
 	import { setSelectCtx } from './context.svelte.js';
-	import SelectTrigger from './select-trigger.svelte';
+	import SelectTrigger from './select-trigger-button.svelte';
 	import SelectValue from './select-value.svelte';
 	import SelectContent from './select-content.svelte';
 	import SelectItem from './select-item.svelte';

package/dist/select/select-root-input.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type SelectOption = {
+    value: string;
+    label: string;
+};
+interface Props {
+    open?: boolean;
+    value?: string;
+    disabled?: boolean;
+    name?: string;
+    class?: string;
+    options?: Array<string | SelectOption>;
+    placeholder?: string;
+    children?: Snippet;
+}
+declare const SelectRootInput: import("svelte").Component<Props, {}, "value" | "open">;
+type SelectRootInput = ReturnType<typeof SelectRootInput>;
+export default SelectRootInput;

package/dist/select/select-trigger-button.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getSelectCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLButtonElement> {
+		size?: 'sm' | 'md' | 'lg';
+		children: Snippet;
+	}
+
+	let { size = 'md', children, ...rest }: Props = $props();
+
+	const ctx = getSelectCtx();
+</script>
+
+<Button
+	variant="outline"
+	{size}
+	type="button"
+	id={ctx.triggerId}
+	popovertarget={ctx.contentId}
+	aria-haspopup="listbox"
+	aria-expanded={ctx.open}
+	aria-controls={ctx.open ? ctx.contentId : undefined}
+	data-state={ctx.open ? 'open' : 'closed'}
+	data-select-trigger
+	disabled={ctx.disabled}
+	ref={(el) => (ctx.triggerEl = el)}
+	{...rest}
+>
+	{@render children()}
+	<svg
+		data-indicator
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg
+	>
+</Button>
+
+<style>
+	svg[data-indicator] {
+		height: 1em;
+		aspect-ratio: 1;
+		place-self: center;
+		opacity: 0.5;
+		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+</style>

package/dist/select/select-trigger-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLButtonElement> {
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+}
+declare const SelectTriggerButton: import("svelte").Component<Props, {}, "">;
+type SelectTriggerButton = ReturnType<typeof SelectTriggerButton>;
+export default SelectTriggerButton;

package/dist/select/select-value.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
-	placeholder?: string;
+    placeholder?: string;
 }
-declare const SelectValue: import('svelte').Component<Props, {}, ''>;
+declare const SelectValue: import("svelte").Component<Props, {}, "">;
 type SelectValue = ReturnType<typeof SelectValue>;
 export default SelectValue;

package/dist/separator/separator.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	orientation?: 'horizontal' | 'vertical';
-	variant?: 'weak' | 'strong';
-	decorative?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'weak' | 'strong';
+    decorative?: boolean;
 }
-declare const Separator: import('svelte').Component<Props, {}, ''>;
+declare const Separator: import("svelte").Component<Props, {}, "">;
 type Separator = ReturnType<typeof Separator>;
 export default Separator;

package/dist/shader-canvas/presets.d.ts

@@ -1,7 +1,7 @@
 /** sin/cos color rotation using u_time, u_resolution, optional u_color_* uniforms */
 export declare const gradientFlow = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform vec3 u_color_primary;\nuniform vec3 u_color_secondary;\n\nvoid main() {\n  vec2 uv = v_uv;\n  float t = u_time * 0.4;\n\n  vec3 c1 = u_color_primary.r > 0.0 ? u_color_primary : vec3(0.3, 0.4, 0.9);\n  vec3 c2 = u_color_secondary.r > 0.0 ? u_color_secondary : vec3(0.9, 0.3, 0.5);\n\n  float angle = t + uv.x * 3.14159 + uv.y * 2.0;\n  float s = sin(angle) * 0.5 + 0.5;\n  float c = cos(angle * 0.7 + 1.0) * 0.5 + 0.5;\n\n  vec3 color = mix(c1, c2, s);\n  color = mix(color, vec3(1.0) - color * 0.3, c * 0.3);\n\n  fragColor = vec4(color, 1.0);\n}\n";
 /** Procedural dots via hash/noise functions */
-export declare const particleField = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nvoid main() {\n  vec2 uv = v_uv;\n  float aspect = u_resolution.x / u_resolution.y;\n  uv.x *= aspect;\n\n  float t = u_time * 0.3;\n  vec3 color = vec3(0.02, 0.02, 0.06);\n\n  for (int i = 0; i < 60; i++) {\n    float fi = float(i);\n    vec2 pos = vec2(\n      hash(vec2(fi, 0.0)),\n      hash(vec2(0.0, fi))\n    );\n    pos.x *= aspect;\n    pos += vec2(sin(t + fi * 0.5) * 0.05, cos(t * 0.7 + fi * 0.3) * 0.05);\n\n    float d = length(uv - pos);\n    float size = 0.002 + hash(vec2(fi, fi)) * 0.003;\n    float brightness = smoothstep(size * 2.0, size * 0.5, d);\n\n    vec3 particleColor = vec3(\n      0.4 + hash(vec2(fi, 1.0)) * 0.6,\n      0.3 + hash(vec2(fi, 2.0)) * 0.4,\n      0.6 + hash(vec2(fi, 3.0)) * 0.4\n    );\n\n    color += particleColor * brightness * 0.8;\n  }\n\n  fragColor = vec4(color, 1.0);\n}\n";
+export declare const particleField = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\n\nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nvoid main() {\n  vec2 uv = v_uv;\n  float aspect = u_resolution.x / u_resolution.y;\n  uv.x *= aspect;\n\n  float t = u_time * 0.3;\n  vec3 color = vec3(0.02, 0.02, 0.06);\n\n  for (int i = 0; i < 36; i++) {\n    float fi = float(i);\n    vec2 pos = vec2(\n      hash(vec2(fi, 0.0)),\n      hash(vec2(0.0, fi))\n    );\n    pos.x *= aspect;\n    pos += vec2(sin(t + fi * 0.5) * 0.05, cos(t * 0.7 + fi * 0.3) * 0.05);\n\n    float d = length(uv - pos);\n    float size = 0.002 + hash(vec2(fi, fi)) * 0.003;\n    float brightness = smoothstep(size * 2.0, size * 0.5, d);\n\n    vec3 particleColor = vec3(\n      0.4 + hash(vec2(fi, 1.0)) * 0.6,\n      0.3 + hash(vec2(fi, 2.0)) * 0.4,\n      0.6 + hash(vec2(fi, 3.0)) * 0.4\n    );\n\n    color += particleColor * brightness * 0.8;\n  }\n\n  fragColor = vec4(color, 1.0);\n}\n";
 /** Sinusoidal UV warp, responds to u_mouse */
 export declare const waveDistortion = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\n\nvoid main() {\n  vec2 uv = v_uv;\n  float t = u_time * 0.5;\n  vec2 mouse = u_mouse;\n\n  float wave1 = sin(uv.x * 8.0 + t * 2.0 + mouse.x * 3.0) * 0.02;\n  float wave2 = sin(uv.y * 6.0 + t * 1.5 + mouse.y * 2.0) * 0.03;\n  float wave3 = cos(uv.x * 4.0 - t + uv.y * 5.0) * 0.015;\n\n  uv.x += wave1 + wave3;\n  uv.y += wave2;\n\n  vec3 c1 = vec3(0.1, 0.2, 0.4);\n  vec3 c2 = vec3(0.3, 0.1, 0.5);\n  vec3 c3 = vec3(0.05, 0.3, 0.4);\n\n  float blend = sin(uv.x * 3.14159 + uv.y * 2.0 + t) * 0.5 + 0.5;\n  vec3 color = mix(mix(c1, c2, uv.x), c3, blend);\n\n  fragColor = vec4(color, 1.0);\n}\n";
 /** Multi-point gradient interpolation */

package/dist/shader-canvas/shader-canvas.svelte.d.ts

@@ -2,24 +2,19 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type ShaderCanvasProps as PrimitiveShaderCanvasProps } from '@dryui/primitives/shader-canvas';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	fragmentShader?: string;
-	vertexShader?: PrimitiveShaderCanvasProps['vertexShader'];
-	autoUniforms?: PrimitiveShaderCanvasProps['autoUniforms'];
-	uniforms?: PrimitiveShaderCanvasProps['uniforms'];
-	pixelRatio?: PrimitiveShaderCanvasProps['pixelRatio'];
-	fps?: PrimitiveShaderCanvasProps['fps'];
-	paused?: PrimitiveShaderCanvasProps['paused'];
-	fallback?: PrimitiveShaderCanvasProps['fallback'];
-	children: Snippet;
-	preset?:
-		| 'gradient-flow'
-		| 'particle-field'
-		| 'wave-distortion'
-		| 'mesh-gradient'
-		| 'liquid-metal';
-	themeColors?: boolean;
-	aspectRatio?: string;
+    fragmentShader?: string;
+    vertexShader?: PrimitiveShaderCanvasProps['vertexShader'];
+    autoUniforms?: PrimitiveShaderCanvasProps['autoUniforms'];
+    uniforms?: PrimitiveShaderCanvasProps['uniforms'];
+    pixelRatio?: PrimitiveShaderCanvasProps['pixelRatio'];
+    fps?: PrimitiveShaderCanvasProps['fps'];
+    paused?: PrimitiveShaderCanvasProps['paused'];
+    fallback?: PrimitiveShaderCanvasProps['fallback'];
+    children: Snippet;
+    preset?: 'gradient-flow' | 'particle-field' | 'wave-distortion' | 'mesh-gradient' | 'liquid-metal';
+    themeColors?: boolean;
+    aspectRatio?: string;
 }
-declare const ShaderCanvas: import('svelte').Component<Props, {}, 'paused'>;
+declare const ShaderCanvas: import("svelte").Component<Props, {}, "paused">;
 type ShaderCanvas = ReturnType<typeof ShaderCanvas>;
 export default ShaderCanvas;

package/dist/sidebar/index.d.ts

@@ -34,7 +34,7 @@ import SidebarFooter from './sidebar-footer.svelte';
 import SidebarGroup from './sidebar-group.svelte';
 import SidebarGroupLabel from './sidebar-group-label.svelte';
 import SidebarItem from './sidebar-item.svelte';
-import SidebarTrigger from './sidebar-trigger.svelte';
+import SidebarTrigger from './sidebar-trigger-button.svelte';
 export declare const Sidebar: {
     Root: typeof SidebarRoot;
     Header: typeof SidebarHeader;

package/dist/sidebar/index.js

@@ -5,7 +5,7 @@ import SidebarFooter from './sidebar-footer.svelte';
 import SidebarGroup from './sidebar-group.svelte';
 import SidebarGroupLabel from './sidebar-group-label.svelte';
 import SidebarItem from './sidebar-item.svelte';
-import SidebarTrigger from './sidebar-trigger.svelte';
+import SidebarTrigger from './sidebar-trigger-button.svelte';
 export const Sidebar = {
     Root: SidebarRoot,
     Header: SidebarHeader,

package/dist/sidebar/sidebar-content.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const SidebarContent: import('svelte').Component<Props, {}, ''>;
+declare const SidebarContent: import("svelte").Component<Props, {}, "">;
 type SidebarContent = ReturnType<typeof SidebarContent>;
 export default SidebarContent;

package/dist/sidebar/sidebar-footer.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const SidebarFooter: import('svelte').Component<Props, {}, ''>;
+declare const SidebarFooter: import("svelte").Component<Props, {}, "">;
 type SidebarFooter = ReturnType<typeof SidebarFooter>;
 export default SidebarFooter;

package/dist/sidebar/sidebar-group-label.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const SidebarGroupLabel: import('svelte').Component<Props, {}, ''>;
+declare const SidebarGroupLabel: import("svelte").Component<Props, {}, "">;
 type SidebarGroupLabel = ReturnType<typeof SidebarGroupLabel>;
 export default SidebarGroupLabel;

package/dist/sidebar/sidebar-group.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const SidebarGroup: import('svelte').Component<Props, {}, ''>;
+declare const SidebarGroup: import("svelte").Component<Props, {}, "">;
 type SidebarGroup = ReturnType<typeof SidebarGroup>;
 export default SidebarGroup;

package/dist/sidebar/sidebar-header.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const SidebarHeader: import('svelte').Component<Props, {}, ''>;
+declare const SidebarHeader: import("svelte").Component<Props, {}, "">;
 type SidebarHeader = ReturnType<typeof SidebarHeader>;
 export default SidebarHeader;

package/dist/sidebar/sidebar-item.svelte

@@ -7,10 +7,10 @@
 		children: Snippet;
 	}
 
-	let { active = false, class: className, children, ...rest }: Props = $props();
+	let { href, active = false, class: className, children, ...rest }: Props = $props();
 </script>
 
-<a data-active={active || undefined} data-sidebar-item class={className} {...rest}>
+<a {href} data-active={active || undefined} data-sidebar-item class={className} {...rest}>
 	{@render children()}
 </a>
 

package/dist/sidebar/sidebar-item.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
 interface Props extends HTMLAnchorAttributes {
-	active?: boolean;
-	children: Snippet;
+    active?: boolean;
+    children: Snippet;
 }
-declare const SidebarItem: import('svelte').Component<Props, {}, ''>;
+declare const SidebarItem: import("svelte").Component<Props, {}, "">;
 type SidebarItem = ReturnType<typeof SidebarItem>;
 export default SidebarItem;

package/dist/sidebar/sidebar-root.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLElement> {
-	collapsed?: boolean;
-	side?: 'left' | 'right';
-	children: Snippet;
+    collapsed?: boolean;
+    side?: 'left' | 'right';
+    children: Snippet;
 }
-declare const SidebarRoot: import('svelte').Component<Props, {}, 'collapsed'>;
+declare const SidebarRoot: import("svelte").Component<Props, {}, "collapsed">;
 type SidebarRoot = ReturnType<typeof SidebarRoot>;
 export default SidebarRoot;

package/dist/sidebar/sidebar-trigger-button.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getSidebarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getSidebarCtx();
+</script>
+
+<Button
+	variant="outline"
+	type="button"
+	aria-label="Toggle sidebar"
+	aria-expanded={!ctx.collapsed}
+	data-sidebar-trigger
+	data-side={ctx.side}
+	{...rest}
+	onclick={() => ctx.toggle()}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</Button>

package/dist/sidebar/sidebar-trigger-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    children?: Snippet;
+}
+declare const SidebarTriggerButton: import("svelte").Component<Props, {}, "">;
+type SidebarTriggerButton = ReturnType<typeof SidebarTriggerButton>;
+export default SidebarTriggerButton;

package/dist/skeleton/skeleton.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	variant?: 'text' | 'circular' | 'rectangular';
-	width?: string;
-	height?: string;
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string;
+    height?: string;
 }
-declare const Skeleton: import('svelte').Component<Props, {}, ''>;
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/slider/index.d.ts

@@ -2,4 +2,4 @@ import type { SliderProps as PrimitiveSliderProps } from '@dryui/primitives';
 export interface SliderProps extends Omit<PrimitiveSliderProps, 'size'> {
     size?: 'sm' | 'md' | 'lg';
 }
-export { default as Slider } from './slider.svelte';
+export { default as Slider } from './slider-input.svelte';

package/dist/slider/index.js

@@ -1 +1 @@
-export { default as Slider } from './slider.svelte';
+export { default as Slider } from './slider-input.svelte';

package/dist/slider/slider-input.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'size'> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+}
+declare const SliderInput: import("svelte").Component<Props, {}, "value">;
+type SliderInput = ReturnType<typeof SliderInput>;
+export default SliderInput;

package/dist/spacer/spacer.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-	axis?: 'vertical' | 'horizontal';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    axis?: 'vertical' | 'horizontal';
 }
-declare const Spacer: import('svelte').Component<Props, {}, ''>;
+declare const Spacer: import("svelte").Component<Props, {}, "">;
 type Spacer = ReturnType<typeof Spacer>;
 export default Spacer;

package/dist/sparkline/sparkline.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { SVGAttributes } from 'svelte/elements';
 interface Props extends Omit<SVGAttributes<SVGSVGElement>, 'fill'> {
-	data: number[];
-	width?: number;
-	height?: number;
-	color?: string;
-	filled?: boolean;
-	strokeWidth?: number;
-	highlightLast?: boolean;
+    data: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    filled?: boolean;
+    strokeWidth?: number;
+    highlightLast?: boolean;
 }
-declare const Sparkline: import('svelte').Component<Props, {}, ''>;
+declare const Sparkline: import("svelte").Component<Props, {}, "">;
 type Sparkline = ReturnType<typeof Sparkline>;
 export default Sparkline;

package/dist/spinner/spinner.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { SVGAttributes } from 'svelte/elements';
 interface Props extends SVGAttributes<SVGSVGElement> {
-	size?: 'sm' | 'md' | 'lg';
-	color?: 'primary' | 'current';
-	label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'current';
+    label?: string;
 }
-declare const Spinner: import('svelte').Component<Props, {}, ''>;
+declare const Spinner: import("svelte").Component<Props, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;
 export default Spinner;

package/dist/splitter/splitter-handle.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	index: number;
-	children?: Snippet;
+    index?: number;
+    children?: Snippet;
 }
-declare const SplitterHandle: import('svelte').Component<Props, {}, ''>;
+declare const SplitterHandle: import("svelte").Component<Props, {}, "">;
 type SplitterHandle = ReturnType<typeof SplitterHandle>;
 export default SplitterHandle;

package/dist/splitter/splitter-panel.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	index: number;
-	children: Snippet;
+    index?: number;
+    children: Snippet;
 }
-declare const SplitterPanel: import('svelte').Component<Props, {}, ''>;
+declare const SplitterPanel: import("svelte").Component<Props, {}, "">;
 type SplitterPanel = ReturnType<typeof SplitterPanel>;
 export default SplitterPanel;

package/dist/splitter/splitter-root.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	orientation?: 'horizontal' | 'vertical';
-	sizes?: number[];
-	children: Snippet;
+    orientation?: 'horizontal' | 'vertical';
+    sizes?: number[];
+    children: Snippet;
 }
-declare const SplitterRoot: import('svelte').Component<Props, {}, 'sizes'>;
+declare const SplitterRoot: import("svelte").Component<Props, {}, "sizes">;
 type SplitterRoot = ReturnType<typeof SplitterRoot>;
 export default SplitterRoot;

package/dist/spotlight/spotlight.svelte.d.ts

@@ -1,13 +1,14 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type SpotlightProps as PrimitiveSpotlightProps } from '@dryui/primitives/spotlight';
+import type { BlendMode } from '@dryui/primitives/spotlight';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	radius?: PrimitiveSpotlightProps['radius'];
-	intensity?: PrimitiveSpotlightProps['intensity'];
-	color?: PrimitiveSpotlightProps['color'];
-	followPointer?: PrimitiveSpotlightProps['followPointer'];
-	blendMode?: PrimitiveSpotlightProps['blendMode'];
-	children: PrimitiveSpotlightProps['children'];
+    radius?: number;
+    intensity?: number;
+    color?: string;
+    followPointer?: boolean;
+    blendMode?: BlendMode;
+    children: Snippet;
 }
-declare const Spotlight: import('svelte').Component<Props, {}, ''>;
+declare const Spotlight: import("svelte").Component<Props, {}, "">;
 type Spotlight = ReturnType<typeof Spotlight>;
 export default Spotlight;

package/dist/star-rating/star-rating-root.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	stars: number;
-	label?: string;
-	size?: 'sm' | 'md' | 'lg';
-	variant?: 'filled' | 'outlined';
+    stars: number;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'filled' | 'outlined';
 }
-declare const StarRatingRoot: import('svelte').Component<Props, {}, ''>;
+declare const StarRatingRoot: import("svelte").Component<Props, {}, "">;
 type StarRatingRoot = ReturnType<typeof StarRatingRoot>;
 export default StarRatingRoot;

package/dist/stepper/index.d.ts

@@ -1,7 +1,7 @@
 export type { StepperRootProps, StepperListProps, StepperStepProps, StepperSeparatorProps } from '@dryui/primitives';
 import StepperRoot from './stepper-root.svelte';
 import StepperList from './stepper-list.svelte';
-import StepperStep from './stepper-step.svelte';
+import StepperStep from './stepper-step-button.svelte';
 import StepperSeparator from './stepper-separator.svelte';
 export declare const Stepper: {
     Root: typeof StepperRoot;

package/dist/stepper/index.js

@@ -1,6 +1,6 @@
 import StepperRoot from './stepper-root.svelte';
 import StepperList from './stepper-list.svelte';
-import StepperStep from './stepper-step.svelte';
+import StepperStep from './stepper-step-button.svelte';
 import StepperSeparator from './stepper-separator.svelte';
 export const Stepper = {
     Root: StepperRoot,

package/dist/stepper/stepper-list.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLOListElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const StepperList: import('svelte').Component<Props, {}, ''>;
+declare const StepperList: import("svelte").Component<Props, {}, "">;
 type StepperList = ReturnType<typeof StepperList>;
 export default StepperList;

package/dist/stepper/stepper-root.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	activeStep?: number;
-	orientation?: 'horizontal' | 'vertical';
-	children: Snippet;
+    activeStep?: number;
+    orientation?: 'horizontal' | 'vertical';
+    children: Snippet;
 }
-declare const StepperRoot: import('svelte').Component<Props, {}, 'activeStep'>;
+declare const StepperRoot: import("svelte").Component<Props, {}, "activeStep">;
 type StepperRoot = ReturnType<typeof StepperRoot>;
 export default StepperRoot;