lithesome 0.23.3 → 0.23.5

package/dist/components/accordion/Accordion.svelte

@@ -13,7 +13,7 @@
 		value = $bindable(''),
 		children,
 		custom,
-		onChange,
+		onValueChanged,
 		...props
 	}: AccordionProps<typeof ctx.props> = $props();
 
@@ -24,7 +24,7 @@
 			() => value,
 			(v) => {
 				value = v;
-				onChange?.(v);
+				onValueChanged?.(v);
 			}
 		)
 	});

package/dist/components/dropzone/Dropzone.svelte

@@ -17,7 +17,7 @@
 		accept = '',
 		onError,
 		onSuccess,
-		onChange,
+		onFilesChanged,
 		children,
 		validate,
 		custom,
@@ -27,10 +27,7 @@
 	let ctx = createDropzoneRootContext({
 		id: stateValue(() => id),
 		ref: stateValue(() => ref!),
-		files: stateValue(
-			() => files,
-			(v) => (files = v)
-		),
+		files: stateValue(() => files),
 		disabled: stateValue(
 			() => disabled,
 			(v) => (disabled = v)
@@ -41,7 +38,7 @@
 		onError,
 		onSuccess,
 		validate,
-		onChange
+		onFilesChanged
 	});
 </script>
 

package/dist/components/dropzone/state.svelte.js

@@ -10,6 +10,10 @@ class DropzoneRoot {
     sharedIds = new SvelteMap();
     constructor(props) {
         this.$$ = props;
+        $effect(() => {
+            this.$$.onFilesChanged?.($state.snapshot(this.$$.files.val));
+            this.errorsFound = false;
+        });
     }
     checkFileType = (file) => {
         const fileExtension = file.name.split('.').pop()?.toLowerCase();
@@ -30,7 +34,6 @@ class DropzoneRoot {
     handleFiles = (filelist) => {
         const files = Array.from(filelist);
         const length = this.$$.multiple.val ? files.length : 1;
-        this.$$.onChange?.(this.$$.files.val);
         for (let i = 0; i < length; i++) {
             const file = files[i];
             if (this.$$.maxSize.val > 0 && file.size > this.$$.maxSize.val) {

package/dist/components/pin/Pin.svelte

@@ -15,7 +15,7 @@
 		disabled = $bindable(false),
 		placeholder = '○',
 		type = $bindable('text'),
-		onChanged,
+		onValueChanged,
 		onFilled,
 		ref = $bindable(),
 		...props
@@ -26,15 +26,13 @@
 		ref: stateValue(() => ref!),
 		value: stateValue(
 			() => value,
-			(v) => {
-				value = v;
-				onChanged?.(v);
-			}
+			(v) => (value = v)
 		),
 		disabled: stateValue(() => disabled),
 		placeholder: stateValue(() => placeholder),
 		type: stateValue(() => type),
-		onFilled
+		onFilled,
+		onValueChanged
 	});
 </script>
 

package/dist/components/pin/state.svelte.js

@@ -16,7 +16,10 @@ class PinRoot {
         });
     }
     setValue = (index, value) => {
+        const oldValue = this.$$.value.val[index];
         this.$$.value.val[index] = value;
+        if (this.$$.value.val[index] !== oldValue)
+            this.$$.onValueChanged?.($state.snapshot(this.$$.value.val));
     };
     registerInput = (id) => {
         if (!this.inputs.includes(id))

package/dist/components/radiogroup/RadioGroupItem.svelte

@@ -25,4 +25,4 @@
 	});
 </script>
 
-<Element bind:ref {children} {custom} {ctx} {...props} />
+<Element bind:ref as="button" {children} {custom} {ctx} {...props} />

package/dist/components/radiogroup/state.svelte.js

@@ -10,7 +10,6 @@ class RadioGroupRoot {
         this.$$ = props;
         if (this.$$.value.val)
             this.setInitialSelected();
-        $inspect(this.items);
     }
     navigate = (action) => {
         this.selectedIndex = calculateIndex(action, this.items, this.selectedIndex);

package/dist/components/slider/Slider.svelte

@@ -20,6 +20,7 @@
 		reverse = $bindable(false),
 		disabled = $bindable(false),
 		ref = $bindable(),
+		onValueChanged,
 		...props
 	}: SliderProps<typeof ctx.state> = $props();
 
@@ -28,7 +29,10 @@
 		ref: stateValue(() => ref!),
 		value: stateValue(
 			() => value,
-			(v) => (value = v)
+			(v) => {
+				value = v;
+				onValueChanged?.(v);
+			}
 		),
 		min: stateValue(() => min),
 		max: stateValue(() => max),

package/dist/components/slider/state.svelte.js

@@ -41,11 +41,13 @@ class SliderRoot {
             : this.$$.reverse.val
                 ? top
                 : bottom;
-        this.$$.value.val = clamp(this.$$.min.val, Math.round(((this.$$.max.val - this.$$.min.val) *
+        const value = clamp(this.$$.min.val, Math.round(((this.$$.max.val - this.$$.min.val) *
             ((position - start) / length) *
             (this.$$.reverse.val ? -1 : 1) *
             (this.$$.orientation.val === 'vertical' ? -1 : 1)) /
             this.$$.step.val) * this.$$.step.val, this.$$.max.val);
+        if (this.$$.value.val !== value)
+            this.$$.value.val = value;
     };
     stepUp = () => {
         this.$$.value.val = clamp(this.$$.min.val, (this.$$.value.val += this.$$.step.val), this.$$.max.val);

package/dist/components/tabs/Tabs.svelte

@@ -14,6 +14,7 @@
 		value = $bindable(''),
 		orientation = $bindable('horizontal'),
 		ref = $bindable(),
+		onValueChanged,
 		...props
 	}: TabsProps<typeof ctx.props> = $props();
 
@@ -22,7 +23,10 @@
 		ref: stateValue(() => ref!),
 		value: stateValue(
 			() => value,
-			(v) => (value = v)
+			(v) => {
+				value = v;
+				onValueChanged?.(v);
+			}
 		),
 		orientation: stateValue(() => orientation)
 	});

package/dist/components/tags/Tags.svelte

@@ -17,6 +17,7 @@
 		whitelist = [],
 		disabled = $bindable(false),
 		max = 0,
+		onValueChanged,
 		...props
 	}: TagsProps<typeof ctx.props> = $props();
 
@@ -25,7 +26,10 @@
 		ref: stateValue(() => ref!),
 		value: stateValue(
 			() => value,
-			(v) => (value = v)
+			(v) => {
+				value = v;
+				onValueChanged?.(v);
+			}
 		),
 		blacklist: stateValue(() => blacklist),
 		whitelist: stateValue(() => whitelist),

package/dist/types/components/accordion.d.ts

@@ -10,7 +10,7 @@ export interface AccordionProps<P = any> extends Props<HTMLElement, P, Accordion
      * Fires whenever the `value` prop is changed.
      * @param val The new value
      */
-    onChange?: (val: string | string[]) => void;
+    onValueChanged?: (val: string | string[]) => void;
 }
 export interface AccordionState {
     /**

package/dist/types/components/dropzone.d.ts

@@ -76,7 +76,7 @@ export interface DropzoneProps<P = any> extends Props<HTMLElement, P, DropzoneSt
      * When files are successfully added or removed to the `files` prop, this event will be fired.
      * @param files The new value of `files`.
      */
-    onChange?: (files: File[]) => void;
+    onFilesChanged?: (files: File[]) => void;
 }
 export interface DropzoneState {
     /**

package/dist/types/components/pin.d.ts

@@ -24,7 +24,7 @@ export interface PinProps<P = any> extends Props<HTMLElement, P, PinState> {
      * Fires when the `value` prop is changed.
      * @param value The new value
      */
-    onChanged?: (value: string[]) => void;
+    onValueChanged?: (value: string[]) => void;
     /**
      * Fires when all inputs have been filled in.
      * @param value The filled out value.

package/dist/types/components/slider.d.ts

@@ -32,6 +32,11 @@ export interface SliderProps<P = any> extends Props<HTMLElement, P, SliderState>
      * ### `$bindable`
      */
     disabled?: boolean;
+    /**
+     * Fires whenever the `value` prop changes.
+     * @param value The new value of the slider.
+     */
+    onValueChanged?: (value: number) => void;
 }
 export interface SliderState {
     /**

package/dist/types/components/tabs.d.ts

@@ -10,6 +10,11 @@ export interface TabsProps<P = any> extends Props<HTMLElement, P, TabsState> {
      * The direction of the tabs.
      */
     orientation?: Orientation;
+    /**
+     * Fires whenever the `value` prop changes.
+     * @param value The new value of tabs.
+     */
+    onValueChanged?: (value: string) => void;
 }
 export interface TabsState {
     /**

package/dist/types/components/tags.d.ts

@@ -24,6 +24,11 @@ export interface TagsProps<P = any> extends Props<HTMLElement, P, TagsState> {
      * Don't allow these string to be addeed to the `value` prop.
      */
     blacklist?: string[];
+    /**
+     * Fires whenever the `value` prop changes.
+     * @param value The new value of the tags.
+     */
+    onValueChanged?: (value: string[]) => void;
 }
 export interface TagsState {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lithesome",
-	"version": "0.23.3",
+	"version": "0.23.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "bun --bun vite build && npm run prepack",