negodesign 0.0.81 → 0.0.82

package/dist/components/ui/collapsible/collapsible-trigger.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-	import { useCollapsibleContext } from "./collapsible.svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		child,
-		onclick,
-		...restProps
-	}: HTMLButtonAttributes & {
-		children?: Snippet;
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-		ref?: HTMLButtonElement | null;
-	} = $props();
-
-	const state = useCollapsibleContext();
-
-	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
-		onclick?.(event);
-		state.toggle();
-	}
-
-	const triggerProps = $derived({
-		type: "button",
-		"data-slot": "collapsible-trigger",
-		"data-state": state.open ? "open" : "closed",
-		"aria-expanded": state.open,
-		disabled: state.disabled || undefined,
-		class: className
-	});
-</script>
-
-{#if child}
-	{@render child({ props: { ...triggerProps, onclick: handleClick, ...restProps } })}
-{:else}
-	<button
-		bind:this={ref}
-		type="button"
-		data-slot="collapsible-trigger"
-		data-state={state.open ? "open" : "closed"}
-		aria-expanded={state.open}
-		disabled={state.disabled}
-		class={className}
-		onclick={handleClick}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { useCollapsibleContext } from "./collapsible.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		onclick,
+		...restProps
+	}: HTMLButtonAttributes & {
+		children?: Snippet;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		ref?: HTMLButtonElement | null;
+	} = $props();
+
+	const state = useCollapsibleContext();
+
+	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		onclick?.(event);
+		state.toggle();
+	}
+
+	const triggerProps = $derived({
+		type: "button",
+		"data-slot": "collapsible-trigger",
+		"data-state": state.open ? "open" : "closed",
+		"aria-expanded": state.open,
+		disabled: state.disabled || undefined,
+		class: className
+	});
+</script>
+
+{#if child}
+	{@render child({ props: { ...triggerProps, onclick: handleClick, ...restProps } })}
+{:else}
+	<button
+		bind:this={ref}
+		type="button"
+		data-slot="collapsible-trigger"
+		data-state={state.open ? "open" : "closed"}
+		aria-expanded={state.open}
+		disabled={state.disabled}
+		class={className}
+		onclick={handleClick}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
 {/if}

package/dist/components/ui/collapsible/collapsible.svelte

@@ -1,67 +1,67 @@
-<script lang="ts" module>
-	import { getContext, setContext } from "svelte";
-
-	export type CollapsibleContext = {
-		get open(): boolean;
-		get disabled(): boolean;
-		toggle: () => void;
-	};
-
-	const COLLAPSIBLE_CONTEXT_KEY = "scn-collapsible";
-
-	export function setCollapsibleContext(ctx: CollapsibleContext): CollapsibleContext {
-		return setContext(COLLAPSIBLE_CONTEXT_KEY, ctx);
-	}
-
-	export function useCollapsibleContext(): CollapsibleContext {
-		return getContext<CollapsibleContext>(COLLAPSIBLE_CONTEXT_KEY);
-	}
-</script>
-
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import { cn } from "../../../utils.js";
-
-	let {
-		defaultOpen = false,
-		open = $bindable(defaultOpen),
-		disabled = false,
-		class: className,
-		children,
-		child,
-	}: {
-		defaultOpen?: boolean;
-		open?: boolean;
-		disabled?: boolean;
-		class?: string;
-		children?: Snippet<[{ props: Record<string, unknown> }]>;
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-	} = $props();
-
-	function toggle() {
-		if (disabled) return;
-		open = !open;
-	}
-
-	setCollapsibleContext({
-		get open() {
-			return open;
-		},
-		get disabled() {
-			return disabled;
-		},
-		toggle
-	});
-
-	const rootProps = $derived({
-		"data-slot": "collapsible",
-		"data-state": open ? "open" : "closed",
-		class: cn("group/collapsible", className)
-	});
-</script>
-
-{#if child}
-	{@render child({ props: rootProps })}
-{:else}
-	{@render children?.({ props: rootProps })}
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+
+	export type CollapsibleContext = {
+		get open(): boolean;
+		get disabled(): boolean;
+		toggle: () => void;
+	};
+
+	const COLLAPSIBLE_CONTEXT_KEY = "scn-collapsible";
+
+	export function setCollapsibleContext(ctx: CollapsibleContext): CollapsibleContext {
+		return setContext(COLLAPSIBLE_CONTEXT_KEY, ctx);
+	}
+
+	export function useCollapsibleContext(): CollapsibleContext {
+		return getContext<CollapsibleContext>(COLLAPSIBLE_CONTEXT_KEY);
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+
+	let {
+		defaultOpen = false,
+		open = $bindable(defaultOpen),
+		disabled = false,
+		class: className,
+		children,
+		child,
+	}: {
+		defaultOpen?: boolean;
+		open?: boolean;
+		disabled?: boolean;
+		class?: string;
+		children?: Snippet<[{ props: Record<string, unknown> }]>;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	function toggle() {
+		if (disabled) return;
+		open = !open;
+	}
+
+	setCollapsibleContext({
+		get open() {
+			return open;
+		},
+		get disabled() {
+			return disabled;
+		},
+		toggle
+	});
+
+	const rootProps = $derived({
+		"data-slot": "collapsible",
+		"data-state": open ? "open" : "closed",
+		class: cn("group/collapsible", className)
+	});
+</script>
+
+{#if child}
+	{@render child({ props: rootProps })}
+{:else}
+	{@render children?.({ props: rootProps })}
 {/if}

package/dist/components/ui/data-table/flex-render.svelte

@@ -1,40 +1,40 @@
-<script
-	lang="ts"
-	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
->
-	import type { CellContext, ColumnDefTemplate, HeaderContext } from "./table-core.svelte.js";
-	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
-	import type { Attachment } from "svelte/attachments";
-	type Props = {
-		/** The cell or header field of the current cell's column definition. */
-		content?: TContext extends CellContext<TData, TValue>
-			? ColumnDefTemplate<CellContext<TData, TValue>>
-			: TContext extends HeaderContext<TData, TValue>
-				? ColumnDefTemplate<HeaderContext<TData, TValue>>
-				: never;
-		/** The result of the `getContext()` function of the header or cell */
-		context: TContext;
-
-		/** Used to pass attachments that can't be gotten through context */
-		attach?: Attachment;
-	};
-
-	let { content, context, attach }: Props = $props();
-</script>
-
-{#if typeof content === "string"}
-	{content}
-{:else if content instanceof Function}
-	<!-- It's unlikely that a CellContext will be passed to a Header -->
-	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-	{@const result = content(context as any)}
-	{#if result instanceof RenderComponentConfig}
-		{@const { component: Component, props } = result}
-		<Component {...props} {attach} />
-	{:else if result instanceof RenderSnippetConfig}
-		{@const { snippet, params } = result}
-		{@render snippet({ ...params, attach })}
-	{:else}
-		{result}
-	{/if}
-{/if}
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "./table-core.svelte.js";
+	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
+	import type { Attachment } from "svelte/attachments";
+	type Props = {
+		/** The cell or header field of the current cell's column definition. */
+		content?: TContext extends CellContext<TData, TValue>
+			? ColumnDefTemplate<CellContext<TData, TValue>>
+			: TContext extends HeaderContext<TData, TValue>
+				? ColumnDefTemplate<HeaderContext<TData, TValue>>
+				: never;
+		/** The result of the `getContext()` function of the header or cell */
+		context: TContext;
+
+		/** Used to pass attachments that can't be gotten through context */
+		attach?: Attachment;
+	};
+
+	let { content, context, attach }: Props = $props();
+</script>
+
+{#if typeof content === "string"}
+	{content}
+{:else if content instanceof Function}
+	<!-- It's unlikely that a CellContext will be passed to a Header -->
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	{@const result = content(context as any)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} {attach} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet({ ...params, attach })}
+	{:else}
+		{result}
+	{/if}
+{/if}

package/dist/components/ui/datatable/ui/DataTableActions.svelte

@@ -1,28 +1,28 @@
-<script lang="ts" generics="T">
-    import type { CellContext } from "../../data-table";
-    import * as DropdownMenu from "../../dropdown-menu/index.js";
-    import Button from "../../button/button.svelte";
-    import { MoreHorizontalIcon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-
-    let { row }: CellContext<T, unknown> = $props();
-</script>
-
-<DropdownMenu.Root>
-    <DropdownMenu.Trigger>
-        {#snippet child({ props })}
-            <Button {...props} variant="ghost" class="size-8 p-0">
-                <HugeiconsIcon icon={MoreHorizontalIcon} class="size-4" />
-                <span class="sr-only">Open menu</span>
-            </Button>
-        {/snippet}
-    </DropdownMenu.Trigger>
-    <DropdownMenu.Content align="end">
-        <DropdownMenu.Item onclick={() => console.log(row.original)}
-            >Copy</DropdownMenu.Item
-        >
-        <DropdownMenu.Item onclick={() => console.log(row.original)}
-            >Delete</DropdownMenu.Item
-        >
-    </DropdownMenu.Content>
-</DropdownMenu.Root>
+<script lang="ts" generics="T">
+    import type { CellContext } from "../../data-table";
+    import * as DropdownMenu from "../../dropdown-menu/index.js";
+    import Button from "../../button/button.svelte";
+    import { MoreHorizontalIcon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+
+    let { row }: CellContext<T, unknown> = $props();
+</script>
+
+<DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+            <Button {...props} variant="ghost" class="size-8 p-0">
+                <HugeiconsIcon icon={MoreHorizontalIcon} class="size-4" />
+                <span class="sr-only">Open menu</span>
+            </Button>
+        {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content align="end">
+        <DropdownMenu.Item onclick={() => console.log(row.original)}
+            >Copy</DropdownMenu.Item
+        >
+        <DropdownMenu.Item onclick={() => console.log(row.original)}
+            >Delete</DropdownMenu.Item
+        >
+    </DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/ui/datatable/ui/DataTableCheckbox.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-    import { Checkbox } from "../../checkbox";
-
-    let {
-        checked = $bindable(false),
-        indeterminate = $bindable(false),
-        onCheckedChange,
-        ...restProps
-    }: {
-        checked?: boolean;
-        indeterminate?: boolean;
-        onCheckedChange?: (value: boolean) => void;
-        [key: string]: unknown;
-    } = $props();
-</script>
-
-<Checkbox
-    bind:checked
-    bind:indeterminate
-    onCheckedChange={(v) => onCheckedChange?.(!!v)}
-    {...restProps}
-/>
+<script lang="ts">
+    import { Checkbox } from "../../checkbox";
+
+    let {
+        checked = $bindable(false),
+        indeterminate = $bindable(false),
+        onCheckedChange,
+        ...restProps
+    }: {
+        checked?: boolean;
+        indeterminate?: boolean;
+        onCheckedChange?: (value: boolean) => void;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<Checkbox
+    bind:checked
+    bind:indeterminate
+    onCheckedChange={(v) => onCheckedChange?.(!!v)}
+    {...restProps}
+/>

package/dist/components/ui/datatable/ui/DataTableContent.svelte

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T">
-    import type {
-        ColumnDef,
-        Table as TanstackTable,
-    } from "../../data-table";
-    import * as Table from "../../table/index.js";
-    import FlexRender from "../../data-table/flex-render.svelte";
-
-    type Props = {
-        table: TanstackTable<T>;
-        columns: ColumnDef<T>[];
-    };
-
-    let { table, columns }: Props = $props();
-</script>
-
-<div class="rounded-md border">
-    <Table.Root>
-        <Table.Header>
-            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-                <Table.Row>
-                    {#each headerGroup.headers as header (header.id)}
-                        <Table.Head class="[&:has([role=checkbox])]:ps-3">
-                            {#if !header.isPlaceholder}
-                                <FlexRender
-                                    content={header.column.columnDef.header}
-                                    context={header.getContext()}
-                                />
-                            {/if}
-                        </Table.Head>
-                    {/each}
-                </Table.Row>
-            {/each}
-        </Table.Header>
-        <Table.Body>
-            {#each table.getRowModel().rows as row (row.id)}
-                <Table.Row data-state={row.getIsSelected() && "selected"}>
-                    {#each row.getVisibleCells() as cell (cell.id)}
-                        <Table.Cell class="[&:has([role=checkbox])]:ps-3">
-                            <FlexRender
-                                content={cell.column.columnDef.cell}
-                                context={cell.getContext()}
-                            />
-                        </Table.Cell>
-                    {/each}
-                </Table.Row>
-            {:else}
-                <Table.Row>
-                    <Table.Cell
-                        colspan={columns.length}
-                        class="h-24 text-center"
-                    >
-                        No results.
-                    </Table.Cell>
-                </Table.Row>
-            {/each}
-        </Table.Body>
-    </Table.Root>
-</div>
+<script lang="ts" generics="T">
+    import type {
+        ColumnDef,
+        Table as TanstackTable,
+    } from "../../data-table";
+    import * as Table from "../../table/index.js";
+    import FlexRender from "../../data-table/flex-render.svelte";
+
+    type Props = {
+        table: TanstackTable<T>;
+        columns: ColumnDef<T>[];
+    };
+
+    let { table, columns }: Props = $props();
+</script>
+
+<div class="rounded-md border">
+    <Table.Root>
+        <Table.Header>
+            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+                <Table.Row>
+                    {#each headerGroup.headers as header (header.id)}
+                        <Table.Head class="[&:has([role=checkbox])]:ps-3">
+                            {#if !header.isPlaceholder}
+                                <FlexRender
+                                    content={header.column.columnDef.header}
+                                    context={header.getContext()}
+                                />
+                            {/if}
+                        </Table.Head>
+                    {/each}
+                </Table.Row>
+            {/each}
+        </Table.Header>
+        <Table.Body>
+            {#each table.getRowModel().rows as row (row.id)}
+                <Table.Row data-state={row.getIsSelected() && "selected"}>
+                    {#each row.getVisibleCells() as cell (cell.id)}
+                        <Table.Cell class="[&:has([role=checkbox])]:ps-3">
+                            <FlexRender
+                                content={cell.column.columnDef.cell}
+                                context={cell.getContext()}
+                            />
+                        </Table.Cell>
+                    {/each}
+                </Table.Row>
+            {:else}
+                <Table.Row>
+                    <Table.Cell
+                        colspan={columns.length}
+                        class="h-24 text-center"
+                    >
+                        No results.
+                    </Table.Cell>
+                </Table.Row>
+            {/each}
+        </Table.Body>
+    </Table.Root>
+</div>