lithesome 0.20.1 → 0.20.2

package/dist/components/accordion/Accordion.svelte

@@ -18,7 +18,7 @@
 	}: AccordionProps<typeof ctx.props, typeof ctx.state> = $props();
 
 	let ctx = createAccordionRootContext({
-		id,
+		id: stateValue(() => id),
 		ref: stateValue(() => ref!),
 		value: stateValue(
 			() => value,

package/dist/components/accordion/AccordionButton.svelte

@@ -14,7 +14,7 @@
 		...props
 	}: AccordionButtonProps<typeof ctx.props, typeof ctx.state> = $props();
 
-	let ctx = useAccordionButton({ id, ref: stateValue(() => ref!) });
+	let ctx = useAccordionButton({ id: stateValue(() => id), ref: stateValue(() => ref!) });
 </script>
 
 <Element bind:ref {children} {custom} {ctx} as="button" {...props} />

package/dist/components/accordion/AccordionContent.svelte

@@ -14,7 +14,7 @@
 		...props
 	}: AccordionContentProps<typeof ctx.props, typeof ctx.state> = $props();
 
-	let ctx = useAccordionContent({ id, ref: stateValue(() => ref!) });
+	let ctx = useAccordionContent({ id: stateValue(() => id), ref: stateValue(() => ref!) });
 </script>
 
 <Element bind:ref {children} {custom} {ctx} visible={ctx._item.Active} {...props} />

package/dist/components/accordion/AccordionHeading.svelte

@@ -17,7 +17,7 @@
 	}: AccordionHeadingProps<typeof ctx.props, typeof ctx.state> = $props();
 
 	let ctx = useAccordionHeading({
-		id,
+		id: stateValue(() => id),
 		ref: stateValue(() => ref!),
 		level: stateValue(() => level)
 	});

package/dist/components/accordion/AccordionItem.svelte

@@ -18,7 +18,7 @@
 	}: AccordionItemProps<typeof ctx.props, typeof ctx.state> = $props();
 
 	let ctx = createAccordionItemContext({
-		id,
+		id: stateValue(() => id),
 		ref: stateValue(() => ref!),
 		value: stateValue(() => value),
 		disabled: stateValue(() => disabled)

package/dist/components/accordion/state.svelte.d.ts

@@ -3,8 +3,7 @@ import type { GetInternalProps } from '../../internals/types.js';
 import type { AccordionButtonProps, AccordionContentProps, AccordionHeadingProps, AccordionItemProps, AccordionProps } from '../../types/index.js';
 type RootProps = GetInternalProps<AccordionProps>;
 export declare class AccordionRoot {
-    $id: string;
-    $value: RootProps['value'];
+    $$: RootProps;
     items: string[];
     constructor(props: RootProps);
     toggleActiveItem: (itemId: string) => void;
@@ -19,9 +18,7 @@ export declare class AccordionRoot {
 }
 type ItemProps = GetInternalProps<AccordionItemProps>;
 declare class AccordionItem {
-    $id: string;
-    $value: ItemProps['value'];
-    $disabled: ItemProps['disabled'];
+    $$: ItemProps;
     _root: AccordionRoot;
     sharedIds: SvelteMap<"content" | "item" | "button", string>;
     Active: boolean;
@@ -38,8 +35,7 @@ declare class AccordionItem {
 }
 type HeadingProps = GetInternalProps<AccordionHeadingProps>;
 declare class AccordionHeading {
-    $id: HeadingProps['id'];
-    $level: HeadingProps['level'];
+    $$: HeadingProps;
     _root: AccordionRoot;
     _item: AccordionItem;
     constructor(root: AccordionRoot, item: AccordionItem, props: HeadingProps);
@@ -55,7 +51,7 @@ declare class AccordionHeading {
 }
 type ButtonProps = GetInternalProps<AccordionButtonProps>;
 declare class AccordionButton {
-    $id: ButtonProps['id'];
+    $$: ButtonProps;
     _item: AccordionItem;
     _root: AccordionRoot;
     constructor(item: AccordionItem, root: AccordionRoot, props: ButtonProps);
@@ -74,7 +70,7 @@ declare class AccordionButton {
 }
 type ContentProps = GetInternalProps<AccordionContentProps>;
 declare class AccordionContent {
-    $id: ContentProps['id'];
+    $$: ContentProps;
     _item: AccordionItem;
     _root: AccordionRoot;
     constructor(item: AccordionItem, root: AccordionRoot, props: ContentProps);

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

@@ -4,125 +4,118 @@ import { buildContext } from '../../internals/context.svelte.js';
 import { addEvents, createAttributes } from '../../internals/utils.svelte.js';
 const { attrs } = createAttributes('accordion', ['root', 'item', 'heading', 'button', 'content']);
 export class AccordionRoot {
-    $id;
-    $value;
+    $$;
     items = $state([]);
     constructor(props) {
-        this.$value = props.value;
-        this.$id = props.id;
+        this.$$ = props;
     }
     toggleActiveItem = (itemId) => {
-        if (Array.isArray(this.$value.val)) {
-            if (this.$value.val.includes(itemId))
-                this.$value.val = this.$value.val.filter((el) => el != itemId);
+        if (Array.isArray(this.$$.value.val)) {
+            if (this.$$.value.val.includes(itemId))
+                this.$$.value.val = this.$$.value.val.filter((el) => el != itemId);
             else
-                this.$value.val.push(itemId);
+                this.$$.value.val.push(itemId);
+            console.log(this.$$.value.val);
         }
         else {
-            if (this.$value.val === itemId)
-                this.$value.val = '';
+            if (this.$$.value.val === itemId)
+                this.$$.value.val = '';
             else
-                this.$value.val = itemId;
+                this.$$.value.val = itemId;
         }
     };
     isActive = (value) => {
-        return typeof this.$value.val === 'string' ? this.$value.val === value : this.$value.val.includes(value);
+        return typeof this.$$.value.val === 'string' ? this.$$.value.val === value : this.$$.value.val.includes(value);
     };
     props = $derived.by(() => ({
-        id: this.$id,
+        id: this.$$.id.val,
         [attrs.root]: ''
     }));
     state = $derived.by(() => ({
-        value: this.$value.val
+        value: this.$$.value.val
     }));
 }
 class AccordionItem {
-    $id;
-    $value;
-    $disabled;
+    $$;
     _root;
     sharedIds = new SvelteMap();
-    Active = $derived.by(() => this._root.isActive(this.$value.val));
+    Active = $derived.by(() => this._root.isActive(this.$$.value.val));
     constructor(root, props) {
+        this.$$ = props;
         this._root = root;
-        this.$value = props.value;
-        this.$disabled = props.disabled;
-        this.$id = props.id;
-        this.sharedIds.set('item', this.$id);
+        this.sharedIds.set('item', this.$$.id.val);
     }
     props = $derived.by(() => ({
-        id: this.$id,
+        id: this.$$.id.val,
         [attrs.item]: '',
-        'data-value': this.$value.val
+        'data-value': this.$$.value.val
     }));
     state = $derived.by(() => ({
         active: this.Active,
-        disabled: this.$disabled.val
+        disabled: this.$$.disabled.val
     }));
 }
 class AccordionHeading {
-    $id;
-    $level;
+    $$;
     _root;
     _item;
     constructor(root, item, props) {
+        this.$$ = props;
         this._root = root;
         this._item = item;
-        this.$level = props.level;
-        this.$id = props.id;
     }
     props = $derived.by(() => ({
-        id: this.$id,
+        id: this.$$.id.val,
         [attrs.heading]: '',
         role: 'heading',
-        'aria-level': this.$level.val
+        'aria-level': this.$$.level.val
     }));
     state = $derived.by(() => ({
         active: this._item.Active
     }));
 }
 class AccordionButton {
-    $id;
+    $$;
     _item;
     _root;
     constructor(item, root, props) {
+        this.$$ = props;
         this._item = item;
         this._root = root;
-        this.$id = props.id;
-        this._item.sharedIds.set('button', this.$id);
+        this._item.sharedIds.set('button', this.$$.id.val);
     }
     props = $derived.by(() => ({
-        id: this.$id,
+        id: this.$$.id.val,
         [attrs.button]: '',
         type: 'button',
         'aria-expanded': this._item.Active,
         'aria-controls': this._item.Active ? this._item.sharedIds.get('content') : undefined,
-        tabindex: this._item.$disabled.val ? -1 : 0,
+        tabindex: this._item.$$.disabled.val ? -1 : 0,
         ...attach((node) => addEvents(node, {
             click: () => {
-                if (this._item.$disabled.val)
+                if (this._item.$$.disabled.val)
                     return;
-                this._root.toggleActiveItem(this._item.$value.val);
+                this._root.toggleActiveItem(this._item.$$.value.val);
             }
         }))
     }));
     state = $derived.by(() => ({
         active: this._item.Active,
-        disabled: this._item.$disabled.val
+        disabled: this._item.$$.disabled.val
     }));
 }
 class AccordionContent {
-    $id;
+    $$;
     _item;
     _root;
     constructor(item, root, props) {
+        this.$$ = props;
         this._item = item;
         this._root = root;
-        this.$id = props.id;
-        this._item.sharedIds.set('content', this.$id);
+        this._item.sharedIds.set('content', this.$$.id.val);
     }
     props = $derived.by(() => ({
-        id: this.$id,
+        id: this.$$.id.val,
         [attrs.content]: ''
     }));
     state = $derived.by(() => ({

package/dist/components/checkbox/CheckboxButton.svelte

@@ -22,7 +22,7 @@
 	}: CheckboxButtonProps<typeof ctx.props, typeof ctx.state> = $props();
 
 	let ctx = useCheckboxButton({
-		id,
+		id: stateValue(() => id),
 		ref: stateValue(() => ref!),
 		checked: stateValue(
 			() => checked,

package/dist/components/checkbox/CheckboxGroup.svelte

@@ -19,7 +19,7 @@
 	}: CheckboxGroupProps<typeof ctx.props, typeof ctx.state> = $props();
 
 	let ctx = createCheckboxGroupContext({
-		id,
+		id: stateValue(() => id),
 		ref: stateValue(() => ref!),
 		checked: stateValue(
 			() => checked,

package/dist/components/checkbox/CheckboxLabel.svelte

@@ -16,7 +16,7 @@
 	}: CheckboxLabelProps<typeof ctx.props, typeof ctx.state> = $props();
 
 	let ctx = useCheckboxLabel({
-		id,
+		id: stateValue(() => id),
 		ref: stateValue(() => ref!)
 	});
 </script>

package/dist/components/checkbox/state.svelte.d.ts

@@ -3,9 +3,7 @@ import type { GetInternalProps } from '../../internals/types.js';
 import type { CheckboxButtonProps, CheckboxGroupProps, CheckboxLabelProps } from '../../types/index.js';
 type GroupProps = GetInternalProps<CheckboxGroupProps>;
 declare class CheckboxGroup {
-    $id: GroupProps['id'];
-    $checked: GroupProps['checked'];
-    $disabled: GroupProps['disabled'];
+    $$: GroupProps;
     sharedIds: SvelteMap<"button" | "label", string>;
     constructor(props: GroupProps);
     props: {
@@ -19,11 +17,7 @@ declare class CheckboxGroup {
 }
 type ButtonProps = GetInternalProps<CheckboxButtonProps>;
 declare class CheckboxButton {
-    $id: ButtonProps['id'];
-    $checked: ButtonProps['checked'];
-    $disabled: ButtonProps['disabled'];
-    $name: ButtonProps['name'];
-    $required: ButtonProps['required'];
+    $$: ButtonProps;
     _group?: CheckboxGroup;
     Checked: import("../../types/index.js").CheckboxChecked;
     Disabled: boolean;
@@ -46,7 +40,7 @@ declare class CheckboxButton {
 }
 type LabelProps = GetInternalProps<CheckboxLabelProps>;
 declare class CheckboxLabel {
-    $id: LabelProps['id'];
+    $$: LabelProps;
     _group: CheckboxGroup;
     constructor(group: CheckboxGroup, props: LabelProps);
     props: {

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

@@ -2,52 +2,40 @@ import { SvelteMap } from 'svelte/reactivity';
 import { addEvents, attach, buildContext, createAttributes } from '../../internals/index.js';
 const { attrs } = createAttributes('checkbox', ['group', 'button', 'group', 'label']);
 class CheckboxGroup {
-    $id;
-    $checked;
-    $disabled;
+    $$;
     sharedIds = new SvelteMap();
     constructor(props) {
-        this.$id = props.id;
-        this.$checked = props.checked;
-        this.$disabled = props.disabled;
+        this.$$ = props;
     }
     props = $derived.by(() => ({
-        id: this.$id,
+        id: this.$$.id.val,
         [attrs.group]: ''
     }));
     state = $derived.by(() => ({
-        checked: this.$checked.val,
-        disabled: this.$disabled.val
+        checked: this.$$.checked.val,
+        disabled: this.$$.disabled.val
     }));
 }
 class CheckboxButton {
-    $id;
-    $checked;
-    $disabled;
-    $name;
-    $required;
+    $$;
     _group;
-    Checked = $derived.by(() => this._group?.$checked.val || this.$checked.val);
-    Disabled = $derived.by(() => this._group?.$disabled.val || this.$disabled.val);
+    Checked = $derived.by(() => this._group?.$$.checked.val || this.$$.checked.val);
+    Disabled = $derived.by(() => this._group?.$$.disabled.val || this.$$.disabled.val);
     CheckedBool = $derived.by(() => !!this.Checked);
     constructor(props, group) {
-        this.$id = props.id;
-        this.$checked = props.checked;
-        this.$disabled = props.disabled;
-        this.$name = props.name;
-        this.$required = props.required;
+        this.$$ = props;
         if (group) {
             this._group = group;
-            this._group.sharedIds.set('button', this.$id);
+            this._group.sharedIds.set('button', this.$$.id.val);
         }
     }
     props = $derived.by(() => ({
-        id: this.$id,
+        id: this.$$.id.val,
         [attrs.button]: '',
         role: 'checkbox',
         type: 'button',
         'aria-checked': this.Checked,
-        'aria-required': this.$required.val || undefined,
+        'aria-required': this.$$.required.val || undefined,
         'aria-labelledby': this._group?.sharedIds.get('label'),
         disabled: this.Disabled || undefined,
         ...attach((node) => addEvents(node, {
@@ -55,11 +43,11 @@ class CheckboxButton {
                 if (this.Disabled)
                     return;
                 if (this._group) {
-                    this._group.$checked.val = !this._group.$checked.val;
-                    this.$checked.val = this._group.$checked.val;
+                    this._group.$$.checked.val = !this._group.$$.checked.val;
+                    this.$$.checked.val = this._group.$$.checked.val;
                 }
                 else
-                    this.$checked.val = !this.$checked.val;
+                    this.$$.checked.val = !this.$$.checked.val;
             }
         }))
     }));
@@ -69,21 +57,21 @@ class CheckboxButton {
     }));
 }
 class CheckboxLabel {
-    $id;
+    $$;
     _group;
     constructor(group, props) {
+        this.$$ = props;
         this._group = group;
-        this.$id = props.id;
-        this._group.sharedIds.set('label', this.$id);
+        this._group.sharedIds.set('label', this.$$.id.val);
     }
     props = $derived.by(() => ({
-        id: this.$id,
+        id: this.$$.id.val,
         [attrs.label]: '',
         for: this._group.sharedIds.get('button')
     }));
     state = $derived.by(() => ({
-        checked: this._group.$checked.val,
-        disabled: this._group.$disabled.val
+        checked: this._group.$$.checked.val,
+        disabled: this._group.$$.disabled.val
     }));
 }
 //

package/dist/components/dropzone/state.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { GetInternalProps } from '../../internals/types.js';
+import type { DropzoneProps } from '../../types/index.js';
+type RootProps = GetInternalProps<DropzoneProps>;
+declare class DropzoneRoot {
+    $id: RootProps['id'];
+    $files: RootProps['files'];
+    $multiple: RootProps['multiple'];
+    $maxSize: RootProps['maxSize'];
+    $accept: RootProps['accept'];
+    $disabled: RootProps['disabled'];
+    constructor(props: RootProps);
+    props: {
+        id: {
+            val: string;
+        };
+        "data-dropzone-root": string;
+    };
+    state: {};
+}
+export declare const createDropzoneRootContext: (props: RootProps) => DropzoneRoot;
+export {};

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

@@ -0,0 +1,37 @@
+import { buildContext, createAttributes } from '../../internals/index.js';
+const { attrs, selectors } = createAttributes('dropzone', ['root', 'input']);
+class DropzoneRoot {
+    $id;
+    $files;
+    $multiple;
+    $maxSize;
+    $accept;
+    $disabled;
+    constructor(props) {
+        this.$id = props.id;
+        this.$files = props.files;
+        this.$multiple = props.multiple;
+        this.$maxSize = props.maxSize;
+        this.$accept = props.accept;
+        this.$disabled = props.disabled;
+    }
+    props = $derived.by(() => ({
+        id: this.$id,
+        [attrs.root]: ''
+    }));
+    state = $derived.by(() => ({}));
+}
+// type InputProps = GetInternalProps<DropzoneInputProps>;
+// class DropzoneInput {
+// 	$id: InputProps['id'];
+// 	_root: DropzoneRoot;
+// 	constructor(root:DropzoneRoot, props: InputProps) {
+// 	}
+// }
+//
+// ~BUILDERS
+//
+const rootCtx = buildContext(DropzoneRoot);
+export const createDropzoneRootContext = (props) => {
+    return rootCtx.create(props);
+};

package/dist/components/hovercard/HovercardArrow.svelte

@@ -15,7 +15,7 @@
 	}: HovercardArrowProps<typeof ctx.props> = $props();
 
 	let ctx = useHovercardArrow({
-		id,
+		id: stateValue(() => id),
 		ref: stateValue(() => ref!)
 	});
 </script>

package/dist/components/hovercard/HovercardContent.svelte

@@ -15,9 +15,9 @@
 	}: HovercardContentProps<typeof ctx.props, typeof ctx.state> = $props();
 
 	let ctx = useHovercardContent({
-		id,
+		id: stateValue(() => id),
 		ref: stateValue(() => ref!)
 	});
 </script>
 
-<Element bind:ref {children} {custom} visible={ctx._root.$visible.val} {ctx} {...props} />
+<Element bind:ref {children} {custom} visible={ctx._root.$$.visible.val} {ctx} {...props} />

package/dist/components/hovercard/HovercardTrigger.svelte

@@ -15,7 +15,7 @@
 	}: HovercardTriggerProps<typeof ctx.props> = $props();
 
 	let ctx = useHovercardTrigger({
-		id,
+		id: stateValue(() => id),
 		ref: stateValue(() => ref!)
 	});
 </script>

package/dist/components/hovercard/state.svelte.d.ts

@@ -1,14 +1,10 @@
 import { SvelteMap } from 'svelte/reactivity';
 import { Floating } from '../../internals/index.js';
-import type { GetInternalProps, GetInternalPropsNoId } from '../../internals/index.js';
+import type { GetInternalProps } from '../../internals/index.js';
 import type { HovercardArrowProps, HovercardContentProps, HovercardProps, HovercardTriggerProps } from '../../types/index.js';
-type RootProps = GetInternalPropsNoId<HovercardProps>;
+type RootProps = GetInternalProps<HovercardProps>;
 declare class HovercardRoot extends Floating {
-    $visible: RootProps['visible'];
-    $disabled: RootProps['disabled'];
-    $delay: RootProps['delay'];
-    $portalTarget: RootProps['portalTarget'];
-    $floatingConfig: RootProps['floatingConfig'];
+    $$: RootProps;
     sharedIds: SvelteMap<"content" | "trigger", string>;
     timeout: {
         set(fn: () => void, delay: number): void;
@@ -28,7 +24,7 @@ declare class HovercardRoot extends Floating {
 }
 type TriggerProps = GetInternalProps<HovercardTriggerProps>;
 declare class HovercardTrigger {
-    $id: TriggerProps['id'];
+    $$: TriggerProps;
     _root: HovercardRoot;
     constructor(root: HovercardRoot, props: TriggerProps);
     props: {
@@ -42,7 +38,7 @@ declare class HovercardTrigger {
 }
 type ContentProps = GetInternalProps<HovercardContentProps>;
 declare class HovercardContent {
-    $id: ContentProps['id'];
+    $$: ContentProps;
     _root: HovercardRoot;
     constructor(root: HovercardRoot, props: ContentProps);
     props: {
@@ -55,7 +51,7 @@ declare class HovercardContent {
 }
 type ArrowProps = GetInternalProps<HovercardArrowProps>;
 declare class HovercardArrow {
-    $id: ArrowProps['id'];
+    $$: ArrowProps;
     _root: HovercardRoot;
     constructor(root: HovercardRoot, props: ArrowProps);
     props: {