@svelte-atoms/core 1.0.0-alpha.30 → 1.0.0-alpha.31

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

@@ -1,9 +1,9 @@
-<script>
-	import { Input } from '../input';
-
-	let { children, ...restProps } = $props();
-</script>
-
-<Input.Root preset="textarea" {...restProps}>
-	{@render children?.()}
-</Input.Root>
+<script>
+	import { Input } from '../input';
+
+	let { class: klass = '', children, ...restProps } = $props();
+</script>
+
+<Input.Root preset="textarea" class={['h-auto', klass]} {...restProps}>
+	{@render children?.()}
+</Input.Root>

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

@@ -4,8 +4,10 @@ type TextareaRoot = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const TextareaRoot: import("svelte").Component<{
+    class?: string;
     children: any;
 } & Record<string, any>, {}, "">;
 type $$ComponentProps = {
+    class?: string;
     children: any;
 } & Record<string, any>;

package/dist/components/tooltip/tooltip-trigger.svelte

@@ -4,7 +4,7 @@
 
 	const popoverBond = PopoverBond.get();
 
-	let { onmount, children, ...restProps } = $props();
+	let { onmount, children, onclick = undefined, ...restProps } = $props();
 
 	function tooltip(node: HTMLElement) {
 		const onpointerenter = async () => {
@@ -34,6 +34,6 @@
 	}
 </script>
 
-<Trigger preset="tooltip.trigger" onmount={tooltip} {...restProps}>
+<Trigger preset="tooltip.trigger" onmount={tooltip} {onclick} {...restProps}>
 	{@render children?.()}
 </Trigger>

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

@@ -1,6 +1,7 @@
 declare const TooltipTrigger: import("svelte").Component<{
     onmount: any;
     children: any;
+    onclick?: any;
 } & Record<string, any>, {}, "">;
 type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
 export default TooltipTrigger;

package/dist/components/tooltip/tooltip.stories.svelte

@@ -1,32 +1,32 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Tooltip as Tooltip_ } from '.';
-	import { Root as TooltipRoot } from './atoms';
-	import { Button } from '../button';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Tooltip',
-		// 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);
-</script>
-
-<Story name="Tooltip" args={{}}>
-	<Tooltip_.Root bind:open offset={0}>
-		<Tooltip_.Trigger base={Button}>Open Popover</Tooltip_.Trigger>
-		<Tooltip_.Content>
-			<div>Hello World !</div>
-			<Tooltip_.Arrow />
-		</Tooltip_.Content>
-	</Tooltip_.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Tooltip as Tooltip_ } from '.';
+	import { Root as TooltipRoot } from './atoms';
+	import { Button } from '../button';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Tooltip',
+		// 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);
+</script>
+
+<Story name="Tooltip" args={{}}>
+	<Tooltip_.Root bind:open offset={0}>
+		<Tooltip_.Trigger base={Button}>Open Popover</Tooltip_.Trigger>
+		<Tooltip_.Content>
+			<div>Hello World !</div>
+			<Tooltip_.Arrow />
+		</Tooltip_.Content>
+	</Tooltip_.Root>
+</Story>

package/dist/components/tree/tree.stories.svelte

@@ -1,142 +1,142 @@
-<script module>
-	import { untrack } from 'svelte';
-	import { animate } from 'motion';
-	import { RenderScan } from 'svelte-render-scan';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { dev } from '$app/environment';
-	import { Tree as Tree_ } from '.';
-	import { tree } from './attachments.svelte';
-	import { TreeBond } from './bond.svelte';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Tree',
-		// 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(true);
-</script>
-
-<Story name="Tree" args={{}}>
-	<Tree_.Root class="" bind:open>
-		{#if dev}
-			<RenderScan duration={300} />
-		{/if}
-
-		<Tree_.Header>Vehicles</Tree_.Header>
-
-		<Tree_.Body
-			class="border-l border-l-neutral-200"
-			onmount={(node) => {
-				const bond = TreeBond.get();
-				const isOpen = untrack(() => bond?.state.props.open ?? false);
-				animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
-			}}
-			{@attach tree((node, bond) => {
-				const isOpen = bond?.state.props.open ?? false;
-				animate(
-					node,
-					{
-						height: +isOpen ? 'auto' : 0,
-						opacity: +isOpen,
-						pointerEvents: isOpen ? 'all' : 'none'
-					},
-					{ duration: 0.1 }
-				);
-			})}
-		>
-			<Tree_.Root>
-				<Tree_.Header>Cars</Tree_.Header>
-				<Tree_.Body
-					class="border-l border-l-neutral-200"
-					onmount={(node) => {
-						const bond = TreeBond.get();
-						const isOpen = bond?.state.props.open ?? false;
-						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
-					}}
-					animate={(node) => {
-						const bond = TreeBond.get();
-						const isOpen = bond?.state.props.open ?? false;
-						animate(
-							node,
-							{
-								height: +isOpen ? 'auto' : 0,
-								opacity: +isOpen,
-								pointerEvents: isOpen ? 'all' : 'none'
-							},
-							{ duration: 0.1 }
-						);
-					}}
-				>
-					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.
-				</Tree_.Body>
-			</Tree_.Root>
-
-			<Tree_.Root>
-				<Tree_.Header>Trucks</Tree_.Header>
-				<Tree_.Body
-					class="border-l border-l-neutral-200"
-					onmount={(node) => {
-						const bond = TreeBond.get();
-						const isOpen = bond?.state.props.open ?? false;
-						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
-					}}
-					{@attach tree((node, bond) => {
-						const isOpen = bond?.state.props.open ?? false;
-						animate(
-							node,
-							{
-								height: +isOpen ? 'auto' : 0,
-								opacity: +isOpen,
-								pointerEvents: isOpen ? 'all' : 'none'
-							},
-							{ duration: 0.1 }
-						);
-					})}
-				>
-					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.
-				</Tree_.Body>
-			</Tree_.Root>
-
-			<Tree_.Root>
-				<Tree_.Header>Bikes</Tree_.Header>
-				<Tree_.Body
-					class="border-l border-l-neutral-200"
-					onmount={(node) => {
-						const bond = TreeBond.get();
-						const isOpen = untrack(() => bond?.state.props.open ?? false);
-						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
-					}}
-					{@attach tree((node, bond) => {
-						const isOpen = bond?.state.props.open ?? false;
-						animate(
-							node,
-							{
-								height: +isOpen ? 'auto' : 0,
-								opacity: +isOpen,
-								pointerEvents: isOpen ? 'all' : 'none'
-							},
-							{ duration: 0.1 }
-						);
-					})}
-				>
-					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.
-				</Tree_.Body>
-			</Tree_.Root>
-		</Tree_.Body>
-	</Tree_.Root>
-</Story>
+<script module>
+	import { untrack } from 'svelte';
+	import { animate } from 'motion';
+	import { RenderScan } from 'svelte-render-scan';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { dev } from '$app/environment';
+	import { Tree as Tree_ } from '.';
+	import { tree } from './attachments.svelte';
+	import { TreeBond } from './bond.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Tree',
+		// 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(true);
+</script>
+
+<Story name="Tree" args={{}}>
+	<Tree_.Root class="" bind:open>
+		{#if dev}
+			<RenderScan duration={300} />
+		{/if}
+
+		<Tree_.Header>Vehicles</Tree_.Header>
+
+		<Tree_.Body
+			class="border-l border-l-neutral-200"
+			onmount={(node) => {
+				const bond = TreeBond.get();
+				const isOpen = untrack(() => bond?.state.props.open ?? false);
+				animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
+			}}
+			{@attach tree((node, bond) => {
+				const isOpen = bond?.state.props.open ?? false;
+				animate(
+					node,
+					{
+						height: +isOpen ? 'auto' : 0,
+						opacity: +isOpen,
+						pointerEvents: isOpen ? 'all' : 'none'
+					},
+					{ duration: 0.1 }
+				);
+			})}
+		>
+			<Tree_.Root>
+				<Tree_.Header>Cars</Tree_.Header>
+				<Tree_.Body
+					class="border-l border-l-neutral-200"
+					onmount={(node) => {
+						const bond = TreeBond.get();
+						const isOpen = bond?.state.props.open ?? false;
+						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
+					}}
+					animate={(node) => {
+						const bond = TreeBond.get();
+						const isOpen = bond?.state.props.open ?? false;
+						animate(
+							node,
+							{
+								height: +isOpen ? 'auto' : 0,
+								opacity: +isOpen,
+								pointerEvents: isOpen ? 'all' : 'none'
+							},
+							{ duration: 0.1 }
+						);
+					}}
+				>
+					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.
+				</Tree_.Body>
+			</Tree_.Root>
+
+			<Tree_.Root>
+				<Tree_.Header>Trucks</Tree_.Header>
+				<Tree_.Body
+					class="border-l border-l-neutral-200"
+					onmount={(node) => {
+						const bond = TreeBond.get();
+						const isOpen = bond?.state.props.open ?? false;
+						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
+					}}
+					{@attach tree((node, bond) => {
+						const isOpen = bond?.state.props.open ?? false;
+						animate(
+							node,
+							{
+								height: +isOpen ? 'auto' : 0,
+								opacity: +isOpen,
+								pointerEvents: isOpen ? 'all' : 'none'
+							},
+							{ duration: 0.1 }
+						);
+					})}
+				>
+					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.
+				</Tree_.Body>
+			</Tree_.Root>
+
+			<Tree_.Root>
+				<Tree_.Header>Bikes</Tree_.Header>
+				<Tree_.Body
+					class="border-l border-l-neutral-200"
+					onmount={(node) => {
+						const bond = TreeBond.get();
+						const isOpen = untrack(() => bond?.state.props.open ?? false);
+						animate(node, { height: +isOpen ? 'auto' : 0, opacity: +isOpen }, { duration: 0 });
+					}}
+					{@attach tree((node, bond) => {
+						const isOpen = bond?.state.props.open ?? false;
+						animate(
+							node,
+							{
+								height: +isOpen ? 'auto' : 0,
+								opacity: +isOpen,
+								pointerEvents: isOpen ? 'all' : 'none'
+							},
+							{ duration: 0.1 }
+						);
+					})}
+				>
+					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.
+				</Tree_.Body>
+			</Tree_.Root>
+		</Tree_.Body>
+	</Tree_.Root>
+</Story>

package/dist/icons/icon-copy.svelte

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="size-full" viewBox="0 0 24 24"
+	><!-- Icon from Fluent UI System Icons by Microsoft Corporation - https://github.com/microsoft/fluentui-system-icons/blob/main/LICENSE --><path
+		fill="currentColor"
+		d="M5.503 4.627 5.5 6.75v10.504a3.25 3.25 0 0 0 3.25 3.25h8.616a2.251 2.251 0 0 1-2.122 1.5H8.75A4.75 4.75 0 0 1 4 17.254V6.75c0-.98.627-1.815 1.503-2.123M17.75 2A2.25 2.25 0 0 1 20 4.25v13a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-13A2.25 2.25 0 0 1 8.75 2zM7.75 17.25c0 .414.336.75.75.75h9a.75.75 0 0 0 .75-.75v-13a.75.75 0 0 0-.75-.75h-9a.75.75 0 0 0-.75.75z"
+	/></svg
+>

package/dist/{components/radio/types.svelte.d.ts → icons/icon-copy.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default Types;
-type Types = SvelteComponent<{
+export default IconCopy;
+type IconCopy = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string;
 };
-declare const Types: $$__sveltets_2_IsomorphicComponent<{
+declare const IconCopy: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/utils/markdown-to-llm.d.ts

@@ -0,0 +1,28 @@
+export interface PropDefinition {
+    name: string;
+    type: string;
+    default: string;
+    description: string;
+}
+/**
+ * Converts prop definitions to markdown table format
+ */
+export declare function propsToMarkdown(props: PropDefinition[]): string;
+/**
+ * Injects props into markdown content by replacing placeholders
+ * Placeholders format: {{propName}}
+ */
+export declare function injectPropsIntoMarkdown(markdown: string, propsMap: Record<string, PropDefinition[]>): string;
+/**
+ * Converts markdown content to LLM-friendly text format
+ * Keeps markdown syntax as-is since LLMs parse it well
+ */
+export declare function markdownToLLM(markdown: string): string;
+/**
+ * Reads markdown files from the docs directory
+ */
+export declare function readMarkdownFile(filePath: string): Promise<string>;
+/**
+ * Generate LLM-friendly documentation metadata
+ */
+export declare function generateLLMHeader(title: string, description: string, version?: string): string;

package/dist/utils/markdown-to-llm.js

@@ -0,0 +1,76 @@
+/**
+ * Converts prop definitions to markdown table format
+ */
+export function propsToMarkdown(props) {
+    if (!props || props.length === 0)
+        return '';
+    let markdown = '| Name | Type | Default | Description |\n';
+    markdown += '|------|------|---------|-------------|\n';
+    for (const prop of props) {
+        const name = prop.name.replace(/\|/g, '\\|');
+        const type = prop.type.replace(/\|/g, '\\|');
+        const defaultVal = prop.default.replace(/\|/g, '\\|');
+        const description = prop.description.replace(/\|/g, '\\|');
+        markdown += `| ${name} | ${type} | ${defaultVal} | ${description} |\n`;
+    }
+    return markdown;
+}
+/**
+ * Injects props into markdown content by replacing placeholders
+ * Placeholders format: {{propName}}
+ */
+export function injectPropsIntoMarkdown(markdown, propsMap) {
+    let result = markdown;
+    for (const [key, props] of Object.entries(propsMap)) {
+        const placeholder = new RegExp(`{{${key}}}`, 'g');
+        const propsMarkdown = propsToMarkdown(props);
+        result = result.replace(placeholder, propsMarkdown);
+    }
+    return result;
+}
+/**
+ * Converts markdown content to LLM-friendly text format
+ * Keeps markdown syntax as-is since LLMs parse it well
+ */
+export function markdownToLLM(markdown) {
+    let text = markdown;
+    // Remove HTML comments
+    text = text.replace(/<!--[\s\S]*?-->/g, '');
+    // Remove excessive blank lines (more than 2)
+    text = text.replace(/\n{3,}/g, '\n\n');
+    // Trim whitespace
+    text = text.trim();
+    return text;
+}
+/**
+ * Reads markdown files from the docs directory
+ */
+export async function readMarkdownFile(filePath) {
+    try {
+        // In production, you might want to use a different approach
+        // This is a placeholder - adjust based on your build setup
+        const response = await fetch(filePath);
+        if (!response.ok)
+            throw new Error(`Failed to fetch ${filePath}`);
+        return await response.text();
+    }
+    catch (error) {
+        console.error(`Error reading markdown file: ${filePath}`, error);
+        return '';
+    }
+}
+/**
+ * Generate LLM-friendly documentation metadata
+ */
+export function generateLLMHeader(title, description, version = '1.0.0-alpha.30') {
+    return `# ${title}
+
+${description}
+
+---
+Generated: ${new Date().toISOString()}
+Version: ${version}
+---
+
+`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@svelte-atoms/core",
-	"version": "1.0.0-alpha.30",
+	"version": "1.0.0-alpha.31",
 	"description": "A modular, accessible, and extensible Svelte UI component library.",
 	"repository": {
 		"type": "git",
@@ -31,7 +31,6 @@
 	},
 	"files": [
 		"dist",
-		"llm",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],