@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

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

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

@@ -1,12 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Badge as BadgeModule } from '.';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Badge'
-	});
-</script>
-
-<Story name="Badge">
-	<BadgeModule>Badge</BadgeModule>
-</Story>

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

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

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

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

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

@@ -1,27 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import ButtonCmp from './button.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Button',
-		argTypes: {
-			variant: {
-				control: 'select',
-				options: ['primary', 'secondary', 'destructive', 'outline', 'ghost'],
-				description: 'Button variant style',
-				table: {
-					defaultValue: { summary: 'primary' }
-				}
-			}
-		}
-	});
-</script>
-
-<script lang="ts">
-</script>
-
-<Story name="Button">
-	{#snippet template(args)}
-		<ButtonCmp {...args}>Click me</ButtonCmp>
-	{/snippet}
-</Story>

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

@@ -1,18 +0,0 @@
-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 Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Button = InstanceType<typeof Button>;
-export default Button;

package/dist/components/calendar/calendar.stories.svelte

@@ -1,26 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Calendar as CalendarModule } from '.';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/Calendar'
-	});
-</script>
-
-<script>
-</script>
-
-<Story name="Calendar">
-	{#snippet children({ args })}
-		<div class="flex h-fit items-center justify-center">
-			<CalendarModule.Root>
-				<CalendarModule.Header></CalendarModule.Header>
-				<CalendarModule.Body>
-					{#snippet children({ day })}
-						<CalendarModule.Day {day}></CalendarModule.Day>
-					{/snippet}
-				</CalendarModule.Body>
-			</CalendarModule.Root>
-		</div>
-	{/snippet}
-</Story>

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

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

@@ -1,133 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/Card',
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-	import { Card } from '.';
-</script>
-
-<!-- Default Card -->
-<Story name="Default">
-	<Card.Root class="max-w-sm">
-		<Card.Header>
-			<Card.Title>Card Title</Card.Title>
-			<Card.Description
-				>This is a card description that provides additional context.</Card.Description
-			>
-		</Card.Header>
-		<Card.Body>
-			<p>
-				This is the main content area of the card. You can put any content here including text,
-				images, or other components.
-			</p>
-		</Card.Body>
-		<Card.Footer>
-			<button
-				class="rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600 active:bg-blue-700"
-				>Action</button
-			>
-			<button
-				class="border-border hover:bg-foreground/5 active:bg-foreground/10 rounded border px-3 py-1 text-sm"
-				>Cancel</button
-			>
-		</Card.Footer>
-	</Card.Root>
-</Story>
-
-<!-- Card with Media -->
-<Story name="With Media">
-	<Card.Root class="max-w-sm">
-		<Card.Media>
-			<img
-				src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop"
-				alt="Beautiful landscape"
-				class="h-48 w-full object-cover"
-			/>
-		</Card.Media>
-		<Card.Header>
-			<Card.Title>Beautiful Landscape</Card.Title>
-			<Card.Subtitle>Photography</Card.Subtitle>
-		</Card.Header>
-		<Card.Body>
-			<p>A stunning landscape photograph capturing the beauty of nature.</p>
-		</Card.Body>
-		<Card.Footer>
-			<span class="text-sm text-gray-500">Posted 2 hours ago</span>
-		</Card.Footer>
-	</Card.Root>
-</Story>
-
-<!-- Clickable Card -->
-<Story name="Clickable">
-	<Card.Root
-		class="hover:bg-card/90 active:bg-card/80 max-w-sm cursor-pointer pb-4"
-		onclick={() => alert('Card clicked!')}
-	>
-		<Card.Header>
-			<Card.Title>Clickable Card</Card.Title>
-			<Card.Description
-				>This card is clickable and will show an alert when clicked.</Card.Description
-			>
-		</Card.Header>
-		<Card.Body>
-			<p>Click anywhere on this card to trigger the action.</p>
-		</Card.Body>
-	</Card.Root>
-</Story>
-
-<!-- Card Variants -->
-<Story name="Variants">
-	<div class="grid grid-cols-2 gap-4">
-		<Card.Root>
-			<Card.Header>
-				<Card.Title>Default Card</Card.Title>
-				<Card.Description>Default variant with border and shadow.</Card.Description>
-			</Card.Header>
-		</Card.Root>
-
-		<Card.Root class="bg-transparent shadow-none">
-			<Card.Header>
-				<Card.Title>Outlined Card</Card.Title>
-				<Card.Description>Outlined variant with border only.</Card.Description>
-			</Card.Header>
-		</Card.Root>
-
-		<Card.Root class="shadow-lg">
-			<Card.Header>
-				<Card.Title>Elevated Card</Card.Title>
-				<Card.Description>Elevated variant with enhanced shadow.</Card.Description>
-			</Card.Header>
-		</Card.Root>
-
-		<Card.Root class="bg-background border-none">
-			<Card.Header>
-				<Card.Title>Filled Card</Card.Title>
-				<Card.Description>Filled variant with background color.</Card.Description>
-			</Card.Header>
-		</Card.Root>
-	</div>
-</Story>
-
-<!-- Disabled Card -->
-<Story
-	name="Disabled"
-	args={{
-		clickable: true,
-		disabled: true
-	}}
->
-	<Card.Root class="max-w-sm pb-4 opacity-50">
-		<Card.Header>
-			<Card.Title>Disabled Card</Card.Title>
-			<Card.Description>This card is disabled and cannot be interacted with.</Card.Description>
-		</Card.Header>
-		<Card.Body>
-			<p>The card appears dimmed and is not clickable.</p>
-		</Card.Body>
-	</Card.Root>
-</Story>

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

@@ -1,19 +0,0 @@
-import { Card } from '.';
-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 Card: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Card = InstanceType<typeof Card>;
-export default Card;

package/dist/components/checkbox/checkbox.stories.svelte

@@ -1,22 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { default as CheckboxCmp } from './checkbox.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Checkbox'
-	});
-</script>
-
-<script>
-	let checked = $state(false);
-</script>
-
-<Story name="Checkbox">
-	{#snippet children({ args })}
-		<div class="flex gap-2">
-			<CheckboxCmp bind:checked />
-
-			<CheckboxCmp indeterminate />
-		</div>
-	{/snippet}
-</Story>

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

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

package/dist/components/collapsible/collapsible.stories.svelte

@@ -1,172 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Collapsible as ACollapsible } from '.';
-
-	import { animate as motion } from 'motion';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Collapsible',
-		// 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="Collapsible" args={{}}>
-	<div class="flex w-full flex-col gap-2">
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.props.open}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 1</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.2, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.isOpen}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 2</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.1, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.isOpen}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 3</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.1, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-	</div>
-</Story>

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

@@ -1,18 +0,0 @@
-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 Collapsible: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Collapsible = InstanceType<typeof Collapsible>;
-export default Collapsible;

package/dist/components/combobox/combobox.stories.svelte

@@ -1,63 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Combobox as ACombobox } from '.';
-	import { Input } from '../input';
-	import { Divider } from '../divider';
-	import { filterDropdownData } from '../dropdown';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Combobox',
-		// 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">
-	let open = $state(false);
-	let array = $state([
-		{ value: 'usd', label: 'US Dollar' },
-		{ value: 'eur', label: 'Euro' },
-		{ value: 'gbp', label: 'British Pound' },
-		{ value: 'jpy', label: 'Japanese Yen' },
-		{ value: 'cny', label: 'Chinese Yuan' }
-	]);
-
-	const filteredItems = filterDropdownData(
-		() => array,
-		(query, item) => item.label.toLowerCase().includes(query.toLowerCase())
-	);
-
-	let selectedLabels = $state([]);
-</script>
-
-<Story name="Combobox" args={{}}>
-	<ACombobox.Root bind:open bind:labels={selectedLabels} multiple>
-		<ACombobox.Trigger
-			base={Input.Root}
-			class="flex h-auto min-h-10 min-w-sm flex-col items-start gap-2"
-		>
-			<div class="flex">
-				<Input.Icon class="text-foreground/50">$</Input.Icon>
-				<Divider class="mx-1" vertical />
-				<ACombobox.Control class="px-1" placeholder="Select a language" />
-			</div>
-			<ACombobox.Selections />
-		</ACombobox.Trigger>
-		<ACombobox.Content>
-			<input
-				bind:value={filteredItems.query}
-				class="border-border border-b px-4 py-3"
-				placeholder="Type to filter..."
-			/>
-			{#each filteredItems.current as item (item.value)}
-				<ACombobox.Item value={item.value}>{item.label}</ACombobox.Item>
-			{/each}
-		</ACombobox.Content>
-	</ACombobox.Root>
-</Story>

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

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

package/dist/components/container/container.stories.svelte

@@ -1,20 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import ContainerCmp from './container.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Container'
-	});
-</script>
-
-<Story name="Container">
-	<ContainerCmp class="flex w-full flex-col items-center gap-4">
-		<div class="flex w-full gap-4">
-			{#each { length: 5 } as _, i (i)}
-				<div class="bg-foreground h-80 flex-1 rounded-lg"></div>
-			{/each}
-		</div>
-
-		<div class="bg-foreground h-80 w-[50cqw] rounded-lg"></div>
-	</ContainerCmp>
-</Story>