@dryui/ui 0.2.1 → 0.3.0

package/dist/pagination/index.d.ts

@@ -1,12 +1,4 @@
-export type {
-	PaginationRootProps,
-	PaginationContentProps,
-	PaginationItemProps,
-	PaginationPreviousProps,
-	PaginationNextProps,
-	PaginationLinkProps,
-	PaginationEllipsisProps
-} from '@dryui/primitives';
+export type { PaginationRootProps, PaginationContentProps, PaginationItemProps, PaginationPreviousProps, PaginationNextProps, PaginationLinkProps, PaginationEllipsisProps } from '@dryui/primitives';
 import PaginationRoot from './pagination-root.svelte';
 import PaginationContent from './pagination-content.svelte';
 import PaginationItem from './pagination-item.svelte';
@@ -15,11 +7,11 @@ import PaginationNext from './pagination-next.svelte';
 import PaginationLink from './pagination-link.svelte';
 import PaginationEllipsis from './pagination-ellipsis.svelte';
 export declare const Pagination: {
-	Root: typeof PaginationRoot;
-	Content: typeof PaginationContent;
-	Item: typeof PaginationItem;
-	Previous: typeof PaginationPrevious;
-	Next: typeof PaginationNext;
-	Link: typeof PaginationLink;
-	Ellipsis: typeof PaginationEllipsis;
+    Root: typeof PaginationRoot;
+    Content: typeof PaginationContent;
+    Item: typeof PaginationItem;
+    Previous: typeof PaginationPrevious;
+    Next: typeof PaginationNext;
+    Link: typeof PaginationLink;
+    Ellipsis: typeof PaginationEllipsis;
 };

package/dist/phone-input/index.d.ts

@@ -1,6 +1,6 @@
 import type { PhoneInputProps as PrimitivePhoneInputProps, CountryInfo } from '@dryui/primitives';
 export type { CountryInfo };
 export interface PhoneInputProps extends PrimitivePhoneInputProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 export { default as PhoneInput } from './phone-input.svelte';

package/dist/pin-input/index.d.ts

@@ -1,22 +1,16 @@
-import type {
-	PinInputRootProps as PrimitivePinInputRootProps,
-	PinInputGroupProps,
-	PinInputCellProps,
-	PinInputSeparatorProps,
-	PinInputCell
-} from '@dryui/primitives';
+import type { PinInputRootProps as PrimitivePinInputRootProps, PinInputGroupProps, PinInputCellProps, PinInputSeparatorProps, PinInputCell } from '@dryui/primitives';
 export type { PinInputGroupProps, PinInputCellProps, PinInputSeparatorProps, PinInputCell };
 export interface PinInputRootProps extends PrimitivePinInputRootProps {
-	size?: 'sm' | 'md' | 'lg';
-	variant?: 'outline' | 'flushed';
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'outline' | 'flushed';
 }
 import PinInputRoot from './pin-input-root.svelte';
 import PinInputGroup from './pin-input-group.svelte';
 import PinInputCellComponent from './pin-input-cell.svelte';
 import PinInputSeparator from './pin-input-separator.svelte';
 export declare const PinInput: {
-	Root: typeof PinInputRoot;
-	Group: typeof PinInputGroup;
-	Cell: typeof PinInputCellComponent;
-	Separator: typeof PinInputSeparator;
+    Root: typeof PinInputRoot;
+    Group: typeof PinInputGroup;
+    Cell: typeof PinInputCellComponent;
+    Separator: typeof PinInputSeparator;
 };

package/dist/popover/index.d.ts

@@ -3,7 +3,7 @@ import PopoverRoot from './popover-root.svelte';
 import PopoverTrigger from './popover-trigger.svelte';
 import PopoverContent from './popover-content.svelte';
 export declare const Popover: {
-	Root: typeof PopoverRoot;
-	Trigger: typeof PopoverTrigger;
-	Content: typeof PopoverContent;
+    Root: typeof PopoverRoot;
+    Trigger: typeof PopoverTrigger;
+    Content: typeof PopoverContent;
 };

package/dist/progress/index.d.ts

@@ -1,11 +1,7 @@
-import type {
-	ProgressProps as PrimitiveProgressProps,
-	ProgressSegment,
-	ProgressThreshold
-} from '@dryui/primitives';
+import type { ProgressProps as PrimitiveProgressProps, ProgressSegment, ProgressThreshold } from '@dryui/primitives';
 export type { ProgressSegment, ProgressThreshold };
 export interface ProgressProps extends PrimitiveProgressProps {
-	size?: 'sm' | 'md' | 'lg';
-	color?: 'blue' | 'green' | 'red' | 'yellow';
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'blue' | 'green' | 'red' | 'yellow';
 }
 export { default as Progress } from './progress.svelte';

package/dist/progress-ring/index.d.ts

@@ -1,6 +1,6 @@
 import type { ProgressRingProps as PrimitiveProgressRingProps } from '@dryui/primitives';
 export interface ProgressRingProps extends PrimitiveProgressRingProps {
-	color?: 'primary' | 'gray' | 'green' | 'red' | 'yellow';
-	indeterminate?: boolean;
+    color?: 'primary' | 'gray' | 'green' | 'red' | 'yellow';
+    indeterminate?: boolean;
 }
 export { default as ProgressRing } from './progress-ring.svelte';

package/dist/radio-group/index.d.ts

@@ -2,6 +2,6 @@ export type { RadioGroupRootProps, RadioGroupItemProps } from '@dryui/primitives
 import RadioGroupRoot from './radio-group.svelte';
 import RadioGroupItem from './radio-group-item.svelte';
 export declare const RadioGroup: {
-	Root: typeof RadioGroupRoot;
-	Item: typeof RadioGroupItem;
+    Root: typeof RadioGroupRoot;
+    Item: typeof RadioGroupItem;
 };

package/dist/radio-group/radio-group.svelte

@@ -114,5 +114,4 @@
 			cursor: not-allowed;
 		}
 	}
-
 </style>

package/dist/range-calendar/index.d.ts

@@ -2,6 +2,6 @@ export type { RangeCalendarRootProps, RangeCalendarGridProps } from '@dryui/prim
 import RangeCalendarRoot from './range-calendar-root.svelte';
 import RangeCalendarGrid from './range-calendar-grid.svelte';
 export declare const RangeCalendar: {
-	Root: typeof RangeCalendarRoot;
-	Grid: typeof RangeCalendarGrid;
+    Root: typeof RangeCalendarRoot;
+    Grid: typeof RangeCalendarGrid;
 };

package/dist/range-calendar/range-calendar-grid.svelte

@@ -116,7 +116,12 @@
 			<span data-calendar-heading aria-live="polite" aria-atomic="true">
 				{monthYearLabel}
 			</span>
-			<button type="button" data-calendar-nav aria-label="Next month" onclick={() => ctx.nextMonth()}>
+			<button
+				type="button"
+				data-calendar-nav
+				aria-label="Next month"
+				onclick={() => ctx.nextMonth()}
+			>
 				&#8250;
 			</button>
 		</div>
@@ -197,7 +202,9 @@
 		padding: var(--dry-space-3);
 		background: var(--dry-range-calendar-panel-bg, var(--dry-color-bg-overlay));
 		border: 1px solid var(--dry-range-calendar-panel-border, var(--dry-color-stroke-weak));
-		border-radius: calc(var(--dry-range-calendar-radius, var(--dry-radius-lg)) - var(--dry-space-1));
+		border-radius: calc(
+			var(--dry-range-calendar-radius, var(--dry-radius-lg)) - var(--dry-space-1)
+		);
 	}
 
 	[data-range-calendar-grid] [data-calendar-header] {
@@ -351,8 +358,7 @@
 
 	[data-range-calendar-grid]
 		[data-calendar-day-button][data-range-start]:hover:not([data-disabled]),
-	[data-range-calendar-grid]
-		[data-calendar-day-button][data-range-end]:hover:not([data-disabled]) {
+	[data-range-calendar-grid] [data-calendar-day-button][data-range-end]:hover:not([data-disabled]) {
 		background: var(--dry-range-calendar-selected-hover-bg, var(--dry-color-fill-brand-hover));
 	}
 

package/dist/range-calendar/range-calendar-root.svelte

@@ -133,11 +133,7 @@
 		--dry-range-calendar-selected-bg: var(--dry-color-fill-brand);
 		--dry-range-calendar-selected-color: var(--dry-color-on-brand);
 		--dry-range-calendar-selected-hover-bg: var(--dry-color-fill-brand-hover);
-		--dry-range-calendar-range-bg: color-mix(
-			in srgb,
-			var(--dry-color-fill-brand) 14%,
-			transparent
-		);
+		--dry-range-calendar-range-bg: color-mix(in srgb, var(--dry-color-fill-brand) 14%, transparent);
 		--dry-range-calendar-today-color: var(--dry-color-text-brand);
 		--dry-range-calendar-outside-color: var(--dry-color-text-weak);
 

package/dist/rating/index.d.ts

@@ -1,5 +1,5 @@
 import type { RatingProps as PrimitiveRatingProps } from '@dryui/primitives';
 export interface RatingProps extends PrimitiveRatingProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 export { default as Rating } from './rating.svelte';

package/dist/reveal/index.d.ts

@@ -1,3 +1,5 @@
 import type { RevealProps as PrimitiveRevealProps } from '@dryui/primitives/reveal';
-export interface RevealProps extends PrimitiveRevealProps {}
+export interface RevealProps extends PrimitiveRevealProps {
+}
+export type { BlendMode, RevealVariant } from '@dryui/primitives/reveal';
 export { default as Reveal } from './reveal.svelte';

package/dist/rich-text-editor/index.d.ts

@@ -1,11 +1,12 @@
 import type { HTMLAttributes } from 'svelte/elements';
 export type { RichTextEditorRootProps, RichTextEditorContentProps } from '@dryui/primitives';
-export interface RichTextEditorToolbarProps extends HTMLAttributes<HTMLDivElement> {}
+export interface RichTextEditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
+}
 import RichTextEditorRoot from './rich-text-editor-root.svelte';
 import RichTextEditorToolbar from './rich-text-editor-toolbar.svelte';
 import RichTextEditorContent from './rich-text-editor-content.svelte';
 export declare const RichTextEditor: {
-	Root: typeof RichTextEditorRoot;
-	Toolbar: typeof RichTextEditorToolbar;
-	Content: typeof RichTextEditorContent;
+    Root: typeof RichTextEditorRoot;
+    Toolbar: typeof RichTextEditorToolbar;
+    Content: typeof RichTextEditorContent;
 };

package/dist/rich-text-editor/rich-text-editor-content.svelte

@@ -95,7 +95,15 @@
 	oninput={handleInput}
 	onkeydown={handleKeydown}
 	{...rest}
-><h1>.</h1><h2>.</h2><h3>.</h3><p></p><ul><li></li></ul><ol><li></li></ol><a aria-hidden="true" href="https://example.com">.</a></div>
+>
+	<h1>.</h1>
+	<h2>.</h2>
+	<h3>.</h3>
+	<p></p>
+	<ul><li></li></ul>
+	<ol><li></li></ol>
+	<a aria-hidden="true" href="https://example.com">.</a>
+</div>
 
 <style>
 	[data-part='content'] {

package/dist/rich-text-editor/rich-text-editor-toolbar.svelte

@@ -381,8 +381,7 @@
 						closeLinkInput();
 					}}>Apply</button
 				>
-				<button type="button" data-part="linkCancel" onclick={() => closeLinkInput()}
-					>Cancel</button
+				<button type="button" data-part="linkCancel" onclick={() => closeLinkInput()}>Cancel</button
 				>
 			</div>
 		{/if}

package/dist/scroll-to-top/index.d.ts

@@ -1,6 +1,6 @@
 import type { ScrollToTopProps as PrimitiveScrollToTopProps } from '@dryui/primitives';
 export interface ScrollToTopProps extends Omit<PrimitiveScrollToTopProps, 'children'> {
-	position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
-	class?: string;
+    position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
+    class?: string;
 }
 export { default as ScrollToTop } from './scroll-to-top.svelte';

package/dist/segmented-control/index.d.ts

@@ -2,6 +2,6 @@ export type { SegmentedControlRootProps, SegmentedControlItemProps } from '@dryu
 import SegmentedControlRoot from './segmented-control-root.svelte';
 import SegmentedControlItem from './segmented-control-item.svelte';
 export declare const SegmentedControl: {
-	Root: typeof SegmentedControlRoot;
-	Item: typeof SegmentedControlItem;
+    Root: typeof SegmentedControlRoot;
+    Item: typeof SegmentedControlItem;
 };

package/dist/select/index.d.ts

@@ -1,19 +1,13 @@
-export type {
-	SelectRootProps,
-	SelectTriggerProps,
-	SelectContentProps,
-	SelectItemProps,
-	SelectValueProps
-} from '@dryui/primitives';
+export type { SelectRootProps, SelectTriggerProps, SelectContentProps, SelectItemProps, SelectValueProps } from '@dryui/primitives';
 import SelectRoot from './select-root.svelte';
 import SelectTrigger from './select-trigger.svelte';
 import SelectContent from './select-content.svelte';
 import SelectItem from './select-item.svelte';
 import SelectValue from './select-value.svelte';
 export declare const Select: {
-	Root: typeof SelectRoot;
-	Trigger: typeof SelectTrigger;
-	Content: typeof SelectContent;
-	Item: typeof SelectItem;
-	Value: typeof SelectValue;
+    Root: typeof SelectRoot;
+    Trigger: typeof SelectTrigger;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
+    Value: typeof SelectValue;
 };

package/dist/select/select-trigger.svelte

@@ -78,7 +78,15 @@
 <div bind:this={wrapperEl} data-select-trigger-wrap>
 	<button type="button" data-select-trigger data-size={size} class={className} {...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>
+		<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>
 </div>
 

package/dist/separator/index.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
-	orientation?: 'horizontal' | 'vertical';
-	variant?: 'weak' | 'strong';
-	decorative?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'weak' | 'strong';
+    decorative?: boolean;
 }
 export { default as Separator } from './separator.svelte';

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

@@ -1,25 +1,20 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { ShaderCanvasProps as PrimitiveShaderCanvasProps } from '@dryui/primitives/shader-canvas';
-export type ShaderCanvasPreset =
-	| 'gradient-flow'
-	| 'particle-field'
-	| 'wave-distortion'
-	| 'mesh-gradient'
-	| 'liquid-metal';
+export type ShaderCanvasPreset = 'gradient-flow' | 'particle-field' | 'wave-distortion' | 'mesh-gradient' | 'liquid-metal';
 export interface ShaderCanvasProps 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?: ShaderCanvasPreset;
-	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?: ShaderCanvasPreset;
+    themeColors?: boolean;
+    aspectRatio?: string;
 }
 export { default as ShaderCanvas } from './shader-canvas.svelte';
 export { PRESETS } from './presets.js';

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

@@ -1,16 +1,11 @@
 /** 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';
+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 < 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";
 /** 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';
+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 */
-export declare const meshGradient =
-	'#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.2;\n\n  vec3 c1 = u_color_primary.r > 0.0 ? u_color_primary : vec3(0.5, 0.2, 0.8);\n  vec3 c2 = u_color_secondary.r > 0.0 ? u_color_secondary : vec3(0.2, 0.6, 0.9);\n  vec3 c3 = vec3(0.9, 0.3, 0.4);\n  vec3 c4 = vec3(0.2, 0.8, 0.5);\n\n  vec2 p1 = vec2(0.2 + sin(t) * 0.1, 0.3 + cos(t * 0.7) * 0.1);\n  vec2 p2 = vec2(0.8 + sin(t * 0.8 + 1.0) * 0.1, 0.2 + cos(t * 0.6) * 0.1);\n  vec2 p3 = vec2(0.7 + sin(t * 0.5 + 2.0) * 0.1, 0.8 + cos(t * 0.9) * 0.1);\n  vec2 p4 = vec2(0.3 + sin(t * 0.6 + 3.0) * 0.1, 0.7 + cos(t * 0.4) * 0.1);\n\n  float d1 = 1.0 / (length(uv - p1) + 0.01);\n  float d2 = 1.0 / (length(uv - p2) + 0.01);\n  float d3 = 1.0 / (length(uv - p3) + 0.01);\n  float d4 = 1.0 / (length(uv - p4) + 0.01);\n  float total = d1 + d2 + d3 + d4;\n\n  vec3 color = (c1 * d1 + c2 * d2 + c3 * d3 + c4 * d4) / total;\n\n  fragColor = vec4(color, 1.0);\n}\n';
+export declare const meshGradient = "#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.2;\n\n  vec3 c1 = u_color_primary.r > 0.0 ? u_color_primary : vec3(0.5, 0.2, 0.8);\n  vec3 c2 = u_color_secondary.r > 0.0 ? u_color_secondary : vec3(0.2, 0.6, 0.9);\n  vec3 c3 = vec3(0.9, 0.3, 0.4);\n  vec3 c4 = vec3(0.2, 0.8, 0.5);\n\n  vec2 p1 = vec2(0.2 + sin(t) * 0.1, 0.3 + cos(t * 0.7) * 0.1);\n  vec2 p2 = vec2(0.8 + sin(t * 0.8 + 1.0) * 0.1, 0.2 + cos(t * 0.6) * 0.1);\n  vec2 p3 = vec2(0.7 + sin(t * 0.5 + 2.0) * 0.1, 0.8 + cos(t * 0.9) * 0.1);\n  vec2 p4 = vec2(0.3 + sin(t * 0.6 + 3.0) * 0.1, 0.7 + cos(t * 0.4) * 0.1);\n\n  float d1 = 1.0 / (length(uv - p1) + 0.01);\n  float d2 = 1.0 / (length(uv - p2) + 0.01);\n  float d3 = 1.0 / (length(uv - p3) + 0.01);\n  float d4 = 1.0 / (length(uv - p4) + 0.01);\n  float total = d1 + d2 + d3 + d4;\n\n  vec3 color = (c1 * d1 + c2 * d2 + c3 * d3 + c4 * d4) / total;\n\n  fragColor = vec4(color, 1.0);\n}\n";
 /** Fresnel-like metallic reflection via distance fields */
-export declare const liquidMetal =
-	'#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 smin(float a, float b, float k) {\n  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);\n  return mix(b, a, h) - k * h * (1.0 - h);\n}\n\nvoid main() {\n  vec2 uv = v_uv * 2.0 - 1.0;\n  float aspect = u_resolution.x / u_resolution.y;\n  uv.x *= aspect;\n  float t = u_time * 0.3;\n\n  // Animated blob positions\n  vec2 p1 = vec2(sin(t * 0.7) * 0.6, cos(t * 0.5) * 0.4);\n  vec2 p2 = vec2(cos(t * 0.8 + 1.0) * 0.5, sin(t * 0.6 + 2.0) * 0.5);\n  vec2 p3 = vec2(sin(t * 0.4 + 3.0) * 0.4, cos(t * 0.9 + 1.5) * 0.3);\n\n  float d1 = length(uv - p1) - 0.3;\n  float d2 = length(uv - p2) - 0.25;\n  float d3 = length(uv - p3) - 0.2;\n\n  float d = smin(smin(d1, d2, 0.3), d3, 0.3);\n\n  // Fresnel-like effect\n  float edge = smoothstep(0.02, -0.02, d);\n  float fresnel = pow(1.0 - abs(d) * 3.0, 3.0);\n  fresnel = clamp(fresnel, 0.0, 1.0);\n\n  // Metal color\n  vec3 baseColor = vec3(0.7, 0.72, 0.75);\n  vec3 highlight = vec3(0.95, 0.95, 1.0);\n  vec3 dark = vec3(0.15, 0.16, 0.2);\n\n  float n = sin(uv.x * 8.0 + t) * cos(uv.y * 8.0 - t * 0.7) * 0.5 + 0.5;\n  vec3 color = mix(dark, baseColor, edge);\n  color = mix(color, highlight, fresnel * 0.8);\n  color += n * 0.05 * edge;\n\n  // Environment reflection hint\n  float ref = sin(uv.x * 4.0 + uv.y * 3.0 + t * 2.0) * 0.5 + 0.5;\n  color += vec3(0.1, 0.12, 0.15) * ref * edge * 0.4;\n\n  fragColor = vec4(color, 1.0);\n}\n';
+export declare const liquidMetal = "#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 smin(float a, float b, float k) {\n  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);\n  return mix(b, a, h) - k * h * (1.0 - h);\n}\n\nvoid main() {\n  vec2 uv = v_uv * 2.0 - 1.0;\n  float aspect = u_resolution.x / u_resolution.y;\n  uv.x *= aspect;\n  float t = u_time * 0.3;\n\n  // Animated blob positions\n  vec2 p1 = vec2(sin(t * 0.7) * 0.6, cos(t * 0.5) * 0.4);\n  vec2 p2 = vec2(cos(t * 0.8 + 1.0) * 0.5, sin(t * 0.6 + 2.0) * 0.5);\n  vec2 p3 = vec2(sin(t * 0.4 + 3.0) * 0.4, cos(t * 0.9 + 1.5) * 0.3);\n\n  float d1 = length(uv - p1) - 0.3;\n  float d2 = length(uv - p2) - 0.25;\n  float d3 = length(uv - p3) - 0.2;\n\n  float d = smin(smin(d1, d2, 0.3), d3, 0.3);\n\n  // Fresnel-like effect\n  float edge = smoothstep(0.02, -0.02, d);\n  float fresnel = pow(1.0 - abs(d) * 3.0, 3.0);\n  fresnel = clamp(fresnel, 0.0, 1.0);\n\n  // Metal color\n  vec3 baseColor = vec3(0.7, 0.72, 0.75);\n  vec3 highlight = vec3(0.95, 0.95, 1.0);\n  vec3 dark = vec3(0.15, 0.16, 0.2);\n\n  float n = sin(uv.x * 8.0 + t) * cos(uv.y * 8.0 - t * 0.7) * 0.5 + 0.5;\n  vec3 color = mix(dark, baseColor, edge);\n  color = mix(color, highlight, fresnel * 0.8);\n  color += n * 0.05 * edge;\n\n  // Environment reflection hint\n  float ref = sin(uv.x * 4.0 + uv.y * 3.0 + t * 2.0) * 0.5 + 0.5;\n  color += vec3(0.1, 0.12, 0.15) * ref * edge * 0.4;\n\n  fragColor = vec4(color, 1.0);\n}\n";
 export declare const PRESETS: Record<string, string>;

package/dist/shader-canvas/presets.js

@@ -49,7 +49,7 @@ void main() {
   float t = u_time * 0.3;
   vec3 color = vec3(0.02, 0.02, 0.06);
 
-  for (int i = 0; i < 60; i++) {
+  for (int i = 0; i < 36; i++) {
     float fi = float(i);
     vec2 pos = vec2(
       hash(vec2(fi, 0.0)),

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

@@ -66,6 +66,7 @@
 	});
 
 	const mergedUniforms = $derived({ ...themeUniforms, ...uniforms });
+	const effectiveFps = $derived(fps ?? 30);
 
 	function setAspectRatio(node: HTMLDivElement) {
 		$effect(() => {
@@ -101,7 +102,9 @@
 		bind:paused
 		data-shader-canvas
 		{...Object.fromEntries(
-			Object.entries({ vertexShader, pixelRatio, fps, fallback }).filter(([, v]) => v !== undefined)
+			Object.entries({ vertexShader, pixelRatio, fps: effectiveFps, fallback }).filter(
+				([, v]) => v !== undefined
+			)
 		)}
 	>
 		{#if childSnippet}
@@ -118,5 +121,4 @@
 		border-radius: inherit;
 		aspect-ratio: var(--_ratio);
 	}
-
 </style>

package/dist/sidebar/index.d.ts

@@ -1,13 +1,32 @@
-export type {
-	SidebarRootProps,
-	SidebarHeaderProps,
-	SidebarContentProps,
-	SidebarFooterProps,
-	SidebarGroupProps,
-	SidebarGroupLabelProps,
-	SidebarItemProps,
-	SidebarTriggerProps
-} from '@dryui/primitives';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+export interface SidebarRootProps extends HTMLAttributes<HTMLElement> {
+    collapsed?: boolean;
+    side?: 'left' | 'right';
+    children: Snippet;
+}
+export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+export interface SidebarContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+export interface SidebarFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+export interface SidebarGroupLabelProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+export interface SidebarItemProps extends HTMLAnchorAttributes {
+    active?: boolean;
+    children: Snippet;
+}
+export interface SidebarTriggerProps extends HTMLButtonAttributes {
+    children?: Snippet;
+}
 import SidebarRoot from './sidebar-root.svelte';
 import SidebarHeader from './sidebar-header.svelte';
 import SidebarContent from './sidebar-content.svelte';
@@ -17,12 +36,12 @@ import SidebarGroupLabel from './sidebar-group-label.svelte';
 import SidebarItem from './sidebar-item.svelte';
 import SidebarTrigger from './sidebar-trigger.svelte';
 export declare const Sidebar: {
-	Root: typeof SidebarRoot;
-	Header: typeof SidebarHeader;
-	Content: typeof SidebarContent;
-	Footer: typeof SidebarFooter;
-	Group: typeof SidebarGroup;
-	GroupLabel: typeof SidebarGroupLabel;
-	Item: typeof SidebarItem;
-	Trigger: typeof SidebarTrigger;
+    Root: typeof SidebarRoot;
+    Header: typeof SidebarHeader;
+    Content: typeof SidebarContent;
+    Footer: typeof SidebarFooter;
+    Group: typeof SidebarGroup;
+    GroupLabel: typeof SidebarGroupLabel;
+    Item: typeof SidebarItem;
+    Trigger: typeof SidebarTrigger;
 };

package/dist/sidebar/sidebar-footer.svelte

@@ -17,11 +17,12 @@
 	[data-sidebar-footer] {
 		grid-row: 3;
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
+		grid-template-columns: minmax(0, 1fr);
+		align-content: start;
+		justify-items: stretch;
 		gap: var(--dry-space-2);
-		padding: var(--dry-space-3) var(--dry-space-6);
+		padding-block: var(--dry-sidebar-footer-padding-y, var(--dry-space-3));
+		padding-inline: var(--dry-sidebar-content-padding, 0px);
 		border-top: 1px solid var(--dry-sidebar-border);
 	}
 </style>

package/dist/sidebar/sidebar-header.svelte

@@ -21,7 +21,10 @@
 		align-content: start;
 		justify-items: start;
 		gap: var(--dry-sidebar-header-gap, var(--dry-space-1));
-		padding: var(--dry-sidebar-header-padding, var(--dry-space-5) var(--dry-space-6) var(--dry-space-4));
+		padding: var(
+			--dry-sidebar-header-padding,
+			var(--dry-space-5) var(--dry-space-6) var(--dry-space-4)
+		);
 		border-bottom: 1px solid var(--dry-sidebar-border, var(--dry-color-stroke-weak));
 		color: var(--dry-sidebar-header-color, var(--dry-color-text-strong));
 		font-size: var(--dry-sidebar-header-size, var(--dry-text-base-size, 1rem));

package/dist/sidebar/sidebar-root.svelte

@@ -49,7 +49,7 @@
 <style>
 	[data-sidebar] {
 		--dry-sidebar-item-padding-x: var(--dry-space-6);
-		--dry-sidebar-content-padding: 0;
+		--dry-sidebar-content-padding: 0px;
 
 		display: grid;
 		grid-template-columns: var(--dry-sidebar-width, 320px);

package/dist/skeleton/index.d.ts

@@ -1,7 +1,7 @@
-import type { SkeletonProps as PrimitiveSkeletonProps } from '@dryui/primitives';
-export interface SkeletonProps extends PrimitiveSkeletonProps {
-	variant?: 'text' | 'circular' | 'rectangular';
-	width?: string;
-	height?: string;
+import type { HTMLAttributes } from 'svelte/elements';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string;
+    height?: string;
 }
 export { default as Skeleton } from './skeleton.svelte';

package/dist/slider/index.d.ts

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

package/dist/spacer/index.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 export interface SpacerProps extends HTMLAttributes<HTMLDivElement> {
-	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-	axis?: 'vertical' | 'horizontal';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    axis?: 'vertical' | 'horizontal';
 }
 export { default as Spacer } from './spacer.svelte';

package/dist/spinner/index.d.ts

@@ -1,6 +1,7 @@
-import type { SpinnerProps as PrimitiveSpinnerProps } from '@dryui/primitives';
-export interface SpinnerProps extends PrimitiveSpinnerProps {
-	size?: 'sm' | 'md' | 'lg';
-	color?: 'primary' | 'current';
+import type { SVGAttributes } from 'svelte/elements';
+export interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'current';
+    label?: string;
 }
 export { default as Spinner } from './spinner.svelte';

package/dist/splitter/index.d.ts

@@ -3,7 +3,7 @@ import SplitterRoot from './splitter-root.svelte';
 import SplitterPanel from './splitter-panel.svelte';
 import SplitterHandle from './splitter-handle.svelte';
 export declare const Splitter: {
-	Root: typeof SplitterRoot;
-	Panel: typeof SplitterPanel;
-	Handle: typeof SplitterHandle;
+    Root: typeof SplitterRoot;
+    Panel: typeof SplitterPanel;
+    Handle: typeof SplitterHandle;
 };

package/dist/spotlight/index.d.ts

@@ -1,3 +1,4 @@
 import type { SpotlightProps as PrimitiveSpotlightProps } from '@dryui/primitives/spotlight';
-export interface SpotlightProps extends PrimitiveSpotlightProps {}
+export interface SpotlightProps extends PrimitiveSpotlightProps {
+}
 export { default as Spotlight } from './spotlight.svelte';