svelte-ag 1.2.1 → 1.2.3

package/src/lib/api/query/query.unit.test.ts

@@ -1,9 +1,10 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { stringify } from 'devalue';
 import { createApiRequest, type ApiEndpoints } from 'ts-ag';
+import * as v from 'valibot';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { Cache } from './cache.svelte.js';
 import { Query, Requestor } from './query.svelte.js';
-import { stringify } from 'devalue';
-import * as v from 'valibot';
 
 type PlainUserInput = { id: number };
 type BatchedUserInput = { id: number; group?: string };

package/src/lib/api/query/rate.unit.test.ts

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { sleep } from 'radash';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
 import { RateLimiter } from './rate.svelte.js';
 
 describe('RateLimiter', () => {

package/src/lib/bin/build-tailwind-manifest.ts

@@ -2,10 +2,12 @@ import { existsSync, statSync } from 'node:fs';
 import { glob, readFile, readdir, stat } from 'node:fs/promises';
 import path from 'node:path';
 import process from 'node:process';
+
 import { init, parse as parseEsm } from 'es-module-lexer';
 import { parse as parseSvelte } from 'svelte/compiler';
-import ts from 'typescript';
 import { readPackageJson, writeIfDifferent } from 'ts-ag';
+import ts from 'typescript';
+
 import {
   ensureRelativeManifestSourcePath,
   getTailwindSourcesManifestPath,

package/src/lib/bin/build-tailwind-manifest.unit.test.ts

@@ -1,9 +1,11 @@
-import { afterEach, describe, expect, it } from 'vitest';
 import { mkdir, mkdtemp, readFile, rm, writeFile } from 'fs/promises';
-import { join } from 'path';
 import { tmpdir } from 'os';
-import { main } from './build-tailwind-manifest.js';
+import { join } from 'path';
+
+import { afterEach, describe, expect, it } from 'vitest';
+
 import { parseTailwindSourceManifest } from '../vite/tailwind-sources-manifest.js';
+import { main } from './build-tailwind-manifest.js';
 
 const tempDirectories: string[] = [];
 const originalWorkingDirectory = process.cwd();

package/src/lib/components/animated/animated.svelte

@@ -50,10 +50,11 @@
 </script>
 
 <script lang="ts">
-  import { cn, type HTMLDivAttributes } from '$utils';
-  import type { WithElementRef } from 'svelte-toolbelt';
-  import { tick } from 'svelte';
   import { watch } from 'runed';
+  import { tick } from 'svelte';
+  import type { WithElementRef } from 'svelte-toolbelt';
+
+  import { cn, type HTMLDivAttributes } from '$utils';
 
   export type Props = WithElementRef<HTMLDivAttributes> & {
     visible: boolean;

package/src/lib/components/carousel/carousel-content.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
-  import { getEmblaContext } from './context.js';
+
   import { cn } from '$utils/utils.js';
 
+  import { getEmblaContext } from './context.js';
+
   let {
     ref = $bindable(null),
     class: className,

package/src/lib/components/carousel/carousel-dots.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import type { WithoutChildren } from 'bits-ui';
-  import { getEmblaContext } from './context.js';
-  import { cn } from '$utils/utils.js';
+
   import { type Props } from '$shadcn/button/index.js';
+  import { cn } from '$utils/utils.js';
+
+  import { getEmblaContext } from './context.js';
 
   let {
     ref = $bindable(null),

package/src/lib/components/carousel/carousel-item.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
-  import { getEmblaContext } from './context.js';
+
   import { cn } from '$utils/utils.js';
 
+  import { getEmblaContext } from './context.js';
+
   let {
     ref = $bindable(null),
     class: className,

package/src/lib/components/carousel/carousel-next.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import ArrowRight from '@lucide/svelte/icons/arrow-right';
   import type { WithoutChildren } from 'bits-ui';
-  import { getEmblaContext } from './context.js';
-  import { cn } from '$utils/utils.js';
-  import { Button, type Props } from '$shadcn/button/index.js';
   import { tv, type VariantProps } from 'tailwind-variants';
 
+  import { Button, type Props } from '$shadcn/button/index.js';
+  import { cn } from '$utils/utils.js';
+
+  import { getEmblaContext } from './context.js';
+
   let {
     ref = $bindable(null),
     class: className,

package/src/lib/components/carousel/carousel-previous.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import ArrowLeft from '@lucide/svelte/icons/arrow-left';
   import type { WithoutChildren } from 'bits-ui';
-  import { getEmblaContext } from './context.js';
-  import { cn } from '$utils/utils.js';
-  import { Button, type Props } from '$shadcn/button/index.js';
   import { type VariantProps, tv } from 'tailwind-variants';
 
+  import { Button, type Props } from '$shadcn/button/index.js';
+  import { cn } from '$utils/utils.js';
+
+  import { getEmblaContext } from './context.js';
+
   let {
     ref = $bindable(null),
     class: className,

package/src/lib/components/carousel/carousel.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from './context.js';
-  import { cn } from '$utils/utils.js';
   import emblaCarouselSvelte from 'embla-carousel-svelte';
   import { watch } from 'runed';
 
+  import { cn } from '$utils/utils.js';
+
+  import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from './context.js';
+
   let {
     opts = {},
     plugins = [],

package/src/lib/components/carousel/index.ts

@@ -1,9 +1,9 @@
-import Root from './carousel.svelte';
 import Content from './carousel-content.svelte';
+import Dots from './carousel-dots.svelte';
 import Item from './carousel-item.svelte';
-import Previous from './carousel-previous.svelte';
 import Next from './carousel-next.svelte';
-import Dots from './carousel-dots.svelte';
+import Previous from './carousel-previous.svelte';
+import Root from './carousel.svelte';
 
 export {
   Root as Carousel,

package/src/lib/components/dnd/DndContext.svelte

@@ -25,6 +25,7 @@ It makes state handling and items sorting easier
   import { DragDropProvider } from '@dnd-kit/svelte';
   // import { move } from '@dnd-kit/helpers';
   import { box } from 'svelte-toolbelt';
+
   import { findItem } from './utils.svelte';
 
   let { children, items = $bindable(), onDragOver, onDragEnd, onDragStart, ...rest }: DndContextProps<T> = $props();

package/src/lib/components/dnd/DndDroppable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createDroppable, type CreateDroppableInput } from '@dnd-kit/svelte';
-  import type { ClassValue } from 'svelte/elements';
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
 
   interface DroppableProps extends CreateDroppableInput {
     children: Snippet<[{ isDropTarget: boolean }]>;

package/src/lib/components/dnd/DndHandle.svelte

@@ -5,8 +5,9 @@
 </script>
 
 <script lang="ts">
-  import { getItem } from './DndSortableItem.svelte';
   import { cn } from '$utils/utils.js';
+
+  import { getItem } from './DndSortableItem.svelte';
   let { class: className }: DragHandleProps = $props();
 
   const item = $derived.by(() => {

package/src/lib/components/dnd/DndItem.svelte

@@ -37,9 +37,10 @@ Usage:
 </script>
 
 <script lang="ts">
-  import { setItem } from './DndSortableItem.svelte';
-  import type { Snippet } from 'svelte';
   import { createDraggable, type CreateDraggableInput } from '@dnd-kit/svelte';
+  import type { Snippet } from 'svelte';
+
+  import { setItem } from './DndSortableItem.svelte';
 
   let { id, child, ...rest }: DndItemProps = $props();
 

package/src/lib/components/dnd/DndOverlay.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
   import { type ComponentProps, type Snippet } from 'svelte';
+
   import type { SortableItemChildProps } from './DndSortableItem.svelte';
 
   export type OverlayChildProps<T> = { item: T } & SortableItemChildProps;
@@ -10,6 +11,7 @@
 
 <script lang="ts" generics="T extends {id: string; children?: T[]}">
   import { DragOverlay } from '@dnd-kit/svelte';
+
   import { getDnd } from './DndContext.svelte';
   import { findItem } from './utils.svelte.js';
 

package/src/lib/components/dnd/examples/SimpleSortable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { cn } from '$utils';
+
   import DndDraghandle from '../DndHandle.svelte';
   import SimpleSortable from '../recipies/SimpleSortable.svelte';
 

package/src/lib/components/dnd/recipies/SimpleSortable.svelte

@@ -47,12 +47,13 @@ Usage:
 </script>
 
 <script lang="ts" generics="T extends {id: string; children?: T[]}">
-  import type { ClassValue } from 'svelte/elements';
   import type { Snippet } from 'svelte';
-  import type { SortableItemChildProps } from '../DndSortableItem.svelte';
-  import DndSortableItem from '../DndSortableItem.svelte';
+  import type { ClassValue } from 'svelte/elements';
+
   import DndContext, { type DndContextProps } from '../DndContext.svelte';
   import DndOverlay, { type OverlayChildProps } from '../DndOverlay.svelte';
+  import type { SortableItemChildProps } from '../DndSortableItem.svelte';
+  import DndSortableItem from '../DndSortableItem.svelte';
 
   let { class: className, item: itemSnippet, items = $bindable(), ...rest }: SimpleSortableProps<T> = $props();
 </script>

package/src/lib/components/form/form-button.svelte

@@ -7,10 +7,12 @@ Icons:
 -->
 
 <script module lang="ts">
-  import type { FormFieldProps } from './form-field.svelte';
   import type { FormPath } from 'sveltekit-superforms';
+
   import type { Props as ButtonProps } from '$shadcn/button/index.js';
 
+  import type { FormFieldProps } from './form-field.svelte';
+
   // eslint-disable-next-line
   export type FormButtonProps<T extends Record<string, unknown> = {}, U extends FormPath<T> = any> = Omit<
     ButtonProps,
@@ -24,6 +26,7 @@ Icons:
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
   import { Button } from '$shadcn/button/index.js';
   import { cn, flyAndScale } from '$utils/utils.js';
+
   import { getFormContext } from './form.svelte';
 
   let {

package/src/lib/components/form/form-control.svelte

@@ -5,10 +5,11 @@
 
 <script lang="ts">
   import { Control } from 'formsnap';
-  import { getFormContext, type FormContext } from './form.svelte';
   import type { Snippet } from 'svelte';
   import type { Expand } from 'svelte-toolbelt';
 
+  import { getFormContext, type FormContext } from './form.svelte';
+
   let {
     children: childrenProp,
     ...restProps

package/src/lib/components/form/form-description.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
-  import { cn } from '$utils/utils.js';
   import type { WithoutChild } from 'svelte-toolbelt';
 
+  import { cn } from '$utils/utils.js';
+
   let {
     ref = $bindable(null),
     class: className,

package/src/lib/components/form/form-element-field.svelte

@@ -1,8 +1,9 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
+  import type { WithElementRef, WithoutChildren } from 'bits-ui';
   import * as FormPrimitive from 'formsnap';
-  import type { FormPathLeaves } from 'sveltekit-superforms';
   import type { HTMLAttributes } from 'svelte/elements';
-  import type { WithElementRef, WithoutChildren } from 'bits-ui';
+  import type { FormPathLeaves } from 'sveltekit-superforms';
+
   import { cn } from '$shadcn/utils.js';
 
   let {

package/src/lib/components/form/form-field-errors.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
-  import { cn } from '$shadcn/utils.js';
   import type { WithoutChild } from 'svelte-toolbelt';
 
+  import { cn } from '$shadcn/utils.js';
+
   let {
     ref = $bindable(null),
     class: className,

package/src/lib/components/form/form-field-full.svelte

@@ -54,21 +54,23 @@ else is the same just bind the value prop as so:
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-  import FormField, { type FormFieldProps } from './form-field.svelte';
-  import FormLabel from './form-label.svelte';
-  import Description from './form-description.svelte';
-  import FieldErrors from './form-field-errors.svelte';
-  import { Input } from '$shadcn/input/index.js';
   import { Control as FormControl } from 'formsnap';
-  import { type FormPath } from 'sveltekit-superforms';
   import { get, set } from 'radash';
+  import type { ComponentProps, Snippet } from 'svelte';
   import { type WithElementRef, type WithoutChildren } from 'svelte-toolbelt';
-  import { cn } from '$utils/index.js';
-  import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
   import { mergeProps } from 'svelte-toolbelt';
-  import { getFormContext } from './form.svelte';
-  import type { ComponentProps, Snippet } from 'svelte';
+  import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+  import { type FormPath } from 'sveltekit-superforms';
+
   import { Checkbox } from '$shadcn/checkbox/index.js';
+  import { Input } from '$shadcn/input/index.js';
+  import { cn } from '$utils/index.js';
+
+  import Description from './form-description.svelte';
+  import FieldErrors from './form-field-errors.svelte';
+  import FormField, { type FormFieldProps } from './form-field.svelte';
+  import FormLabel from './form-label.svelte';
+  import { getFormContext } from './form.svelte';
 
   let {
     ref = $bindable(null),

package/src/lib/components/form/form-field.svelte

@@ -9,10 +9,12 @@
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
   import * as FormPrimitive from 'formsnap';
-  import type { FormPath } from 'sveltekit-superforms';
   import { type WithElementRef, type WithoutChildren } from 'svelte-toolbelt';
-  import { cn } from '$utils/index.js';
   import type { HTMLAttributes } from 'svelte/elements';
+  import type { FormPath } from 'sveltekit-superforms';
+
+  import { cn } from '$utils/index.js';
+
   import { getFormContext } from './form.svelte';
 
   let {

package/src/lib/components/form/form-fieldset.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+  import type { WithoutChild } from 'bits-ui';
   import * as FormPrimitive from 'formsnap';
   import type { FormPath } from 'sveltekit-superforms';
-  import type { WithoutChild } from 'bits-ui';
+
   import { cn } from '$utils/utils.js';
 
   let {

package/src/lib/components/form/form-label.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
+  import type { WithoutChild } from 'svelte-toolbelt';
+
   import { Label } from '$shadcn/label/index.js';
   import { cn } from '$utils/utils.js';
-  import type { WithoutChild } from 'svelte-toolbelt';
 
   let {
     ref = $bindable(null),

package/src/lib/components/form/form-legend.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import * as FormPrimitive from 'formsnap';
   import type { WithoutChild } from 'bits-ui';
+  import * as FormPrimitive from 'formsnap';
+
   import { cn } from '$shadcn/utils.js';
 
   let { ref = $bindable(null), class: className, ...restProps }: WithoutChild<FormPrimitive.LegendProps> = $props();

package/src/lib/components/form/form-message.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { cn } from '$shadcn/utils.js';
   import { mergeProps, type WithChild, type WithoutChildren } from 'svelte-toolbelt';
+
+  import { cn } from '$shadcn/utils.js';
   import { flyAndScale, type HTMLDivAttributes } from '$utils/index.js';
+
   import { getFormContext } from './form.svelte';
 
   let {

package/src/lib/components/form/form.svelte

@@ -14,12 +14,13 @@
 </script>
 
 <script lang="ts">
-  import { cn } from '$utils/utils.js';
   import type { WithElementRef } from 'bits-ui';
   import { getContext, setContext } from 'svelte';
   import type { HTMLFormAttributes } from 'svelte/elements';
   import type { SuperForm } from 'sveltekit-superforms';
 
+  import { cn } from '$utils/utils.js';
+
   let { class: className, ref = $bindable(null), children, form, ...restProps }: FormRootProps = $props();
 
   // svelte-ignore state_referenced_locally

package/src/lib/components/gallery/gallery.svelte

@@ -1,10 +1,12 @@
 <!-- src/lib/components/pages/GALLERY.svelte -->
 <script lang="ts" generics="Item">
+  import type { WithElementRef } from 'bits-ui';
   import { onMount, type Snippet } from 'svelte';
+
   import { containerSize, cn, type HTMLDivAttributes } from '$utils/index.js';
+
   import type { Size } from './utils.js';
   import { packGrid, styleForSize } from './utils.js';
-  import type { WithElementRef } from 'bits-ui';
 
   let {
     images = $bindable(),

package/src/lib/components/gradient/Gradient.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import type { BitsPrimitiveDivAttributes } from 'bits-ui';
+
   import { WebGlShader } from '$components/shader/index.js';
-  import type { Vec2, Vec4 } from '$utils/glsl.js';
   // import fragment from './gradient.frag';
   import { cn } from '$utils';
-  import type { BitsPrimitiveDivAttributes } from 'bits-ui';
+  import type { Vec2, Vec4 } from '$utils/glsl.js';
 
   let {
     class: className,

package/src/lib/components/safe/safe.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { cn, type HTMLDivAttributes } from '$utils';
   import type { WithElementRef } from 'svelte-toolbelt';
 
+  import { cn, type HTMLDivAttributes } from '$utils';
+
   export type Props = WithElementRef<HTMLDivAttributes> & {
     links?: boolean;
   };

package/src/lib/components/search/combinations/searchPopover.comp.test.ts

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+
+import SearchPopover from './searchPopover.svelte';
+
+const selectedItem = {
+  label: 'Alpha',
+  value: 'alpha'
+};
+
+const itemSnippet = createRawSnippet<[typeof selectedItem]>((getItem) => ({
+  render: () => `<span>${getItem().label}</span>`
+}));
+
+describe('SearchPopover', () => {
+  it('applies the consumer class to the real popover trigger button', () => {
+    render(SearchPopover, {
+      props: {
+        class: 'consumer-class',
+        item: itemSnippet,
+        items: [selectedItem],
+        value: selectedItem
+      }
+    });
+
+    const trigger = screen.getByRole('combobox');
+
+    expect(trigger.className).toContain('consumer-class');
+  });
+});

package/src/lib/components/search/combinations/searchPopover.svelte

@@ -10,12 +10,14 @@
 </script>
 
 <script lang="ts">
-  import { Search } from '../index.js';
+  import type { PopoverTriggerProps } from 'bits-ui';
+
   import { Button } from '$shadcn/button/index.js';
   import * as Popover from '$shadcn/popover/index.js';
-  import type { PopoverTriggerProps } from 'bits-ui';
   import { cn } from '$utils/index.js';
 
+  import { Search } from '../index.js';
+
   let {
     items,
     value = $bindable(),
@@ -45,10 +47,10 @@
   <Popover.Trigger {...restProps}>
     {#snippet child({ props })}
       <Button
+        {...props}
         bind:ref={trigger}
         variant="outline"
-        class={cn('focus-ring h-fit w-full justify-between overflow-hidden', className)}
-        {...props}
+        class={cn(props.class as string, 'focus-ring h-fit w-full justify-between overflow-hidden', className)}
         role="combobox"
       >
         {#if value}

package/src/lib/components/search/components/search-empty.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import type { SearchEmptyProps } from '../types';
   import { useId } from 'bits-ui';
-  import { useSearchEmpty } from '../search.svelte';
+  import { box, mergeProps } from 'svelte-toolbelt';
+
   import { cn } from '$utils';
 
+  import { useSearchEmpty } from '../search.svelte';
+  import type { SearchEmptyProps } from '../types';
+
   let { children, child, id = useId(), ref = $bindable(null), ...restProps }: SearchEmptyProps = $props();
 
   const emptyState = useSearchEmpty({

package/src/lib/components/search/components/search-input.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import type { SearchInputProps } from '../types';
   import { useId } from 'bits-ui';
-  import { useSearchInput } from '../search.svelte';
+  import { box, mergeProps } from 'svelte-toolbelt';
+
   import { cn } from '$utils';
 
+  import { useSearchInput } from '../search.svelte';
+  import type { SearchInputProps } from '../types';
+
   let {
     child,
     class: className,

package/src/lib/components/search/components/search-list.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import type { SearchListProps } from '../types';
   import { useId } from 'bits-ui';
-  import { useSearchList } from '../search.svelte';
-  import { cn } from '$utils';
+  import { box, mergeProps } from 'svelte-toolbelt';
+
   import { Button } from '$shadcn/button/index.js';
+  import { cn } from '$utils';
+
+  import { useSearchList } from '../search.svelte';
+  import type { SearchListProps } from '../types';
 
   let { children, child, id = useId(), ref = $bindable(null), item, ...restProps }: SearchListProps = $props();
 

package/src/lib/components/search/components/search-pagnation.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import type { SearchPagnationProps } from '../types';
   import { useId } from 'bits-ui';
-  import { useSearchPagnation } from '../search.svelte';
+  import { box, mergeProps } from 'svelte-toolbelt';
+
   import * as Pagination from '$shadcn/pagination/index.js';
 
+  import { useSearchPagnation } from '../search.svelte';
+  import type { SearchPagnationProps } from '../types';
+
   let {
     child,
     id = useId(),

package/src/lib/components/search/components/search.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import type { SearchProps } from '../types.js';
   import { useId } from 'bits-ui';
-  import { useSearchRoot } from '../search.svelte.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+
   import { cn } from '$utils/index.js';
 
+  import { useSearchRoot } from '../search.svelte.js';
+  import type { SearchProps } from '../types.js';
+
   let {
     children,
     child,