svelte-ag 0.0.2-dev.73 → 0.0.2-dev.80

package/package.json

@@ -1,54 +1,66 @@
 {
   "name": "svelte-ag",
   "description": "Useful svelte components",
-  "version": "0.0.2-dev.73",
+  "version": "0.0.2-dev.80",
   "author": "Alexander Hornung",
   "bugs": "https://github.com/ageorgeh/cms/issues",
   "dependencies": {
-    "@iconify/types": "^2.0.0",
-    "@sveltejs/kit": "^2.20.7",
-    "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/vite": "^4.1.4",
     "clsx": "^2.1.1",
-    "mode-watcher": "^0.5.1",
-    "svelte": "^5.27.0",
     "svelte-toolbelt": "^0.7.1",
     "tailwind-merge": "^3.2.0",
     "tailwind-variants": "^1.0.0",
-    "tw-animate-css": "^1.2.5",
-    "vitest": "^3.1.1",
-    "fuse.js": "^7.1.0",
     "dequal": "^2.0.3",
-    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/dom": "^1.7.0",
     "@dnd-kit-svelte/core": "^0.0.8",
     "@dnd-kit-svelte/sortable": "^0.0.8",
-    "@dnd-kit-svelte/utilities": "^0.0.8"
+    "@dnd-kit-svelte/utilities": "^0.0.8",
+    "embla-carousel-svelte": "^8.6.0",
+    "svader": "^0.5.4",
+    "runed": "^0.26.0",
+    "bits-ui": "^1.5.3",
+    "@rollup/pluginutils": "^5.1.4",
+    "sveltekit-superforms": "2.25.0",
+    "formsnap": "2.0.1",
+    "valibot": "1.1.0",
+    "radash": "12.1.0",
+    "ts-ag": "0.0.1-dev.1"
+  },
+  "peerDependencies": {
+    "svelte": "^5.28.2",
+    "tailwindcss": "^4.1.5",
+    "tw-animate-css": "^1.2.9",
+    "tailwind-variants": "^1.0.0",
+    "@lucide/svelte": "^0.508.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.24.0",
+    "svelte": "^5.28.2",
+    "@sveltejs/kit": "^2.20.8",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@eslint/js": "^9.26.0",
+    "@iconify/types": "^2.0.0",
     "@iconify/tailwind4": "^1.0.6",
-    "@lucide/svelte": "^0.488.0",
-    "@tailwindcss/forms": "^0.5.10",
+    "@iconify/json": "^2.2.339",
+    "@lucide/svelte": "^0.508.0",
+    "tailwindcss": "^4.1.5",
+    "tw-animate-css": "^1.2.9",
+    "@tailwindcss/vite": "^4.1.5",
     "@tailwindcss/typography": "^0.5.16",
-    "bits-ui": "^1.3.19",
-    "eslint": "^9.24.0",
+    "eslint": "^9.26.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-readable-tailwind": "^2.0.1",
+    "eslint-plugin-readable-tailwind": "^2.1.1",
     "eslint-plugin-svelte": "^3.5.1",
-    "globals": "^16.0.0",
+    "globals": "^16.1.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "tailwind-scrollbar": "^4.0.2",
-    "tailwindcss": "^4.1.3",
-    "tw-animate-css": "^1.2.5",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.29.1",
-    "vite": "^6.2.6",
-    "runed": "^0.25.0"
-  },
-  "engines": {
-    "node": ">=18.0.0"
+    "typescript-eslint": "^8.32.0",
+    "typescript-svelte-plugin": "0.3.46",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3",
+    "npm-check-updates": "^18.0.1",
+    "@types/node": "^22.15.17",
+    "rollup": "^4.40.2"
   },
   "type": "module",
   "files": [
@@ -58,9 +70,13 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./dist/lib/index.ts",
+      "types": "./dist/lib/index.d.ts",
       "default": "./dist/lib/index.js"
     },
+    "./vite": {
+      "types": "./dist/lib/vite/index.d.ts",
+      "default": "./dist/lib/vite/index.js"
+    },
     "./*": {
       "types": "./dist/lib/*",
       "svelte": "./dist/lib/*",
@@ -69,9 +85,8 @@
   },
   "repository": "ageorgeh/svelte-ag",
   "scripts": {
-    "components:package": "svelte-package -i src --tsconfig tsconfig.json",
-    "components:watch": "svelte-package -i src -w --tsconfig tsconfig.json",
-    "components:dev": "vite --config vite.config.ts dev",
+    "project:package": "svelte-package -i src",
+    "project:watch": "svelte-package -i src -w",
     "svelte:sync": "svelte-kit sync",
     "publish:local": "pnpm version prerelease --preid dev --no-git-tag-version && pnpm publish --registry http://localhost:4873 --tag dev --access public --no-git-checks --json > ./publishLocal.json",
     "publish:prerelease": "pnpm publish --tag dev --access public --no-git-checks --registry=https://registry.npmjs.org/ --json > ./publish.json",

package/src/app.css

@@ -6,10 +6,6 @@
 @plugin '@tailwindcss/typography';
 /* @plugin '@tailwindcss/forms'; */
 @plugin "@iconify/tailwind4";
-@plugin 'tailwind-scrollbar' {
-  nocompatible: true;
-  preferredstrategy: 'pseudoelements';
-}
 
 /* Imports */
 @import './icons.css';

package/src/lib/api/form.svelte.ts

@@ -0,0 +1,65 @@
+import { sleep } from 'radash';
+import { superForm, defaults, setError, setMessage, type SuperForm, type SuperValidated } from 'sveltekit-superforms';
+import { valibot } from 'sveltekit-superforms/adapters';
+import type { ApiRequestFunction, HTTPMethod, ApiEndpoints, ApiInput, ApiSuccessBody, ApiErrorBody } from 'ts-ag';
+import type * as v from 'valibot';
+
+export type ApiRequestForm<API extends ApiEndpoints> = <
+  Path extends API['path'],
+  Method extends Extract<API, { path: Path }>['method']
+>(
+  path: Path,
+  method: Method,
+  actions: {
+    onSuccess?: (
+      form: SuperValidated<ApiInput<API, Path, Method>>,
+      response: ApiSuccessBody<API, Path, Method>
+    ) => void;
+    onFail?: (form: SuperValidated<ApiInput<API, Path, Method>>, response: ApiErrorBody<API, Path, Method>) => void;
+  }
+) => SuperForm<ApiInput<API, Path, Method>>;
+
+export function createFormFunction<API extends ApiEndpoints>(
+  schemas: Record<API['path'], Record<HTTPMethod, v.GenericSchema>>,
+  request: ApiRequestFunction<API>
+): ApiRequestForm<API> {
+  return (path, method, actions) => {
+    const schema = schemas[path]?.[method];
+    if (schema === undefined) throw new Error('Invalid schema for form');
+
+    // if (typeof schema === 'function') {
+    //   schema = schema();
+    // }
+
+    return superForm<ApiInput<API, typeof path, typeof method>>(defaults(valibot(schema)), {
+      SPA: true,
+      resetForm: true,
+      delayMs: 300,
+      validators: valibot(schema),
+      async onUpdate({ form }) {
+        if (!form.valid) return;
+
+        const res = await request(path, method, form.data);
+
+        if (res.ok === false) {
+          const body = await res.json();
+
+          if (!body.field) {
+            setError(form, '', body.message);
+          } else {
+            setError(form, body.field.name, body.field.value, { status: res.status });
+          }
+          if (actions && actions.onFail) {
+            actions.onFail(form, body);
+          }
+        } else {
+          setMessage(form, 'Success');
+          if (actions && actions.onSuccess) {
+            const body = await res.json();
+            actions.onSuccess(form, body);
+          }
+        }
+      }
+    });
+  };
+}

package/src/lib/api/index.ts

@@ -0,0 +1,2 @@
+export * from './form.svelte.js';
+export * from './query.svelte.js';

package/src/lib/api/query.svelte.ts

@@ -0,0 +1,59 @@
+import type { ApiEndpoints, ApiInput, ApiRequestFunction, ApiSuccessBody, ApiErrorBody } from 'ts-ag';
+
+export class Query<
+  API extends ApiEndpoints,
+  Path extends API['path'],
+  Method extends Extract<API, { path: Path }>['method']
+> {
+  #path: Path;
+  #method: Method;
+  #request: ApiRequestFunction<API>;
+  #status = $state<'idle' | 'loading' | 'success' | 'error'>('idle');
+  #data = $state<ApiSuccessBody<API, Path, Method> | undefined>(undefined);
+  #errorData = $state<ApiErrorBody<API, Path, Method> | undefined>(undefined);
+
+  constructor(path: Path, method: Method, request: ApiRequestFunction<API>) {
+    this.#path = path;
+    this.#method = method;
+    this.#request = request;
+  }
+
+  async fetch(input: ApiInput<API, Path, Method>) {
+    const res = await this.#request(this.#path, this.#method, input);
+    if (res.ok === false) {
+      const body = await res.json();
+      this.#status = 'error';
+
+      // @ts-expect-error Generics not working for some reason
+      this.#errorData = body;
+      return res;
+    } else {
+      const body = await res.json();
+      this.#status = 'success';
+      this.#data = body;
+      return res;
+    }
+  }
+  get status() {
+    return this.#status;
+  }
+  get data() {
+    return this.#data;
+  }
+}
+
+/**
+ * Helper function to use once so that creating queries is easier.
+ *
+ * @example
+ * export const createQuery = createQueryFunction<YourApiEndpoints>(yourApiRequest);
+ *
+ */
+export function createQueryFunction<API extends ApiEndpoints>(request: ApiRequestFunction<API>) {
+  return <Path extends API['path'], Method extends Extract<API, { path: Path }>['method']>(
+    path: Path,
+    method: Method
+  ) => {
+    return new Query<API, Path, Method>(path, method, request);
+  };
+}

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

@@ -36,7 +36,8 @@
       duration: {
         fast: 'duration-150',
         default: 'duration-200',
-        slow: 'duration-500'
+        slow: 'duration-500',
+        vSlow: 'duration-1000'
       }
     },
     defaultVariants: {
@@ -101,7 +102,7 @@
         animationComplete = false;
       }
     },
-    { lazy: true }
+    { lazy: false }
   );
 
   // Set initial render to false when component mounts if disableInitialAnimation is true
@@ -119,7 +120,8 @@
   const durationMap = {
     fast: 150,
     default: 200,
-    slow: 500
+    slow: 500,
+    vSlow: 1000
   };
 
   // Map each animation type to the specific CSS properties that should be transitioned

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import emblaCarouselSvelte from 'embla-carousel-svelte';
+  import type { WithElementRef } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { getEmblaContext } from './context.js';
+  import { cn } from '$shadcn/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    symbol = undefined,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { symbol?: symbol } = $props();
+
+  const emblaCtx = getEmblaContext('<Carousel.Content/>', symbol);
+
+  // console.log(emblaCtx);
+</script>
+
+<!-- svelte-ignore event_directive_deprecated -->
+<div
+  class="overflow-hidden"
+  use:emblaCarouselSvelte={{
+    options: {
+      container: `[data-embla-container="${symbol?.description ?? 'default'}"]`,
+      loop: true,
+      slides: `[data-embla-slide="${symbol?.description ?? 'default'}"]`,
+      ...emblaCtx.options,
+      axis: emblaCtx.orientation === 'horizontal' ? 'x' : 'y'
+    },
+    plugins: emblaCtx.plugins
+  }}
+  on:emblaInit={emblaCtx.onInit}
+>
+  <div
+    bind:this={ref}
+    class={cn('flex', emblaCtx.orientation === 'horizontal' ? '-ml-4' : `-mt-4 flex-col`, className)}
+    data-embla-container={symbol?.description}
+    {...restProps}
+  >
+    {@render children?.()}
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { WithoutChildren } from 'bits-ui';
+  import { getEmblaContext } from './context.js';
+  import { cn } from '$shadcn/utils.js';
+  import { Button, type Props } from '$shadcn/button/index.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = 'outline',
+    size = 'icon',
+    symbol = undefined,
+    ...restProps
+  }: WithoutChildren<Props> & { symbol?: symbol } = $props();
+
+  const emblaCtx = getEmblaContext('<Carousel.Next/>', symbol);
+</script>
+
+<div class={cn('flex justify-center gap-1.5', className)}>
+  {#each Array(emblaCtx.scrollSnaps.length) as _, i (i)}
+    <div
+      class={cn(
+        'size-2 rounded-full transition-colors duration-300',
+        emblaCtx.selectedIndex === i ? `bg-foreground` : `bg-foreground/20`
+      )}
+    ></div>
+  {/each}
+</div>

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { WithElementRef } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { getEmblaContext } from './context.js';
+  import { cn } from '$shadcn/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    symbol = undefined,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { symbol?: symbol } = $props();
+
+  const emblaCtx = getEmblaContext('<Carousel.Item/>', symbol);
+</script>
+
+<div
+  bind:this={ref}
+  role="group"
+  aria-roledescription="slide"
+  class={cn('min-w-0 shrink-0 grow-0 basis-full', emblaCtx.orientation === 'horizontal' ? `pl-4` : `pt-4`, className)}
+  data-embla-slide={symbol?.description ?? 'default'}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,38 @@
+<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 '$shadcn/utils.js';
+  import { Button, type Props } from '$shadcn/button/index.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = 'outline',
+    size = 'icon',
+    symbol = undefined,
+    ...restProps
+  }: WithoutChildren<Props> & { symbol?: symbol } = $props();
+
+  const emblaCtx = getEmblaContext('<Carousel.Next/>', symbol);
+</script>
+
+<Button
+  {variant}
+  {size}
+  class={cn(
+    'absolute size-8 touch-manipulation rounded-full',
+    emblaCtx.orientation === 'horizontal'
+      ? 'top-1/2 -right-12 -translate-y-1/2'
+      : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+    className
+  )}
+  disabled={!emblaCtx.canScrollNext}
+  onclick={emblaCtx.scrollNext}
+  onkeydown={emblaCtx.handleKeyDown}
+  bind:ref
+  {...restProps}
+>
+  <ArrowRight class="size-4" />
+  <span class="sr-only">Next slide</span>
+</Button>

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

@@ -0,0 +1,38 @@
+<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 '$shadcn/utils.js';
+  import { Button, type Props } from '$shadcn/button/index.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = 'outline',
+    size = 'icon',
+    symbol = undefined,
+    ...restProps
+  }: WithoutChildren<Props> & { symbol?: symbol } = $props();
+
+  const emblaCtx = getEmblaContext('<Carousel.Previous/>', symbol);
+</script>
+
+<Button
+  {variant}
+  {size}
+  class={cn(
+    'absolute size-8 touch-manipulation rounded-full',
+    emblaCtx.orientation === 'horizontal'
+      ? 'top-1/2 -left-12 -translate-y-1/2'
+      : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+    className
+  )}
+  disabled={!emblaCtx.canScrollPrev}
+  onclick={emblaCtx.scrollPrev}
+  onkeydown={emblaCtx.handleKeyDown}
+  {...restProps}
+  bind:ref
+>
+  <ArrowLeft class="size-4" />
+  <span class="sr-only">Previous slide</span>
+</Button>

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

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from './context.js';
+  import { cn } from '$shadcn/utils.js';
+
+  let {
+    opts = {},
+    plugins = [],
+    setApi = () => {},
+    orientation = 'horizontal',
+    class: className,
+    children,
+    pointerdown,
+    pointerup,
+    symbol = undefined,
+    ...restProps
+  }: CarouselProps = $props();
+
+  let carouselState = $state<EmblaContext>({
+    api: undefined,
+    scrollPrev,
+    scrollNext,
+    orientation,
+    canScrollNext: false,
+    canScrollPrev: false,
+    handleKeyDown,
+    options: opts,
+    plugins,
+    onInit,
+    scrollSnaps: [],
+    selectedIndex: 0,
+    scrollTo
+  });
+
+  setEmblaContext(carouselState, symbol);
+
+  function scrollPrev() {
+    carouselState.api?.scrollPrev();
+  }
+  function scrollNext() {
+    carouselState.api?.scrollNext();
+  }
+  function scrollTo(index: number, jump?: boolean) {
+    carouselState.api?.scrollTo(index, jump);
+  }
+
+  function onSelect(api: CarouselAPI) {
+    if (!api) return;
+    carouselState.canScrollPrev = api.canScrollPrev();
+    carouselState.canScrollNext = api.canScrollNext();
+    carouselState.selectedIndex = api.selectedScrollSnap();
+  }
+
+  function reinit(api: CarouselAPI) {
+    onSelect(api);
+  }
+
+  $effect(() => {
+    if (carouselState.api) {
+      onSelect(carouselState.api);
+      carouselState.api.on('reInit', reinit);
+      carouselState.api.on('select', onSelect);
+    }
+  });
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      scrollPrev();
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      scrollNext();
+    }
+  }
+
+  $effect(() => {
+    setApi(carouselState.api);
+  });
+
+  function onInit(event: CustomEvent<CarouselAPI>) {
+    carouselState.api = event.detail;
+
+    carouselState.scrollSnaps = carouselState.api.scrollSnapList();
+    if (pointerdown) {
+      carouselState.api.on('pointerDown', pointerdown);
+    }
+    if (pointerup) {
+      carouselState.api.on('pointerUp', pointerup);
+    }
+  }
+
+  $effect(() => {
+    return () => {
+      carouselState.api?.off('select', onSelect);
+      carouselState.api?.off('reInit', reinit);
+      if (pointerdown) carouselState.api?.off('pointerDown', pointerdown);
+      if (pointerup) carouselState.api?.off('pointerUp', pointerup);
+    };
+  });
+</script>
+
+<div class={cn('relative', className)} role="region" aria-roledescription="carousel" {...restProps}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,59 @@
+import type { WithElementRef } from 'bits-ui';
+import type { EmblaCarouselSvelteType } from 'embla-carousel-svelte';
+import type emblaCarouselSvelte from 'embla-carousel-svelte';
+import { getContext, hasContext, setContext } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type CarouselAPI =
+  NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['on:emblaInit']> extends (
+    evt: CustomEvent<infer CarouselAPI>
+  ) => void
+    ? CarouselAPI
+    : never;
+
+type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
+
+export type CarouselOptions = EmblaCarouselConfig['options'];
+export type CarouselPlugins = EmblaCarouselConfig['plugins'];
+
+////
+
+export type CarouselProps = {
+  symbol?: symbol;
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugins;
+  setApi?: (api: CarouselAPI | undefined) => void;
+  pointerdown?: (api: CarouselAPI) => void;
+  pointerup?: (api: CarouselAPI) => void;
+  orientation?: 'horizontal' | 'vertical';
+} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+export type EmblaContext = {
+  api: CarouselAPI | undefined;
+  orientation: 'horizontal' | 'vertical';
+  scrollNext: () => void;
+  scrollPrev: () => void;
+  canScrollNext: boolean;
+  canScrollPrev: boolean;
+  handleKeyDown: (e: KeyboardEvent) => void;
+  options: CarouselOptions;
+  plugins: CarouselPlugins;
+  onInit: (e: CustomEvent<CarouselAPI>) => void;
+  scrollTo: (index: number, jump?: boolean) => void;
+  scrollSnaps: number[];
+  selectedIndex: number;
+};
+
+const EMBLA_CAROUSEL_CONTEXT = Symbol('EMBLA_CAROUSEL_CONTEXT');
+
+export function setEmblaContext(config: EmblaContext, symbol: symbol = EMBLA_CAROUSEL_CONTEXT): EmblaContext {
+  setContext(symbol, config);
+  return config;
+}
+
+export function getEmblaContext(name = 'This component', symbol: symbol = EMBLA_CAROUSEL_CONTEXT): EmblaContext {
+  if (!hasContext(symbol)) {
+    throw new Error(`${name} must be used within a <Carousel.Root> component`);
+  }
+  return getContext<ReturnType<typeof setEmblaContext>>(symbol);
+}

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

@@ -0,0 +1,22 @@
+import Root from './carousel.svelte';
+import Content from './carousel-content.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';
+
+export {
+  Root,
+  Content,
+  Item,
+  Previous,
+  Next,
+  Dots,
+  //
+  Root as Carousel,
+  Content as CarouselContent,
+  Item as CarouselItem,
+  Previous as CarouselPrevious,
+  Next as CarouselNext,
+  Dots as CarouselDots
+};