@svelte-atoms/core 1.0.0-alpha.14

package/dist/components/badge/badge.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import { HtmlAtom } from '../atom';
+	import type { BadgeProps } from './types';
+
+	const preset = getPreset('badge');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'span',
+		base = preset?.base as B,
+		children = undefined,
+		...restProps
+	}: BadgeProps = $props();
+</script>
+
+<HtmlAtom
+	class={[
+		'bg-foreground/10 text-foreground inline-flex h-auto items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
+		toClassValue.apply(null, [preset?.class]),
+		toClassValue.apply(null, [klass])
+	]}
+	{as}
+	{base}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -0,0 +1,3 @@
+declare const Badge: import("svelte").Component<any, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

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

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export type { BadgeProps } from './badge.svelte';

package/dist/components/badge/index.js

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

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

@@ -0,0 +1,5 @@
+import type { HtmlAtomProps } from '../atom';
+import type { Snippet } from 'svelte';
+export type BadgeProps = HtmlAtomProps<'span'> & {
+    children?: Snippet<[]>;
+};

package/dist/components/badge/types.js

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

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

@@ -0,0 +1,3 @@
+export { default as Separator } from './breadcrumb-separator.svelte';
+export { default as Item } from './breadcrumb-item.svelte';
+export { default as Root } from './breadcrumb-root.svelte';

package/dist/components/breadcrumb/atoms.js

@@ -0,0 +1,3 @@
+export { default as Separator } from './breadcrumb-separator.svelte';
+export { default as Item } from './breadcrumb-item.svelte';
+export { default as Root } from './breadcrumb-root.svelte';

package/dist/components/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" generics="B extends Base = Base">
+	import { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type Base } from '../atom';
+
+	const preset = getPreset('breadcrumb.item');
+
+	let {
+		class: klass = '',
+		href = '',
+		as = preset?.as ?? 'a',
+		base = preset?.base as B,
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<HtmlAtom
+	class={[
+		'hover:text-primary hover:bg-primary/5 flex gap-2 rounded-lg px-2 py-1',
+		toClassValue.apply(null, [preset?.class]),
+		toClassValue.apply(null, [klass])
+	]}
+	data-kind="breadcrumb-item"
+	{as}
+	{base}
+	{href}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/breadcrumb/breadcrumb-item.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type Base } from '../atom';
+declare function $$render<B extends Base = Base>(): {
+    props: {
+        class?: string;
+        href?: string;
+        as?: any;
+        base?: B;
+        children?: any;
+    } & Record<string, any>;
+    exports: {};
+    bindings: "";
+    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(): "";
+    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 BreadcrumbItem: $$IsomorphicComponent;
+type BreadcrumbItem<B extends Base = Base> = InstanceType<typeof BreadcrumbItem<B>>;
+export default BreadcrumbItem;

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

@@ -0,0 +1,29 @@
+<script lang="ts" generics="B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+
+	const preset = getPreset('breadcrumb');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<HtmlAtom
+	class={[
+		'flex flex-nowrap items-center gap-1',
+		toClassValue.apply(null, [preset?.class, {}]),
+		toClassValue.apply(null, [klass, {}])
+	]}
+	data-kind="breadcrumb-root"
+	{as}
+	{base}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -0,0 +1,30 @@
+import { type Base } from '../atom';
+declare function $$render<B extends Base = Base>(): {
+    props: {
+        class?: string;
+        as?: any;
+        base?: B;
+        children?: any;
+    } & Record<string, any>;
+    exports: {};
+    bindings: "";
+    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(): "";
+    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 BreadcrumbRoot: $$IsomorphicComponent;
+type BreadcrumbRoot<B extends Base = Base> = InstanceType<typeof BreadcrumbRoot<B>>;
+export default BreadcrumbRoot;

package/dist/components/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" generics="B extends Base = Base">
+	import { getPreset } from '../../context';
+	import { toClassValue } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+
+	const preset = getPreset('breadcrumb.separator');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'span',
+		base = preset?.base as B,
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<HtmlAtom
+	class={[
+		'text-stroke-0/50 px-0',
+		toClassValue.apply(null, [preset?.class, {}]),
+		toClassValue.apply(null, [klass, {}])
+	]}
+	data-kind="breadcrumb-separator"
+	{as}
+	{base}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/breadcrumb/breadcrumb-separator.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type Base } from '../atom';
+declare function $$render<B extends Base = Base>(): {
+    props: {
+        class?: string;
+        as?: any;
+        base?: B;
+        children?: any;
+    } & Record<string, any>;
+    exports: {};
+    bindings: "";
+    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(): "";
+    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 BreadcrumbSeparator: $$IsomorphicComponent;
+type BreadcrumbSeparator<B extends Base = Base> = InstanceType<typeof BreadcrumbSeparator<B>>;
+export default BreadcrumbSeparator;

package/dist/components/breadcrumb/breadcrumb.stories.svelte

@@ -0,0 +1,21 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import { Breadcrumb as BreadcrumbModule } from '.';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Breadcrumb'
+	});
+</script>
+
+<Story name="Breadcrumb">
+	<Root>
+		{#snippet children({ args })}
+			<BreadcrumbModule.Root>
+				<BreadcrumbModule.Item href="/">Home</BreadcrumbModule.Item>
+				<BreadcrumbModule.Separator>/</BreadcrumbModule.Separator>
+				<BreadcrumbModule.Item href="/vehicles">Vehicles</BreadcrumbModule.Item>
+			</BreadcrumbModule.Root>
+		{/snippet}
+	</Root>
+</Story>

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

@@ -0,0 +1,26 @@
+export default Breadcrumb;
+type Breadcrumb = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Breadcrumb: $$__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/breadcrumb/index.d.ts

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

package/dist/components/breadcrumb/index.js

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

package/dist/components/breadcrumb/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/button/button.stories.svelte

@@ -0,0 +1,17 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import ButtonCmp from './button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Button'
+	});
+</script>
+
+<Story name="Button">
+	<Root class="p-4">
+		{#snippet children({ args })}
+			<ButtonCmp>Clicke me</ButtonCmp>
+		{/snippet}
+	</Root>
+</Story>

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

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ButtonProps } from './types';
+	import { HtmlAtom } from '../atom';
+	import { getPreset } from '../../context';
+	import { toClassValue } from '../../utils';
+
+	const preset = getPreset('button');
+
+	let {
+		class: klass = '',
+		type = 'button',
+		base = preset?.base as B,
+		children = undefined,
+		...restProps
+	}: ButtonProps & HTMLAttributes<HTMLButtonElement> = $props();
+
+	const buttonProps = $derived({
+		...restProps,
+		type
+	});
+</script>
+
+<HtmlAtom
+	as="button"
+	class={[
+		'button text-foreground bg-foreground/10 hover:bg-foreground/15 active:bg-foreground/20 w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
+		toClassValue.apply(null, [preset?.class]),
+		toClassValue.apply(null, [klass])
+	]}
+	{base}
+	{...buttonProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -0,0 +1,3 @@
+declare const Button: import("svelte").Component<any, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

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

package/dist/components/button/index.js

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

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

@@ -0,0 +1,6 @@
+import type { HtmlAtomProps } from '../../helpers';
+import type { Snippet } from 'svelte';
+export type ButtonProps = HtmlAtomProps<'button'> & {
+    type?: 'button' | 'submit' | 'reset';
+    children?: Snippet<[]>;
+};

package/dist/components/button/types.js

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

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

@@ -0,0 +1,8 @@
+export { default as Root } from './card-root.svelte';
+export { default as Header } from './card-header.svelte';
+export { default as Title } from './card-title.svelte';
+export { default as Subtitle } from './card-subtitle.svelte';
+export { default as Description } from './card-description.svelte';
+export { default as Body } from './card-body.svelte';
+export { default as Media } from './card-media.svelte';
+export { default as Footer } from './card-footer.svelte';

package/dist/components/card/atoms.js

@@ -0,0 +1,8 @@
+export { default as Root } from './card-root.svelte';
+export { default as Header } from './card-header.svelte';
+export { default as Title } from './card-title.svelte';
+export { default as Subtitle } from './card-subtitle.svelte';
+export { default as Description } from './card-description.svelte';
+export { default as Body } from './card-body.svelte';
+export { default as Media } from './card-media.svelte';
+export { default as Footer } from './card-footer.svelte';

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

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

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

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

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

@@ -0,0 +1,66 @@
+import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+export type CardBondProps = BondStateProps & {
+    disabled?: boolean;
+};
+export type CardBondElements = {
+    root: HTMLElement;
+    header: HTMLElement;
+    title: HTMLElement;
+    subtitle: HTMLElement;
+    description: HTMLElement;
+    content: HTMLElement;
+    media: HTMLElement;
+    actions: HTMLElement;
+    footer: HTMLElement;
+};
+export declare class CardBond<State extends CardBondState<CardBondProps> = CardBondState<CardBondProps>> extends Bond<CardBondProps, State, CardBondElements> {
+    static CONTEXT_KEY: string;
+    constructor(s: State);
+    share(): this;
+    root(props?: Record<string, unknown>): {
+        id: string;
+        role: string | undefined;
+        tabindex: number | undefined;
+        'aria-labelledby': string;
+        'aria-describedby': string;
+        'aria-disabled': boolean;
+        'data-kind': string;
+    };
+    header(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    title(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    subtitle(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    description(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    content(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    media(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    actions(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    footer(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    static get(): CardBond | undefined;
+    static set(bond: CardBond): CardBond;
+}
+export declare class CardBondState<Props extends CardBondProps> extends BondState<Props> {
+    constructor(props: () => Props);
+}

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

@@ -0,0 +1,143 @@
+import { createAttachmentKey } from 'svelte/attachments';
+import { getContext, setContext } from 'svelte';
+import { getElementId } from '../../utils/dom.svelte';
+import { Bond, BondState } from '../../shared/bond.svelte';
+const CARD_ELEMENTS_KIND = {
+    root: 'card-root',
+    header: 'card-header',
+    title: 'card-title',
+    subtitle: 'card-subtitle',
+    description: 'card-description',
+    content: 'card-content',
+    media: 'card-media',
+    actions: 'card-actions',
+    footer: 'card-footer'
+};
+export class CardBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/card';
+    constructor(s) {
+        super(s);
+    }
+    share() {
+        return CardBond.set(this);
+    }
+    root(props = {}) {
+        const id = getElementId(this.id, CARD_ELEMENTS_KIND.root);
+        const titleId = getElementId(this.id, CARD_ELEMENTS_KIND.title);
+        const descriptionId = getElementId(this.id, CARD_ELEMENTS_KIND.description);
+        const isClickable = this.state.props.clickable ?? false;
+        const isDisabled = this.state.props.disabled ?? false;
+        return {
+            id,
+            role: isClickable ? 'button' : undefined,
+            tabindex: isClickable && !isDisabled ? 0 : undefined,
+            'aria-labelledby': titleId,
+            'aria-describedby': descriptionId,
+            'aria-disabled': isDisabled,
+            'data-kind': CARD_ELEMENTS_KIND.root,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.root = node;
+            }
+        };
+    }
+    header(props = {}) {
+        const id = getElementId(this.id, CARD_ELEMENTS_KIND.header);
+        return {
+            id,
+            'data-kind': CARD_ELEMENTS_KIND.header,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.header = node;
+            }
+        };
+    }
+    title(props = {}) {
+        const id = getElementId(this.id, CARD_ELEMENTS_KIND.title);
+        return {
+            id,
+            'data-kind': CARD_ELEMENTS_KIND.title,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.title = node;
+            }
+        };
+    }
+    subtitle(props = {}) {
+        const id = getElementId(this.id, CARD_ELEMENTS_KIND.subtitle);
+        return {
+            id,
+            'data-kind': CARD_ELEMENTS_KIND.subtitle,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.subtitle = node;
+            }
+        };
+    }
+    description(props = {}) {
+        const id = getElementId(this.id, CARD_ELEMENTS_KIND.description);
+        return {
+            id,
+            'data-kind': CARD_ELEMENTS_KIND.description,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.description = node;
+            }
+        };
+    }
+    content(props = {}) {
+        const id = getElementId(this.id, CARD_ELEMENTS_KIND.content);
+        return {
+            id,
+            'data-kind': CARD_ELEMENTS_KIND.content,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.content = node;
+            }
+        };
+    }
+    media(props = {}) {
+        const id = getElementId(this.id, CARD_ELEMENTS_KIND.media);
+        return {
+            id,
+            'data-kind': CARD_ELEMENTS_KIND.media,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.media = node;
+            }
+        };
+    }
+    actions(props = {}) {
+        const id = getElementId(this.id, CARD_ELEMENTS_KIND.actions);
+        return {
+            id,
+            'data-kind': CARD_ELEMENTS_KIND.actions,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.actions = node;
+            }
+        };
+    }
+    footer(props = {}) {
+        const id = getElementId(this.id, CARD_ELEMENTS_KIND.footer);
+        return {
+            id,
+            'data-kind': CARD_ELEMENTS_KIND.footer,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.footer = node;
+            }
+        };
+    }
+    static get() {
+        return getContext(CardBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(CardBond.CONTEXT_KEY, bond);
+    }
+}
+export class CardBondState extends BondState {
+    constructor(props) {
+        super(props);
+    }
+}