@svelte-atoms/core 1.0.0-alpha.14

package/dist/components/input/bond.svelte.js

@@ -0,0 +1,76 @@
+import { createAttachmentKey } from 'svelte/attachments';
+import { getContext, setContext } from 'svelte';
+import { Bond, BondState } from '../../shared/bond.svelte';
+const INPUT_ELEMENTS_KIND = {
+    root: 'input-root',
+    input: 'input-field',
+    placeholder: 'input-placeholder'
+};
+export class InputBond extends Bond {
+    static CONTEXT_KEY = '@atomic-sv/context/input';
+    constructor(s) {
+        super(s);
+    }
+    get value() {
+        return this.state.props.value;
+    }
+    get number() {
+        return this.state.props.number;
+    }
+    get date() {
+        return this.state.props.date;
+    }
+    get files() {
+        return this.state.props.files ?? [];
+    }
+    share() {
+        return InputBond.set(this);
+    }
+    root() {
+        const id = [INPUT_ELEMENTS_KIND.root, this.id].join('-');
+        return {
+            id,
+            role: 'group',
+            'data-atom': 'input',
+            'data-kind': 'root',
+            [createAttachmentKey()]: (node) => {
+                this.elements.root = node;
+            }
+        };
+    }
+    input() {
+        const id = [INPUT_ELEMENTS_KIND.input, this.id].join('-');
+        return {
+            id,
+            role: 'group',
+            'data-atom': 'input',
+            'data-kind': 'value',
+            [createAttachmentKey()]: (node) => {
+                this.elements.input = node;
+            }
+        };
+    }
+    placeholder() {
+        const id = [INPUT_ELEMENTS_KIND.placeholder, this.id].join('-');
+        return {
+            id,
+            role: 'group',
+            'data-atom': 'input',
+            'data-kind': 'placeholder',
+            [createAttachmentKey()]: (node) => {
+                this.elements.placeholder = node;
+            }
+        };
+    }
+    static get() {
+        return getContext(InputBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(InputBond.CONTEXT_KEY, bond);
+    }
+}
+export class InputState extends BondState {
+    constructor(props) {
+        super(props);
+    }
+}

package/dist/components/input/index.d.ts

@@ -0,0 +1,2 @@
+export * as Input from './atoms';
+export * from './bond.svelte';

package/dist/components/input/index.js

@@ -0,0 +1,2 @@
+export * as Input from './atoms';
+export * from './bond.svelte';

package/dist/components/input/input-icon.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { Icon, type IconProps } from '../icon';
+
+	let { class: klass = '', children = undefined, ...restProps }: IconProps = $props();
+</script>
+
+<Icon
+	class={[
+		'flex aspect-square h-full items-center justify-center bg-transparent text-sm leading-0',
+		klass
+	]}
+	{...restProps}
+>
+	{@render children?.()}
+</Icon>

package/dist/components/input/input-icon.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconProps } from '../icon';
+declare const InputIcon: import("svelte").Component<IconProps, {}, "">;
+type InputIcon = ReturnType<typeof InputIcon>;
+export default InputIcon;

package/dist/components/input/input-placeholder.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { InputBond } from './bond.svelte';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+	import { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+
+	type Element = ElementType<E>;
+
+	const bond = InputBond.get();
+
+	const preset = getPreset('input.placeholder');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? ('div' as E),
+		base = preset?.base as B,
+		children = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const placeholderProps = $derived({
+		...bond?.placeholder(),
+		...restProps
+	});
+
+	const shouldShowPlaceholder = $derived.by(() => {
+		const type = bond?.elements?.input?.type ?? '';
+
+		if (['radio', 'checkbox'].includes(type)) {
+			return false;
+		}
+
+		if (['files'].includes(type)) {
+			return !bond?.state.props.files?.length;
+		}
+
+		console.log(!bond?.state.props.value);
+
+		return !bond?.state.props.value;
+	});
+</script>
+
+{#if shouldShowPlaceholder}
+	<HtmlAtom
+		class={[
+			'pointer-events-none absolute inset-0 flex h-full w-full items-center px-1 leading-1 outline-none',
+			toClassValue.apply(bond, [preset?.class]),
+			toClassValue.apply(bond, [klass])
+		]}
+		style="left:{bond?.elements?.input?.offsetLeft ?? 0}px"
+		{...placeholderProps}
+	>
+		{@render children?.()}
+	</HtmlAtom>
+{/if}

package/dist/components/input/input-placeholder.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: any;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const InputPlaceholder: $$IsomorphicComponent;
+type InputPlaceholder<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof InputPlaceholder<E, B>>;
+export default InputPlaceholder;

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

@@ -0,0 +1,83 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { InputBond, InputState, type InputStateProps } from './bond.svelte';
+	import { defineProperty, defineState, toClassValue } from '../../utils';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+	import { getPreset } from '../../context';
+
+	type Element = ElementType<E>;
+
+	const preset = getPreset('stack');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? ('div' as E),
+		base = preset?.base as B,
+		value,
+		checked = undefined,
+		files = [],
+		children = undefined,
+		factory = _factory,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const bondProps = defineState<InputStateProps>([
+		defineProperty(
+			'value',
+			() => value,
+			(v) => {
+				value = v;
+			}
+		),
+
+		defineProperty(
+			'checked',
+			() => checked,
+			(v) => {
+				checked = v;
+			}
+		),
+
+		defineProperty(
+			'files',
+			() => files,
+			(v) => {
+				files = [...v];
+			}
+		)
+	]);
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new InputState(() => props);
+
+		return new InputBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	class={[
+		'border-border text-foreground bg-background relative flex h-10 items-center overflow-hidden rounded-md border',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [klass])
+	]}
+	{as}
+	{base}
+	{...rootProps}
+>
+	{@render children?.({ input: bond })}
+</HtmlAtom>

package/dist/components/input/input-root.svelte.d.ts

@@ -0,0 +1,30 @@
+import { InputBond } from './bond.svelte';
+import { type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: any;
+    exports: {
+        getBond: () => InputBond;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {
+        getBond: () => InputBond;
+    };
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const InputRoot: $$IsomorphicComponent;
+type InputRoot<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof InputRoot<E, B>>;
+export default InputRoot;

package/dist/components/input/input-value.svelte

@@ -0,0 +1,110 @@
+<script module lang="ts">
+	export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
+
+	export type InputProps = {
+		value?: string;
+		files?: File[];
+		date?: Date | null;
+		number?: number;
+		checked?: boolean;
+		class?: string;
+		type?: HTMLInputTypeAttribute | null;
+		children?: Snippet<[]>;
+	};
+</script>
+
+<script>
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+	import { InputBond } from './bond.svelte';
+	import { toClassValue } from '../../utils';
+	import { on } from '../../attachments/event.svelte';
+	import { getPreset } from '../../context';
+
+	const bond = InputBond.get();
+
+	const preset = getPreset('input.value');
+
+	let {
+		value = $bindable(),
+		files = $bindable(),
+		date = $bindable(),
+		number = $bindable(),
+		checked = $bindable(),
+		class: klass = '',
+		type = 'text',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputProps = $props();
+
+	const valueProps = $derived({
+		...(bond?.input?.() ?? {}),
+		...restProps
+	});
+
+	function handleChange(ev: CustomEvent) {
+		if (!onchange) return;
+
+		onchange?.(ev, {
+			value: value,
+			files: files,
+			date: date,
+			number: number,
+			checked: checked,
+			event: ev
+		});
+	}
+
+	function handleInput(ev: InputEvent) {
+		if (!oninput) return;
+
+		const currentTarget = ev.currentTarget as HTMLInputElement;
+
+		if (type === 'number') {
+			number = currentTarget.valueAsNumber;
+		}
+
+		if (type === 'date' || type == 'time' || type === 'datetime-local' || type === 'date-local') {
+			date = currentTarget.valueAsDate;
+		}
+
+		oninput?.(ev, {
+			value: value,
+			files: files,
+			date: date,
+			number: number,
+			checked: checked,
+			event: ev
+		});
+	}
+</script>
+
+<input
+	class={[
+		'h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [klass])
+	]}
+	{type}
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+			if (bond) {
+				bond.state.props.value = v;
+			}
+		}
+	}
+	onchange={handleChange}
+	oninput={handleInput}
+	{...valueProps}
+	{@attach (node) => {
+		if (type === 'file') {
+			return on('input', () => {
+				files = Array.from(node.files || []);
+				bond!.state.props.files = files;
+			})(node);
+		}
+	}}
+/>

package/dist/components/input/input-value.svelte.d.ts

@@ -0,0 +1,16 @@
+export type InputPortals = 'input.l0' | 'input.l1' | 'input.l2' | 'input.l3';
+export type InputProps = {
+    value?: string;
+    files?: File[];
+    date?: Date | null;
+    number?: number;
+    checked?: boolean;
+    class?: string;
+    type?: HTMLInputTypeAttribute | null;
+    children?: Snippet<[]>;
+};
+import type { Snippet } from 'svelte';
+import type { HTMLInputTypeAttribute } from 'svelte/elements';
+declare const InputValue: import("svelte").Component<InputProps, {}, "number" | "value" | "date" | "checked" | "files">;
+type InputValue = ReturnType<typeof InputValue>;
+export default InputValue;

package/dist/components/input/input.stories.svelte

@@ -0,0 +1,34 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Input as AInput } from '.';
+	import Root from '../root/root.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Input',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+</script>
+
+<Story name="Input" args={{}}>
+	<Root class="p-4">
+		<AInput.Root>
+			<AInput.Icon class="text-foreground box-content px-0">$</AInput.Icon>
+			<AInput.Value class="border-border box-content border-x px-2 py-2">
+				<!--  -->
+			</AInput.Value>
+			<AInput.Icon class="text-foreground box-content px-2">.00</AInput.Icon>
+
+			<AInput.Placeholder class="text-foreground/20 pl-2">Hello World</AInput.Placeholder>
+		</AInput.Root>
+	</Root>
+</Story>

package/dist/components/input/input.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Input: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Input = InstanceType<typeof Input>;
+export default Input;

package/dist/components/label/index.d.ts

@@ -0,0 +1 @@
+export { default as Label } from './label.svelte';

package/dist/components/label/index.js

@@ -0,0 +1 @@
+export { default as Label } from './label.svelte';

package/dist/components/label/label.stories.svelte

@@ -0,0 +1,26 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { default as LabelCmp } from './label.svelte';
+	import { Root } from '../root';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Label'
+	});
+</script>
+
+<script>
+	let value = $state(undefined);
+	let checked = $state(false);
+</script>
+
+<Story name="Label">
+	{#snippet children(args)}
+		<Root>
+			{#snippet children({})}
+				<div class="flex h-full w-full items-center justify-center">
+					<LabelCmp>Hello World</LabelCmp>
+				</div>
+			{/snippet}
+		</Root>
+	{/snippet}
+</Story>

package/dist/components/label/label.stories.svelte.d.ts

@@ -0,0 +1,6 @@
+export default Label;
+type Label = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const Label: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/label/label.svelte

@@ -0,0 +1,39 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export type LabelProps<
+		E extends keyof HTMLElementTagNameMap = 'label',
+		B extends Base = Base
+	> = HtmlAtomProps<E, B> & {
+		for?: string | null;
+		children?: Snippet<[]>;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+	import { getPreset } from '../../context';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Element = ElementType<E>;
+
+	const preset = getPreset('label');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'label',
+		base = preset?.base as B,
+		for: labelfor = null,
+		children,
+		...restProps
+	}: LabelProps<E, B> & HTMLAttributes<Element> = $props();
+</script>
+
+<HtmlAtom class={['font-medium', klass]} for={labelfor} {as} {base} {...restProps}>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/label/label.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+export type LabelProps<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base> = HtmlAtomProps<E, B> & {
+    for?: string | null;
+    children?: Snippet<[]>;
+};
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base>(): {
+    props: any;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const Label: $$IsomorphicComponent;
+type Label<E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base> = InstanceType<typeof Label<E, B>>;
+export default Label;

package/dist/components/layer/atoms.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './layer-root.svelte';
+export { default as Inner } from './layer-inner.svelte';

package/dist/components/layer/atoms.js

@@ -0,0 +1,2 @@
+export { default as Root } from './layer-root.svelte';
+export { default as Inner } from './layer-inner.svelte';

package/dist/components/layer/attachments.svelte.d.ts

@@ -0,0 +1,2 @@
+import { LayerBond } from './bond.svelte';
+export declare function layer(callback: (node: HTMLElement, bond?: LayerBond) => any): (node: HTMLElement) => any;

package/dist/components/layer/attachments.svelte.js

@@ -0,0 +1,5 @@
+import { LayerBond } from './bond.svelte';
+export function layer(callback) {
+    const bond = LayerBond.get();
+    return (node) => callback(node, bond);
+}

package/dist/components/layer/bond.svelte.d.ts

@@ -0,0 +1,23 @@
+import { Bond, BondState, type BondElements, type BondStateProps } from '../../shared/bond.svelte.js';
+export type LayerBondProps = BondStateProps & {};
+export type LayerBondElements = BondElements & {
+    root?: HTMLElement;
+    inner?: HTMLElement;
+};
+export declare class LayerBond extends Bond<LayerBondProps, LayerBondState, LayerBondElements> {
+    static CONTEXT_KEY: string;
+    constructor(atom: LayerBondState);
+    get targetElement(): HTMLElement | undefined;
+    root(props?: Record<string, unknown>): {
+        'data-kind': string;
+    };
+    inner(props?: Record<string, unknown>): {
+        'data-kind': string;
+    };
+    share(): this;
+    static get(): LayerBond | undefined;
+    static set(bond: LayerBond): LayerBond;
+}
+export declare class LayerBondState extends BondState<LayerBondProps> {
+    constructor(props: () => LayerBondProps);
+}