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

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>

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

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

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

package/dist/components/contextmenu/contextmenu-trigger.svelte.d.ts

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

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

package/dist/components/datagrid/datagrid.stories.svelte

@@ -1,72 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { DataGrid as DataGridCmp } from '.';
-	import { Dropdown } from '../dropdown';
-	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
-	import { Icon } from '../icon';
-	import { container } from '../../runes/container.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/DataGrid'
-	});
-</script>
-
-<script>
-	let values = $state([]);
-
-	const datagridContainer = container();
-</script>
-
-<Story name="DataGrid">
-	{#snippet children({ args })}
-		<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
-			<DataGridCmp.Header>
-				<DataGridCmp.Tr header>
-					<DataGridCmp.Th width="auto">
-						<DataGridCmp.Checkbox />
-					</DataGridCmp.Th>
-					<DataGridCmp.Th
-						class="resize-x overflow-x-auto"
-						width="auto"
-						hidden={datagridContainer.current?.width
-							? datagridContainer.current.width < 1024
-							: false}>ID</DataGridCmp.Th
-					>
-					<DataGridCmp.Th>Name</DataGridCmp.Th>
-					<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
-					<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
-					<DataGridCmp.Th width="auto"></DataGridCmp.Th>
-				</DataGridCmp.Tr>
-			</DataGridCmp.Header>
-
-			<DataGridCmp.Body>
-				{#each { length: 10 } as _, i (i)}
-					<DataGridCmp.Tr>
-						<DataGridCmp.Td>
-							<DataGridCmp.Checkbox />
-						</DataGridCmp.Td>
-
-						<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
-						<DataGridCmp.Td>John Doe</DataGridCmp.Td>
-						<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
-						<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
-
-						<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
-							<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
-								<Icon src={MoreVerticalIcon} />
-							</Dropdown.Trigger>
-							<Dropdown.List>
-								<Dropdown.Item value="ar">Arabic</Dropdown.Item>
-								<Dropdown.Item value="en">English</Dropdown.Item>
-								<Dropdown.Item value="sp">Spanish</Dropdown.Item>
-								<Dropdown.Item value="fr">Frensh</Dropdown.Item>
-							</Dropdown.List>
-						</DataGridCmp.Td>
-					</DataGridCmp.Tr>
-				{/each}
-			</DataGridCmp.Body>
-
-			<DataGridCmp.Footer></DataGridCmp.Footer>
-		</DataGridCmp.Root>
-	{/snippet}
-</Story>

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

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

package/dist/components/datagrid/td/bond.svelte.d.ts

@@ -1,28 +0,0 @@
-import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte';
-import { DataGridBondState } from '../bond.svelte';
-import type { Direction, SortableType } from '../../../types';
-export type DataGridTdBondProps<T = unknown> = BondStateProps & {
-    width?: string;
-    screen?: string;
-    sortable?: boolean | SortableType;
-    direction: Direction;
-    data?: T;
-};
-export type DataGridTdElements = {
-    root: HTMLElement;
-};
-export declare class DataGridTdBond<T> extends Bond<DataGridTdBondProps<T>, DataGridTdBondState<T>, DataGridTdElements> {
-    #private;
-    static CONTEXT_KEY: string;
-    constructor(s: DataGridTdBondState<T>);
-    share(): this;
-    mount(): () => void;
-    unmount(): void;
-    static get(): DataGridTdBond | undefined;
-    static set(bond: DataGridTdBond): DataGridTdBond;
-}
-export declare class DataGridTdBondState<T> extends BondState<DataGridTdBondProps<T>> {
-    #private;
-    constructor(props: () => DataGridTdBondProps<T>);
-    get datagrid(): DataGridBondState<T>;
-}

package/dist/components/datagrid/td/bond.svelte.js

@@ -1,40 +0,0 @@
-import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../../shared/bond.svelte';
-import { DataGridBond, DataGridBondState } from '../bond.svelte';
-export class DataGridTdBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/datagrid/td';
-    #datagrid;
-    constructor(s) {
-        super(s);
-        this.#datagrid = DataGridBond.get();
-    }
-    share() {
-        return DataGridTdBond.set(this);
-    }
-    mount() {
-        // TD doesn't mount as a row, it's part of a TR
-        return () => { };
-    }
-    unmount() {
-        return this.#datagrid.state.unmountRow(this.state.id);
-    }
-    static get() {
-        return getContext(DataGridTdBond.CONTEXT_KEY);
-    }
-    static set(bond) {
-        return setContext(DataGridTdBond.CONTEXT_KEY, bond);
-    }
-}
-export class DataGridTdBondState extends BondState {
-    #datagrid;
-    constructor(props) {
-        super(props);
-        this.#datagrid = DataGridBond.get().state;
-    }
-    get datagrid() {
-        if (!this.#datagrid) {
-            throw new Error('DataGridTdBond must be used within a DataGridBond context.');
-        }
-        return this.#datagrid;
-    }
-}