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

package/dist/components/card/card-title.svelte

@@ -1,52 +1,45 @@
-<script module lang="ts">
-	export type CardTitleProps<
-		E extends keyof HTMLElementTagNameMap = 'h3',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base">
-	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = CardBond.get();
-
-	let {
-		class: klass = '',
-		as = 'h3' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardTitleProps<E, B> = $props();
-
-	const titleProps = $derived({
-		...bond?.title(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="card.title"
-	class={[
-		'card-title border-border text-lg leading-none font-semibold tracking-tight',
-		'$preset',
-		klass
-	]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...titleProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { CardBond } from './bond.svelte';
+	export type { CardTitleProps } from './types';
+
+	const bond = CardBond.get();
+
+	let {
+		class: klass = '',
+		as = 'h3' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardTitleProps<E, B> = $props();
+
+	const titleProps = $derived({
+		...bond?.title(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="card.title"
+	class={[
+		'card-title border-border text-lg leading-none font-semibold tracking-tight',
+		'$preset',
+		klass
+	]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...titleProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/card/card-title.svelte.d.ts

@@ -1,26 +1,29 @@
-export type CardTitleProps<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
-declare function $$render<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base>(): {
+import { type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CardTitleProps<E, B>;
-    exports: {};
+    exports: {
+        CardTitleProps: typeof CardTitleProps;
+    };
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base> {
+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(): {};
+    exports(): {
+        CardTitleProps: typeof CardTitleProps;
+    };
 }
 interface $$IsomorphicComponent {
-    new <E extends keyof HTMLElementTagNameMap = 'h3', 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']>> & {
+    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 = 'h3', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): 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 CardTitle: $$IsomorphicComponent;
-type CardTitle<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base> = InstanceType<typeof CardTitle<E, B>>;
+type CardTitle<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof CardTitle<E, B>>;
 export default CardTitle;

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

@@ -1 +1,2 @@
 export * as Card from './atoms';
+export * from './types';

package/dist/components/card/index.js

@@ -1 +1,2 @@
 export * as Card from './atoms';
+export * from './types';

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

@@ -2,7 +2,47 @@ import type { Snippet } from 'svelte';
 import type { CardBond } from './bond.svelte';
 import type { HtmlAtomProps, Base } from '../atom';
 import type { Factory } from '../../types';
-export type CardRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
+/**
+ * Extend this interface to add custom card root properties in your application.
+ */
+export interface CardExtendProps {
+}
+/**
+ * Extend this interface to add custom card header properties in your application.
+ */
+export interface CardHeaderExtendProps {
+}
+/**
+ * Extend this interface to add custom card body/content properties in your application.
+ */
+export interface CardBodyExtendProps {
+}
+/**
+ * Extend this interface to add custom card footer properties in your application.
+ */
+export interface CardFooterExtendProps {
+}
+/**
+ * Extend this interface to add custom card title properties in your application.
+ */
+export interface CardTitleExtendProps {
+}
+/**
+ * Extend this interface to add custom card subtitle properties in your application.
+ */
+export interface CardSubtitleExtendProps {
+}
+/**
+ * Extend this interface to add custom card description properties in your application.
+ */
+export interface CardDescriptionExtendProps {
+}
+/**
+ * Extend this interface to add custom card media properties in your application.
+ */
+export interface CardMediaExtendProps {
+}
+export interface CardRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Omit<HtmlAtomProps<E, B>, 'children'>, CardExtendProps {
     disabled?: boolean;
     factory?: Factory<CardBond>;
     children?: Snippet<[{
@@ -10,4 +50,19 @@ export type CardRootProps<E extends keyof HTMLElementTagNameMap = 'div', B exten
     }]>;
     onclick?: (event: MouseEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
-};
+}
+export interface CardHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, CardHeaderExtendProps {
+}
+export interface CardBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, CardBodyExtendProps {
+}
+export interface CardFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, CardFooterExtendProps {
+}
+export interface CardTitleProps<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base> extends HtmlAtomProps<E, B>, CardTitleExtendProps {
+}
+export interface CardSubtitleProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B>, CardSubtitleExtendProps {
+}
+export interface CardDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B>, CardDescriptionExtendProps {
+}
+export interface CardMediaProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, CardMediaExtendProps {
+}
+export type CardContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = CardBodyProps<E, B>;

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

@@ -1,6 +1,11 @@
 import { type Component, type Snippet } from 'svelte';
 import { type HtmlAtomProps } from '../atom';
-export type CheckboxProps = HtmlAtomProps<'button'> & {
+/**
+ * Extend this interface to add custom checkbox properties in your application.
+ */
+export interface CheckboxExtendProps {
+}
+export interface CheckboxProps extends HtmlAtomProps<'button'>, CheckboxExtendProps {
     value?: string;
     group?: string[];
     checked?: boolean;
@@ -12,4 +17,4 @@ export type CheckboxProps = HtmlAtomProps<'button'> & {
     onchange?: (ev?: Event, options?: {
         checked: boolean;
     }) => void;
-};
+}

package/dist/components/collapsible/collapsible-body.svelte

@@ -1,52 +1,39 @@
-<script module lang="ts">
-	export type CollapsibleBodyProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ collapsible?: CollapsibleBond }]>;
-		}
-	>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { CollapsibleBond } from './bond.svelte';
-	import type { Override } from '../../types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = CollapsibleBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CollapsibleBodyProps<E, B> = $props();
-
-	const bodyProps = $derived({
-		...bond?.body(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="collapsible.body"
-	class={['border-border', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	{...bodyProps}
->
-	{@render children?.({ collapsible: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { CollapsibleBond } from './bond.svelte';
+	import type { CollapsibleBodyProps } from './types';
+
+	const bond = CollapsibleBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CollapsibleBodyProps<E, B> = $props();
+
+	const bodyProps = $derived({
+		...bond?.body(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="collapsible.body"
+	class={['border-border', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{...bodyProps}
+>
+	{@render children?.({ collapsible: bond })}
+</HtmlAtom>

package/dist/components/collapsible/collapsible-body.svelte.d.ts

@@ -1,12 +1,5 @@
-export type CollapsibleBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible?: CollapsibleBond;
-    }]>;
-}>;
-import type { Snippet } from 'svelte';
-import { CollapsibleBond } from './bond.svelte';
-import type { Override } from '../../types';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { CollapsibleBodyProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CollapsibleBodyProps<E, B>;
     exports: {};

package/dist/components/collapsible/collapsible-header.svelte

@@ -1,52 +1,39 @@
-<script module lang="ts">
-	export type CollapsibleHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ collapsible?: CollapsibleBond }]>;
-		}
-	>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { CollapsibleBond } from './bond.svelte';
-	import type { Override } from '../../types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = CollapsibleBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CollapsibleHeaderProps<E, B> = $props();
-
-	const collapsibleProps = $derived({
-		...bond?.header(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="collapsible.header"
-	class={['border-border flex cursor-pointer items-center gap-2', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	{...collapsibleProps}
->
-	{@render children?.({ collapsible: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import type { CollapsibleHeaderProps } from './types';
+	import { CollapsibleBond } from './bond.svelte';
+
+	const bond = CollapsibleBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CollapsibleHeaderProps<E, B> = $props();
+
+	const collapsibleProps = $derived({
+		...bond?.header(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="collapsible.header"
+	class={['border-border flex cursor-pointer items-center gap-2', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{...collapsibleProps}
+>
+	{@render children?.({ collapsible: bond })}
+</HtmlAtom>

package/dist/components/collapsible/collapsible-header.svelte.d.ts

@@ -1,12 +1,5 @@
-export type CollapsibleHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible?: CollapsibleBond;
-    }]>;
-}>;
-import type { Snippet } from 'svelte';
-import { CollapsibleBond } from './bond.svelte';
-import type { Override } from '../../types';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { CollapsibleHeaderProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CollapsibleHeaderProps<E, B>;
     exports: {};

package/dist/components/collapsible/collapsible-indicator.svelte

@@ -1,65 +1,50 @@
-<script module lang="ts">
-	export type CollapsibleHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ collapsible?: CollapsibleBond }]>;
-		}
-	>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { animate as motion } from 'motion';
-	import { CollapsibleBond } from './bond.svelte';
-	import { Icon } from '../icon';
-
-	import type { Override } from '../../types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import IconArrowDown from '../../icons/icon-arrow-down.svelte';
-
-	const bond = CollapsibleBond.get();
-	const isOpen = $derived(bond?.state.props.open ?? false);
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CollapsibleHeaderProps<E, B> = $props();
-
-	const indicatorProps = $derived({
-		...bond?.indicator(),
-		...restProps
-	});
-
-	function _animate(node: HTMLElement) {
-		motion(node, { rotate: 180 * +isOpen }, { duration: 0.3, ease: 'anticipate' });
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="collapsible.indicator"
-	class={['border-border flex size-4 items-center justify-center', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	{...indicatorProps}
->
-	{#if children}
-		{@render children?.({ collapsible: bond })}
-	{:else}
-		<Icon src={IconArrowDown} />
-	{/if}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { animate as motion } from 'motion';
+	import { Icon } from '../icon';
+	import { HtmlAtom, type Base } from '../atom';
+	import IconArrowDown from '../../icons/icon-arrow-down.svelte';
+	import { CollapsibleBond } from './bond.svelte';
+	import type { CollapsibleIndicatorProps } from './types';
+
+	const bond = CollapsibleBond.get();
+	const isOpen = $derived(bond?.state.props.open ?? false);
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CollapsibleIndicatorProps<E, B> = $props();
+	const indicatorProps = $derived({
+		...bond?.indicator(),
+		...restProps
+	});
+
+	function _animate(node: HTMLElement) {
+		motion(node, { rotate: 180 * +isOpen }, { duration: 0.3, ease: 'anticipate' });
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="collapsible.indicator"
+	class={['border-border flex size-4 items-center justify-center', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	{...indicatorProps}
+>
+	{#if children}
+		{@render children?.({ collapsible: bond })}
+	{:else}
+		<Icon src={IconArrowDown} />
+	{/if}
+</HtmlAtom>

package/dist/components/collapsible/collapsible-indicator.svelte.d.ts

@@ -1,14 +1,7 @@
-export type CollapsibleHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        collapsible?: CollapsibleBond;
-    }]>;
-}>;
-import type { Snippet } from 'svelte';
-import { CollapsibleBond } from './bond.svelte';
-import type { Override } from '../../types';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { CollapsibleIndicatorProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: CollapsibleHeaderProps<E, B>;
+    props: CollapsibleIndicatorProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};