@svelte-atoms/core 1.0.0-alpha.26 → 1.0.0-alpha.28

package/dist/components/portal/teleport.svelte

@@ -1,55 +1,50 @@
-<script module lang="ts">
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-
-	export type TeleportProps<
-		E extends HtmlElementTagName = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		portal?: string | PortalBond;
-	};
-</script>
-
-<script lang="ts" generics="E extends HtmlElementTagName = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { PortalsBond } from './portals';
-	import { RootBond } from '../root/bond.svelte';
-	import { port } from './utils';
-	import type { PortalBond } from '.';
-
-	type Element = HtmlElementType<E>;
-
-	let { portal, as, base, children, ...restProps }: TeleportProps<E, B> & HTMLAttributes<Element> =
-		$props();
-
-	const portalsBond = PortalsBond.get();
-	const rootBond = RootBond.get();
-
-	const portalBond = $derived.by(() => {
-		if (typeof portal === 'string') {
-			return portalsBond?.state?.get(portal!) ?? rootBond?.state?.getPortal(portal!);
-		}
-
-		return portal;
-	});
-
-	const targetElement = $derived(portalBond?.targetElement);
-
-	function _port(node: HTMLElement) {
-		const hidden = node.hidden;
-
-		node.hidden = true;
-
-		const unport = port(node, targetElement);
-
-		node.hidden = hidden;
-
-		return unport;
-	}
-</script>
-
-{#if targetElement && portal}
-	<HtmlAtom {@attach _port} as={as as E} {base} {...restProps}>
-		{@render children?.({ portal: portalBond })}
-	</HtmlAtom>
-{/if}
+<script module lang="ts">
+	export type { TeleportProps } from './types';
+</script>
+
+<script lang="ts" generics="E extends HtmlElementTagName = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { TeleportProps } from './types';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	import { PortalsBond } from './portals';
+	import { RootBond } from '../root/bond.svelte';
+	import { port } from './utils';
+	import type { PortalBond } from '.';
+
+	type Element = HtmlElementType<E>;
+
+	let { portal, as, base, children, ...restProps }: TeleportProps<E, B> & HTMLAttributes<Element> =
+		$props();
+
+	const portalsBond = PortalsBond.get();
+	const rootBond = RootBond.get();
+
+	const portalBond = $derived.by(() => {
+		if (typeof portal === 'string') {
+			return portalsBond?.state?.get(portal!) ?? rootBond?.state?.getPortal(portal!);
+		}
+
+		return portal;
+	});
+
+	const targetElement = $derived(portalBond?.targetElement);
+
+	function _port(node: HTMLElement) {
+		const hidden = node.hidden;
+
+		node.hidden = true;
+
+		const unport = port(node, targetElement);
+
+		node.hidden = hidden;
+
+		return unport;
+	}
+</script>
+
+{#if targetElement && portal}
+	<HtmlAtom {@attach _port} as={as as E} {base} {...restProps}>
+		{@render children?.({ portal: portalBond })}
+	</HtmlAtom>
+{/if}

package/dist/components/portal/teleport.svelte.d.ts

@@ -1,29 +1,10 @@
+export type { TeleportProps } from './types';
+import type { HTMLAttributes } from 'svelte/elements';
 import { type HtmlAtomProps, type Base } from '../atom';
 import type { HtmlElementTagName, HtmlElementType } from '../element';
-export type TeleportProps<E extends HtmlElementTagName = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    portal?: string | PortalBond;
-};
-import type { HTMLAttributes } from 'svelte/elements';
 import type { PortalBond } from '.';
 declare function $$render<E extends HtmlElementTagName = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("../element").NodeFunction<E> | undefined;
-        enter?: import("../element").TransitionFunction<E> | undefined;
-        exit?: import("../element").TransitionFunction<E> | undefined;
-        animate?: import("../element").NodeFunction<E> | undefined;
-        onmount?: import("../element").NodeFunction<E> | undefined;
-        ondestroy?: import("../element").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & {
+    props: HtmlAtomProps<E, B> & import("./types").TeleportExtendProps & {
         portal?: string | PortalBond;
     } & HTMLAttributes<HtmlElementType<E>>;
     exports: {};

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory } from '../../types';
+import type { PortalBond } from './bond.svelte';
+import type { RootPortals } from '../root/root.svelte';
+import type { HtmlElementTagName } from '../element';
+/**
+ * Extend this interface to add custom portal root properties in your application.
+ */
+export interface PortalRootExtendProps {
+}
+/**
+ * Extend this interface to add custom portal outer properties in your application.
+ */
+export interface PortalOuterExtendProps {
+}
+/**
+ * Extend this interface to add custom teleport properties in your application.
+ */
+export interface TeleportExtendProps {
+}
+export type PortalRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Omit<HtmlAtomProps<E, B>, 'children'> & PortalRootExtendProps & {
+    name?: string;
+    factory?: Factory<PortalBond>;
+    children?: Snippet<[{
+        portal: PortalBond;
+    }]>;
+};
+export type PortalOuterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & PortalOuterExtendProps & {
+    id: RootPortals | (string & {});
+    children?: Snippet;
+};
+export type TeleportProps<E extends HtmlElementTagName = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TeleportExtendProps & {
+    portal?: string | PortalBond;
+};
+/**
+ * @deprecated Use PortalRootExtendProps instead
+ */
+export type PortalExtendProps = PortalRootExtendProps;

package/dist/components/portal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/qr-code/index.d.ts

@@ -0,0 +1 @@
+export { default as QRCode } from './qr-code.svelte';

package/dist/components/qr-code/index.js

@@ -0,0 +1 @@
+export { default as QRCode } from './qr-code.svelte';

package/dist/components/qr-code/qr-code.stories.svelte

@@ -0,0 +1,24 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import QrCodeComponent from './qr-code.svelte';
+	import { Root } from '../root';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/QR Code'
+	});
+</script>
+
+<script>
+</script>
+
+<Story name="QR Code">
+	{#snippet children(args)}
+		<Root>
+			{#snippet children({})}
+				<div class="flex h-full w-full items-center justify-center">
+					<QrCodeComponent value="Hello World" />
+				</div>
+			{/snippet}
+		</Root>
+	{/snippet}
+</Story>

package/dist/components/qr-code/qr-code.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default QrCode;
+type QrCode = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const QrCode: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/components/qr-code/qr-code.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { Icon } from '../icon';
+	import type { renderSVG } from 'uqr';
+
+	let { class: klass = '', value = '' } = $props();
+
+	type Render = typeof renderSVG;
+
+	let render: Render | undefined = $state();
+
+	const code = $derived(
+		render?.(value, { blackColor: 'currentColor', whiteColor: 'transparent', border: 0 })
+	);
+
+	import('uqr').then((result) => {
+		render = result.renderSVG;
+	});
+</script>
+
+<Icon class={cn('aspect-square h-20', klass)}>
+	{#if code}
+		{@html code}
+	{/if}
+</Icon>

package/dist/components/qr-code/qr-code.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const QrCode: import("svelte").Component<{
+    class?: string;
+    value?: string;
+}, {}, "">;
+type QrCode = ReturnType<typeof QrCode>;
+export default QrCode;

package/dist/components/radio/radio.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="B extends Base = Base">
+<script lang="ts">
 	import { getRadioGroupContext } from './context';
 	import { Stack } from '../stack';
 	import { toClassValue } from '../../utils';

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

@@ -1,37 +1,15 @@
-import { type Base } from '../atom';
-declare function $$render<B extends Base = Base>(): {
-    props: {
-        class?: string;
-        value?: any;
-        group?: any;
-        id?: any;
-        name?: any;
-        disabled?: boolean;
-        required?: boolean;
-        readonly?: boolean;
-        onchange?: any;
-        oninput?: any;
-        checkedContent?: any;
-    } & Record<string, any>;
-    exports: {};
-    bindings: "value" | "group";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<B extends Base = Base> {
-    props(): ReturnType<typeof $$render<B>>['props'];
-    events(): ReturnType<typeof $$render<B>>['events'];
-    slots(): ReturnType<typeof $$render<B>>['slots'];
-    bindings(): "value" | "group";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<B>['props']>, ReturnType<__sveltets_Render<B>['events']>, ReturnType<__sveltets_Render<B>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<B>['bindings']>;
-    } & ReturnType<__sveltets_Render<B>['exports']>;
-    <B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<B>['props']> & {}): ReturnType<__sveltets_Render<B>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Radio: $$IsomorphicComponent;
-type Radio<B extends Base = Base> = InstanceType<typeof Radio<B>>;
+declare const Radio: import("svelte").Component<{
+    class?: string;
+    value?: any;
+    group?: any;
+    id?: any;
+    name?: any;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    onchange?: any;
+    oninput?: any;
+    checkedContent?: any;
+} & Record<string, any>, {}, "value" | "group">;
+type Radio = ReturnType<typeof Radio>;
 export default Radio;

package/dist/components/radio/types.svelte.d.ts

@@ -4,7 +4,7 @@ type Types = SvelteComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: string;
 };
 declare const Types: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;

package/dist/components/root/root.svelte

@@ -1,121 +1,121 @@
-<script module lang="ts">
-	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
-</script>
-
-<script lang="ts">
-	import { cn, defineState, defineProperty } from '../../utils';
-	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
-	import { Portal, ActivePortal, Portals } from '../portal';
-	import { Stack } from '../stack';
-	import { HtmlAtom } from '../atom';
-	import { HtmlElement, MathmlElement, SvgElement } from '../element';
-
-	let {
-		class: klass = '',
-		base = undefined,
-		children = undefined,
-		portals = undefined,
-		...restProps
-	} = $props();
-
-	let html: typeof HtmlElement | undefined = HtmlElement;
-	let svg: typeof SvgElement | undefined = undefined;
-	let mathml: typeof MathmlElement | undefined = undefined;
-
-	type Renderers = {
-		html?: typeof HtmlElement;
-		svg?: typeof SvgElement;
-		mathml?: typeof MathmlElement;
-	};
-
-	const renderers = defineState<Renderers>([
-		defineProperty('html', () => {
-			if (!html) {
-				import('../element/html-element.svelte').then((mod) => {
-					html = mod.default;
-				});
-			}
-
-			return html;
-		}),
-		defineProperty('svg', () => {
-			if (!svg) {
-				import('../element/svg-element.svelte').then((mod) => {
-					svg = mod.default;
-				});
-			}
-
-			return svg;
-		}),
-		defineProperty('mathml', () => {
-			if (!mathml) {
-				import('../element/mathml-element.svelte').then((mod) => {
-					mathml = mod.default;
-				});
-			}
-
-			return mathml;
-		})
-	]);
-
-	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
-
-	const bondState = new RootBondState(() => bondProps);
-	const bond = new RootBond(bondState).share();
-</script>
-
-<Portals id="root">
-	<HtmlAtom
-		{@attach (node) => {
-			bond.rootElement = node;
-		}}
-		{base}
-		preset="root"
-		class={cn(
-			'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
-			'$preset',
-			klass
-		)}
-		{...restProps}
-	>
-		{#if portals}
-			{@render portals?.()}
-		{:else}
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l0"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l1"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l2"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-
-			<Portal.Outer
-				base={Stack.Item}
-				id="root.l3"
-				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
-			>
-				<Portal.Inner />
-			</Portal.Outer>
-		{/if}
-
-		<ActivePortal portal="root.l0">
-			{@render children?.()}
-		</ActivePortal>
-	</HtmlAtom>
-</Portals>
+<script module lang="ts">
+	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
+</script>
+
+<script lang="ts">
+	import { cn, defineState, defineProperty } from '../../utils';
+	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
+	import { Portal, ActivePortal, Portals } from '../portal';
+	import { Stack } from '../stack';
+	import { HtmlAtom } from '../atom';
+	import { HtmlElement, MathmlElement, SvgElement } from '../element';
+
+	let {
+		class: klass = '',
+		base = undefined,
+		children = undefined,
+		portals = undefined,
+		...restProps
+	} = $props();
+
+	let html: typeof HtmlElement | undefined = HtmlElement;
+	let svg: typeof SvgElement | undefined = undefined;
+	let mathml: typeof MathmlElement | undefined = undefined;
+
+	type Renderers = {
+		html?: typeof HtmlElement;
+		svg?: typeof SvgElement;
+		mathml?: typeof MathmlElement;
+	};
+
+	const renderers = defineState<Renderers>([
+		defineProperty('html', () => {
+			if (!html) {
+				import('../element/html-element.svelte').then((mod) => {
+					html = mod.default;
+				});
+			}
+
+			return html;
+		}),
+		defineProperty('svg', () => {
+			if (!svg) {
+				import('../element/svg-element.svelte').then((mod) => {
+					svg = mod.default;
+				});
+			}
+
+			return svg;
+		}),
+		defineProperty('mathml', () => {
+			if (!mathml) {
+				import('../element/mathml-element.svelte').then((mod) => {
+					mathml = mod.default;
+				});
+			}
+
+			return mathml;
+		})
+	]);
+
+	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
+
+	const bondState = new RootBondState(() => bondProps);
+	const bond = new RootBond(bondState).share();
+</script>
+
+<Portals id="root">
+	<HtmlAtom
+		{@attach (node) => {
+			bond.rootElement = node;
+		}}
+		{base}
+		preset="root"
+		class={cn(
+			'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
+			'$preset',
+			klass
+		)}
+		{...restProps}
+	>
+		{#if portals}
+			{@render portals?.()}
+		{:else}
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l0"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l1"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l2"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l3"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+		{/if}
+
+		<ActivePortal portal="root.l0">
+			{@render children?.()}
+		</ActivePortal>
+	</HtmlAtom>
+</Portals>

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

@@ -0,0 +1,8 @@
+import type { HtmlAtomProps, Base } from '../atom';
+/**
+ * Extend this interface to add custom root properties in your application.
+ */
+export interface RootExtendProps {
+}
+export interface RootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, RootExtendProps {
+}

package/dist/components/root/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -5,3 +5,4 @@ export type * from './scrollable-track.svelte';
 export type * from './scrollable-thumb.svelte';
 export { ScrollableBond, type ScrollableDomElements, ScrollableState, type ScrollableStateProps } from './bond.svelte';
 export { scrollable } from './attachments.svelte';
+export * from './types';

package/dist/components/scrollable/index.js

@@ -1,3 +1,4 @@
 export * as Scrollable from './atoms';
 export { ScrollableBond, ScrollableState } from './bond.svelte';
 export { scrollable } from './attachments.svelte';
+export * from './types';

package/dist/components/scrollable/scrollable-container.svelte

@@ -1,19 +1,12 @@
 <script module lang="ts">
-	export type ScrollableContainerProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet;
-		}
-	>;
+	export type { ScrollableContainerProps } from './types';
 </script>
 
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
+	import type { ScrollableContainerProps } from './types';
 	import { ScrollableBond } from './bond.svelte';
-	import type { Override } from '../../types';
 	import { resizeObserver } from '../../attachments/resize-observer.svelte';
-	import { HtmlAtom, type HtmlAtomProps } from '../atom';
-
+	import { HtmlAtom } from '../atom';
 	let {
 		class: klass = '',
 		children = undefined,

package/dist/components/scrollable/scrollable-container.svelte.d.ts

@@ -1,9 +1,5 @@
-export type ScrollableContainerProps<T extends keyof HTMLElementTagNameMap> = Override<HtmlAtomProps<T>, {
-    children?: Snippet;
-}>;
-import type { Snippet } from 'svelte';
-import type { Override } from '../../types';
-import { type HtmlAtomProps } from '../atom';
+export type { ScrollableContainerProps } from './types';
+import type { ScrollableContainerProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
     props: ScrollableContainerProps<T>;
     exports: {};