@dryui/primitives 0.1.12 → 0.2.0

package/dist/index.d.ts

@@ -68,12 +68,6 @@ export { SelectableTileGroup } from './selectable-tile-group/index.js';
 export type { SelectableTileGroupRootProps, SelectableTileGroupItemProps, SelectableTileGroupIndicatorProps, SelectableTileGroupLabelProps, SelectableTileGroupDescriptionProps, SelectableTileGroupMetaProps } from './selectable-tile-group/index.js';
 export { Container } from './container/index.js';
 export type { ContainerProps } from './container/index.js';
-export { Stack } from './stack/index.js';
-export type { StackProps } from './stack/index.js';
-export { Grid } from './grid/index.js';
-export type { GridProps } from './grid/index.js';
-export { Flex } from './flex/index.js';
-export type { FlexProps } from './flex/index.js';
 export { Separator } from './separator/index.js';
 export type { SeparatorProps } from './separator/index.js';
 export { Spacer } from './spacer/index.js';

package/dist/index.js

@@ -38,11 +38,8 @@ export { Toggle } from './toggle/index.js';
 export { ToggleGroup } from './toggle-group/index.js';
 export { AffixGroup } from './affix-group/index.js';
 export { SelectableTileGroup } from './selectable-tile-group/index.js';
-// Phase 4 — Layout Primitives
+// Phase 4 — Layout Utilities
 export { Container } from './container/index.js';
-export { Stack } from './stack/index.js';
-export { Grid } from './grid/index.js';
-export { Flex } from './flex/index.js';
 export { Separator } from './separator/index.js';
 export { Spacer } from './spacer/index.js';
 export { AspectRatio } from './aspect-ratio/index.js';

package/dist/map/map-marker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { getMapCtx, setMarkerCtx } from './context.svelte.js';
-	import { onDestroy } from 'svelte';
+	import { onDestroy, untrack } from 'svelte';
 	import type { LngLat, MapMarkerInstance, MarkerOptions } from './types.js';
 
 	interface Props {
@@ -30,10 +30,10 @@
 	$effect(() => {
 		if (!ctx.loaded || !ctx.map || !ctx.lib) return;
 
-		// Remove previous marker if it exists
-		if (markerInstance) {
-			markerInstance.remove();
-			markerInstance = null;
+		// Remove previous marker without tracking markerInstance as a dependency
+		const prev = untrack(() => markerInstance);
+		if (prev) {
+			prev.remove();
 		}
 
 		const opts: MarkerOptions = {};

package/dist/map/map-popup.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { getMapCtx, getMarkerCtx } from './context.svelte.js';
-	import { onDestroy } from 'svelte';
+	import { onDestroy, untrack } from 'svelte';
 	import type { MapPopupInstance } from './types.js';
 
 	interface Props {
@@ -29,10 +29,10 @@
 	$effect(() => {
 		if (!mapCtx.loaded || !mapCtx.map || !mapCtx.lib || !markerCtx.marker || !contentEl) return;
 
-		// Remove previous popup
-		if (popupInstance) {
-			popupInstance.remove();
-			popupInstance = null;
+		// Remove previous popup without tracking popupInstance as a dependency
+		const prev = untrack(() => popupInstance);
+		if (prev) {
+			prev.remove();
 		}
 
 		try {

package/dist/pin-input/pin-input-root.svelte

@@ -40,13 +40,11 @@
 	const isDisabled = $derived(disabled || formCtx?.disabled || false);
 	const hasError = $derived(formCtx?.hasError || false);
 
-	let inputEl: HTMLInputElement | undefined = $state();
+	let inputEl: HTMLInputElement | undefined;
 	let isFocused = $state(false);
 	let mirrorSelectionStart = $state<number | null>(null);
 	let mirrorSelectionEnd = $state<number | null>(null);
-	let completeFired = $state(false);
 
-	// Build validation regex from type or pattern prop
 	const validationRegex = $derived(pattern ?? (type === 'numeric' ? /^\d+$/ : /^[a-zA-Z0-9]+$/));
 
 	// Compute cells from value
@@ -95,25 +93,28 @@
 		mirrorSelectionEnd = inputEl.selectionEnd;
 	}
 
-	$effect(() => {
-		const handler = () => {
-			if (document.activeElement === inputEl) {
-				syncSelection();
+	function captureInput(node: HTMLInputElement) {
+		inputEl = node;
+		return () => {
+			if (inputEl === node) {
+				inputEl = undefined;
 			}
 		};
-		document.addEventListener('selectionchange', handler);
-		return () => document.removeEventListener('selectionchange', handler);
-	});
+	}
 
-	// Reset completeFired when value becomes incomplete
-	$effect(() => {
-		if (value.length < length) {
-			completeFired = false;
+	function maybeFireComplete(previousValue: string, nextValue: string) {
+		if (nextValue.length !== length) return;
+		if (previousValue.length === length && previousValue === nextValue) return;
+
+		oncomplete?.(nextValue);
+		if (blurOnComplete) {
+			inputEl?.blur();
 		}
-	});
+	}
 
 	function handleInput(e: Event) {
 		const input = e.target as HTMLInputElement;
+		const previousValue = value;
 		let newValue = input.value;
 
 		// Filter by validation regex (character by character)
@@ -128,18 +129,12 @@
 		value = newValue;
 		syncSelection();
 
-		// Fire oncomplete once when fully filled
-		if (newValue.length === length && !completeFired) {
-			completeFired = true;
-			oncomplete?.(newValue);
-			if (blurOnComplete) {
-				inputEl?.blur();
-			}
-		}
+		maybeFireComplete(previousValue, newValue);
 	}
 
 	function handlePaste(e: ClipboardEvent) {
 		e.preventDefault();
+		const previousValue = value;
 		let pasted = e.clipboardData?.getData('text') ?? '';
 		if (pasteTransformer) {
 			pasted = pasteTransformer(pasted);
@@ -171,13 +166,7 @@
 			syncSelection();
 		});
 
-		if (newValue.length === length && !completeFired) {
-			completeFired = true;
-			oncomplete?.(newValue);
-			if (blurOnComplete) {
-				inputEl?.blur();
-			}
-		}
+		maybeFireComplete(previousValue, newValue);
 	}
 
 	function handleFocus() {
@@ -219,13 +208,10 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y_role_supports_aria_props -->
 <div
 	role="group"
 	aria-label="PIN input"
 	aria-describedby={formCtx?.describedBy}
-	aria-invalid={hasError || undefined}
-	aria-errormessage={formCtx?.errorMessageId}
 	data-pin-input-root
 	data-disabled={isDisabled || undefined}
 	data-error={hasError || undefined}
@@ -235,7 +221,7 @@
 	{...rest}
 >
 	<input
-		bind:this={inputEl}
+		{@attach captureInput}
 		type="text"
 		inputmode={type === 'numeric' ? 'numeric' : 'text'}
 		autocomplete="one-time-code"
@@ -243,6 +229,9 @@
 		{value}
 		id={formCtx?.id}
 		aria-label="PIN input"
+		aria-describedby={formCtx?.describedBy}
+		aria-invalid={hasError || undefined}
+		aria-errormessage={formCtx?.errorMessageId}
 		aria-required={formCtx?.required || undefined}
 		disabled={isDisabled}
 		spellcheck={false}
@@ -253,6 +242,8 @@
 		onfocus={handleFocus}
 		onblur={handleBlur}
 		onkeydown={handleKeydown}
+		onkeyup={syncSelection}
+		onselect={syncSelection}
 	/>
 
 	{#if children}

package/dist/select/index.d.ts

@@ -6,7 +6,12 @@ export interface SelectRootProps {
     value?: string;
     disabled?: boolean;
     name?: string;
-    children: Snippet;
+    options?: Array<string | {
+        value: string;
+        label: string;
+    }>;
+    placeholder?: string;
+    children?: Snippet;
 }
 export interface SelectTriggerProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/primitives",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -266,11 +266,6 @@
       "svelte": "./dist/file-upload/index.js",
       "default": "./dist/file-upload/index.js"
     },
-    "./flex": {
-      "types": "./dist/flex/index.d.ts",
-      "svelte": "./dist/flex/index.js",
-      "default": "./dist/flex/index.js"
-    },
     "./flip-card": {
       "types": "./dist/flip-card/index.d.ts",
       "svelte": "./dist/flip-card/index.js",
@@ -331,11 +326,6 @@
       "svelte": "./dist/gradient-mesh/index.js",
       "default": "./dist/gradient-mesh/index.js"
     },
-    "./grid": {
-      "types": "./dist/grid/index.d.ts",
-      "svelte": "./dist/grid/index.js",
-      "default": "./dist/grid/index.js"
-    },
     "./hero": {
       "types": "./dist/hero/index.d.ts",
       "svelte": "./dist/hero/index.js",
@@ -621,11 +611,6 @@
       "svelte": "./dist/spotlight/index.js",
       "default": "./dist/spotlight/index.js"
     },
-    "./stack": {
-      "types": "./dist/stack/index.d.ts",
-      "svelte": "./dist/stack/index.js",
-      "default": "./dist/stack/index.js"
-    },
     "./stat-card": {
       "types": "./dist/stat-card/index.d.ts",
       "svelte": "./dist/stat-card/index.js",
@@ -1021,11 +1006,6 @@
         "svelte": "./dist/file-upload/index.js",
         "default": "./dist/file-upload/index.js"
       },
-      "./flex": {
-        "types": "./dist/flex/index.d.ts",
-        "svelte": "./dist/flex/index.js",
-        "default": "./dist/flex/index.js"
-      },
       "./flip-card": {
         "types": "./dist/flip-card/index.d.ts",
         "svelte": "./dist/flip-card/index.js",
@@ -1086,11 +1066,6 @@
         "svelte": "./dist/gradient-mesh/index.js",
         "default": "./dist/gradient-mesh/index.js"
       },
-      "./grid": {
-        "types": "./dist/grid/index.d.ts",
-        "svelte": "./dist/grid/index.js",
-        "default": "./dist/grid/index.js"
-      },
       "./hero": {
         "types": "./dist/hero/index.d.ts",
         "svelte": "./dist/hero/index.js",
@@ -1376,11 +1351,6 @@
         "svelte": "./dist/spotlight/index.js",
         "default": "./dist/spotlight/index.js"
       },
-      "./stack": {
-        "types": "./dist/stack/index.d.ts",
-        "svelte": "./dist/stack/index.js",
-        "default": "./dist/stack/index.js"
-      },
       "./stat-card": {
         "types": "./dist/stat-card/index.d.ts",
         "svelte": "./dist/stat-card/index.js",