lithesome 0.24.0 → 0.24.1

package/dist/components/dropzone/DropzoneInput.svelte

@@ -7,13 +7,7 @@
 
 	const uid = $props.id();
 
-	let {
-		id = parseId(uid),
-		ref = $bindable(),
-		children,
-		custom,
-		...props
-	}: DropzoneInputProps<typeof ctx.props> = $props();
+	let { id = parseId(uid), ref = $bindable(), custom, ...props }: DropzoneInputProps<typeof ctx.props> = $props();
 
 	let ctx = useDropzoneInput({
 		id: stateValue(() => id),
@@ -21,4 +15,4 @@
 	});
 </script>
 
-<Element bind:ref as="input" {ctx} {...props} />
+<Element bind:ref {custom} as="input" {ctx} {...props} />

package/dist/components/pin/PinInput.svelte

@@ -6,7 +6,7 @@
 
 	const uid = $props.id();
 
-	let { id = parseId(uid), ref = $bindable(), ...props }: PinInputProps = $props();
+	let { id = parseId(uid), ref = $bindable(), custom, ...props }: PinInputProps = $props();
 
 	let ctx = usePinInput({
 		id: stateValue(() => id),
@@ -14,4 +14,4 @@
 	});
 </script>
 
-<Element bind:ref {ctx} as="input" {...props} />
+<Element bind:ref {ctx} {custom} as="input" {...props} />

package/dist/components/pin/PinInput.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { PinInputProps } from '../../types/index.js';
-declare const PinInput: import("svelte").Component<PinInputProps, {}, "ref">;
+declare const PinInput: import("svelte").Component<PinInputProps<any>, {}, "ref">;
 type PinInput = ReturnType<typeof PinInput>;
 export default PinInput;

package/dist/components/slider/SliderValue.svelte

@@ -6,7 +6,7 @@
 
 	const uid = $props.id();
 
-	let { id = parseId(uid), ref = $bindable(), ...props }: SliderValueProps = $props();
+	let { id = parseId(uid), ref = $bindable(), custom, ...props }: SliderValueProps = $props();
 
 	let ctx = useSliderValue({
 		id: stateValue(() => id),
@@ -14,4 +14,4 @@
 	});
 </script>
 
-<Element bind:ref {ctx} as="input" {...props} />
+<Element bind:ref {custom} {ctx} as="input" {...props} />

package/dist/components/slider/SliderValue.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SliderValueProps } from '../../types/index.js';
-declare const SliderValue: import("svelte").Component<SliderValueProps, {}, "ref">;
+declare const SliderValue: import("svelte").Component<SliderValueProps<any>, {}, "ref">;
 type SliderValue = ReturnType<typeof SliderValue>;
 export default SliderValue;

package/dist/components/tags/TagsInput.svelte

@@ -6,7 +6,7 @@
 
 	const uid = $props.id();
 
-	let { id = parseId(uid), ref = $bindable(), ...props }: TagsInputProps = $props();
+	let { id = parseId(uid), custom, ref = $bindable(), ...props }: TagsInputProps = $props();
 
 	let ctx = useTagsInput({
 		id: stateValue(() => id),
@@ -14,4 +14,4 @@
 	});
 </script>
 
-<Element as="input" bind:ref {ctx} {...props} />
+<Element as="input" {custom} bind:ref {ctx} {...props} />

package/dist/components/tags/TagsInput.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TagsInputProps } from '../../types/index.js';
-declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "ref">;
+declare const TagsInput: import("svelte").Component<TagsInputProps<any>, {}, "ref">;
 type TagsInput = ReturnType<typeof TagsInput>;
 export default TagsInput;

package/dist/internals/types.d.ts

@@ -59,7 +59,7 @@ export interface FloatingConfig {
     sameWidth?: boolean;
 }
 /** Used for when render a self-closing element, such as an input. */
-export interface PropsNoChildren<E extends HTMLElement, S> {
+export interface PropsBase<E extends HTMLElement, S> {
     /**
      * Any CSS classes to be applied to the underlying element.
      *
@@ -114,7 +114,7 @@ export interface PropsNoChildren<E extends HTMLElement, S> {
     id?: string;
 }
 /** Default, used for when a component renders an element with children */
-export interface Props<E extends HTMLElement, P, S> extends PropsNoChildren<E, S> {
+export interface Props<E extends HTMLElement, P, S> extends PropsBase<E, S> {
     /**
      * The default snippet to render.
      */
@@ -133,6 +133,19 @@ export interface Props<E extends HTMLElement, P, S> extends PropsNoChildren<E, S
 }
 /** Used if the element does render wrapper element with children, but does not allow for the custom snippet. */
 export type PropsNoCustom<E extends HTMLElement, P, S> = Omit<Props<E, P, S>, 'custom'>;
+export interface PropsNoChildren<E extends HTMLElement, P, S> extends PropsBase<E, S> {
+    /**
+     * Snippet to be used when wanting a custom implementation.
+     *
+     * This will tell Lithesome not the render the default element and any state along with it.
+     */
+    custom?: Snippet<[S extends Record<string, any> ? {
+        props: P;
+        state: S;
+    } : {
+        props: P;
+    }]>;
+}
 /** Used if the element does render children, but does not wrap said children in an element. */
 export interface PropsNoRender<S> {
     /**

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

@@ -1,4 +1,4 @@
-import type { Props } from '../../internals/index.js';
+import type { Props, PropsNoChildren } from '../../internals/index.js';
 export type DropzoneErrorType = 'maxSize' | 'invalidType' | 'multiple' | 'custom' | 'success';
 export interface DropzoneEventMaxSize {
     type: 'maxSize';
@@ -88,5 +88,5 @@ export interface DropzoneState {
      */
     errors: boolean;
 }
-export interface DropzoneInputProps<P = any> extends Props<HTMLInputElement, P, any> {
+export interface DropzoneInputProps<P = any> extends PropsNoChildren<HTMLInputElement, P, any> {
 }

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

@@ -37,7 +37,7 @@ export interface PinState {
      */
     filled: boolean;
 }
-export interface PinInputProps extends PropsNoChildren<HTMLInputElement, PinInputState> {
+export interface PinInputProps<P = any> extends PropsNoChildren<HTMLInputElement, P, PinInputState> {
 }
 export interface PinInputState {
     /**

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

@@ -72,5 +72,5 @@ export interface SliderRangeState {
      */
     percentage: number;
 }
-export interface SliderValueProps extends PropsNoChildren<HTMLElement, any> {
+export interface SliderValueProps<P = any> extends PropsNoChildren<HTMLElement, P, any> {
 }

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

@@ -44,7 +44,7 @@ export interface TagsState {
      */
     invalid: boolean;
 }
-export interface TagsInputProps extends PropsNoChildren<HTMLInputElement, TagsInputState> {
+export interface TagsInputProps<P = any> extends PropsNoChildren<HTMLInputElement, P, TagsInputState> {
 }
 export interface TagsInputState {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lithesome",
-	"version": "0.24.0",
+	"version": "0.24.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "bun --bun vite build && npm run prepack",
@@ -36,40 +36,40 @@
 		"svelte": "^5.53.12"
 	},
 	"devDependencies": {
-		"@lucide/svelte": "^0.577.0",
+		"@lucide/svelte": "^1.20.0",
 		"@prgm/sveltekit-progress-bar": "^3.0.2",
 		"@sveltejs/adapter-vercel": "^6.3.3",
-		"@sveltejs/kit": "^2.55.0",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^7.0.0",
-		"@tailwindcss/typography": "^0.5.19",
-		"@tailwindcss/vite": "^4.2.1",
-		"@types/node": "^25.5.0",
+		"@sveltejs/kit": "^2.65.1",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@tailwindcss/typography": "^0.5.20",
+		"@tailwindcss/vite": "^4.3.1",
+		"@types/node": "^25.9.3",
 		"clsx": "^2.1.1",
 		"gray-matter": "^4.0.3",
 		"mdsvex": "^0.12.7",
 		"mode-watcher": "^1.1.0",
-		"prettier": "^3.8.1",
+		"prettier": "^3.8.4",
 		"prettier-plugin-imports": "^4.3.3",
-		"prettier-plugin-svelte": "^3.5.1",
-		"prettier-plugin-tailwindcss": "^0.7.2",
-		"publint": "^0.3.18",
+		"prettier-plugin-svelte": "^4.1.1",
+		"prettier-plugin-tailwindcss": "^0.8.0",
+		"publint": "^0.3.21",
 		"rehype-external-links": "^3.0.0",
 		"rehype-slug": "^6.0.0",
-		"shiki": "^4.0.2",
-		"svelte": "^5.53.12",
-		"svelte-check": "^4.4.5",
-		"tailwind-merge": "^3.5.0",
-		"tailwindcss": "^4.2.1",
-		"typescript": "^5.9.3",
+		"shiki": "^4.2.0",
+		"svelte": "^5.56.3",
+		"svelte-check": "^4.6.0",
+		"tailwind-merge": "^3.6.0",
+		"tailwindcss": "^4.3.1",
+		"typescript": "^6.0.3",
 		"unist-util-visit": "^5.1.0",
-		"vite": "^8.0.0"
+		"vite": "^8.0.16"
 	},
 	"keywords": [
 		"svelte"
 	],
 	"dependencies": {
 		"@floating-ui/dom": "^1.7.6",
-		"focus-trap": "^8.0.0"
+		"focus-trap": "^8.2.1"
 	}
 }