ui-ingredients 0.0.6 → 0.0.7

package/dist/toast/description.svelte

@@ -1,16 +1,25 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useToastContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useToastContext();
-let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
-</script>
-
-<div {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {context.description}
-  {/if}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+
+  export interface ToastDescriptionProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import {useToastContext} from './context.svelte.js';
+
+  let {children, ...props}: ToastDescriptionProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getDescriptionProps()));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {context.description}
+  {/if}
+</div>

package/dist/toast/root.svelte

@@ -1,16 +1,25 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useToastContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useToastContext();
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-</script>
-
-<div {...attrs}>
-  <div {...context.getGhostBeforeProps()}></div>
-
-  {@render children?.()}
-
-  <div {...context.getGhostAfterProps()}></div>
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+
+  export interface ToastProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import {useToastContext} from './context.svelte.js';
+
+  let {children, ...props}: ToastProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+</script>
+
+<div {...attrs}>
+  <div {...context.getGhostBeforeProps()}></div>
+
+  {@render children?.()}
+
+  <div {...context.getGhostAfterProps()}></div>
+</div>

package/dist/toast/title.svelte

@@ -1,16 +1,25 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useToastContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useToastContext();
-let attrs = $derived(mergeProps(props, context.getTitleProps()));
-</script>
-
-<div {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {context.title}
-  {/if}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+
+  export interface ToastTitleProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import {useToastContext} from './context.svelte.js';
+
+  let {children, ...props}: ToastTitleProps = $props();
+
+  let context = useToastContext();
+
+  let attrs = $derived(mergeProps(props, context.getTitleProps()));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {context.title}
+  {/if}
+</div>

package/dist/toast/toaster.svelte

@@ -1,25 +1,40 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { Portal } from "../portal/index.js";
-import { mergeProps, normalizeProps, useMachine } from "@zag-js/svelte";
-import * as toast from "@zag-js/toast";
-import ToastActor from "./actor.svelte";
-let { toaster, children, ...props } = $props();
-let [state, send] = useMachine(toaster.machine);
-let placement = $derived(state.context.placement);
-let api = $derived(toast.group.connect(state, send, normalizeProps));
-let toasts = $derived(api.getToastsByPlacement(placement));
-let attrs = $derived(mergeProps(props, api.getGroupProps({ placement })));
-</script>
-
-<Portal>
-  <div {...attrs}>
-    {#each toasts as toast (toast.id)}
-      <ToastActor actor={toast}>
-        {#snippet children$(ctx)}
-          {@render children(ctx)}
-        {/snippet}
-      </ToastActor>
-    {/each}
-  </div>
-</Portal>
+<script lang="ts" context="module">
+  import type {WithoutChildren} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {CreateToastContextReturn} from './context.svelte.js';
+  import type {CreateToasterReturn} from './create-toaster.svelte.js';
+
+  export interface ToasterProps extends WithoutChildren<SvelteHTMLElements['div']> {
+    toaster: CreateToasterReturn;
+    children: Snippet<[CreateToastContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {Portal} from '../portal/index.js';
+  import {mergeProps, normalizeProps, useMachine} from '@zag-js/svelte';
+  import * as toast from '@zag-js/toast';
+  import ToastActor from './actor.svelte';
+
+  let {toaster, children, ...props}: ToasterProps = $props();
+
+  let [state, send] = useMachine(toaster.machine);
+
+  let placement = $derived(state.context.placement);
+  let api = $derived(toast.group.connect(state, send, normalizeProps));
+  let toasts = $derived(api.getToastsByPlacement(placement));
+  let attrs = $derived(mergeProps(props, api.getGroupProps({placement})));
+</script>
+
+<Portal>
+  <div {...attrs}>
+    {#each toasts as toast (toast.id)}
+      <ToastActor actor={toast}>
+        {#snippet children$(ctx)}
+          {@render children(ctx)}
+        {/snippet}
+      </ToastActor>
+    {/each}
+  </div>
+</Portal>

package/dist/toggle-group/item.svelte

@@ -1,12 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useToggleGroupContext } from "./context.svelte.js";
-let { value, disabled, children, ...props } = $props();
-let context = useToggleGroupContext();
-let attrs = $derived(mergeProps(props, context.getItemProps({ value, disabled })));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface ToggleGroupItemProps extends Assign<SvelteHTMLElements['button'], ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import type {ItemProps} from '@zag-js/toggle-group';
+  import {useToggleGroupContext} from './context.svelte.js';
+
+  let {value, disabled, children, ...props}: ToggleGroupItemProps = $props();
+
+  let context = useToggleGroupContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemProps({value, disabled})));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/toggle-group/root.svelte

@@ -1,40 +1,61 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createToggleGroupContext, setToggleGroupContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  value,
-  disabled,
-  multiple,
-  loopFocus,
-  rovingFocus,
-  orientation,
-  onValueChange,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createToggleGroupContext({
-  id,
-  ids,
-  dir,
-  value: $state.snapshot(value),
-  disabled,
-  multiple,
-  loopFocus,
-  rovingFocus,
-  orientation,
-  onValueChange,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setToggleGroupContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {
+    CreateToggleGroupContextProps,
+    CreateToggleGroupContextReturn,
+  } from './context.svelte.js';
+
+  export interface ToggleGroupProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateToggleGroupContextProps>
+    > {
+    children?: Snippet<[CreateToggleGroupContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createToggleGroupContext, setToggleGroupContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    value,
+    disabled,
+    multiple,
+    loopFocus,
+    rovingFocus,
+    orientation,
+    onValueChange,
+    getRootNode,
+    children,
+    ...props
+  }: ToggleGroupProps = $props();
+
+  let context = createToggleGroupContext({
+    id,
+    ids,
+    dir,
+    value: $state.snapshot(value),
+    disabled,
+    multiple,
+    loopFocus,
+    rovingFocus,
+    orientation,
+    onValueChange,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setToggleGroupContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/tooltip/arrow-tip.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useTooltipContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useTooltipContext();
-let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface TooltipArrowTipProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTooltipContext} from './context.svelte.js';
+
+  let {children, ...props}: TooltipArrowTipProps = $props();
+
+  let context = useTooltipContext();
+
+  let attrs = $derived(mergeProps(props, context.getArrowTipProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/tooltip/arrow.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useTooltipContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useTooltipContext();
-let attrs = $derived(mergeProps(props, context.getArrowProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface TooltipArrowProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTooltipContext} from './context.svelte.js';
+
+  let {children, ...props}: TooltipArrowProps = $props();
+
+  let context = useTooltipContext();
+
+  let attrs = $derived(mergeProps(props, context.getArrowProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/tooltip/content.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useTooltipContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useTooltipContext();
-let attrs = $derived(mergeProps(props, context.getContentProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface TooltipContentProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTooltipContext} from './context.svelte.js';
+
+  let {children, ...props}: TooltipContentProps = $props();
+
+  let context = useTooltipContext();
+
+  let attrs = $derived(mergeProps(props, context.getContentProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/tooltip/positioner.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useTooltipContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useTooltipContext();
-let attrs = $derived(mergeProps(props, context.getPositionerProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface TooltipPositionerProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTooltipContext} from './context.svelte.js';
+
+  let {children, ...props}: TooltipPositionerProps = $props();
+
+  let context = useTooltipContext();
+
+  let attrs = $derived(mergeProps(props, context.getPositionerProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/tooltip/root.svelte

@@ -1,10 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { createTooltipContext, setTooltipContext } from "./context.svelte.js";
-let { id = uuid(), children, ...props } = $props();
-let context = createTooltipContext({ id, ...props });
-setTooltipContext(context);
-</script>
-
-{@render children?.(context)}
+<script lang="ts" context="module">
+  import type {OptionalId} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {CreateTooltipContextProps, CreateTooltipContextReturn} from './context.svelte.js';
+
+  export interface TooltipProps extends OptionalId<CreateTooltipContextProps> {
+    children?: Snippet<[CreateTooltipContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {createTooltipContext, setTooltipContext} from './context.svelte.js';
+
+  let {id = uuid(), children, ...props}: TooltipProps = $props();
+
+  let context = createTooltipContext({id, ...props});
+
+  setTooltipContext(context);
+</script>
+
+{@render children?.(context)}

package/dist/tooltip/trigger.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useTooltipContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useTooltipContext();
-let attrs = $derived(mergeProps(props, context.getTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface TooltipTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useTooltipContext} from './context.svelte.js';
+
+  let {children, ...props}: TooltipTriggerProps = $props();
+
+  let context = useTooltipContext();
+
+  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,8 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/calvo-jp/ui-ingredients.git"
+    "url": "git+https://github.com/calvo-jp/ui-ingredients.git",
+    "directory": "packages/ui-ingredients"
   },
   "bugs": {
     "url": "https://github.com/calvo-jp/ui-ingredients/issues",
@@ -81,8 +82,6 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "vitest",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write .",
     "release": "release-it"
   },
   "dependencies": {
@@ -125,29 +124,22 @@
     "nanoid": "5.0.7"
   },
   "peerDependencies": {
-    "svelte": ">=5.0.0-next.200"
+    "svelte": "^5.0.0-next.1"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "5.4.3",
-    "@sveltejs/kit": "2.5.22",
+    "@sveltejs/kit": "2.5.24",
     "@sveltejs/package": "2.3.4",
-    "@sveltejs/vite-plugin-svelte": "3.1.1",
-    "@types/eslint": "9.6.0",
+    "@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
     "autoprefixer": "10.4.20",
-    "eslint": "9.9.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-svelte": "2.43.0",
     "globals": "15.9.0",
     "postcss": "8.4.41",
-    "prettier": "3.3.3",
-    "prettier-plugin-svelte": "3.2.6",
     "publint": "0.2.10",
     "release-it": "17.6.0",
     "svelte": "5.0.0-next.225",
     "svelte-check": "3.8.5",
     "tailwindcss": "3.4.10",
     "typescript": "5.5.4",
-    "typescript-eslint": "8.1.0",
     "vite": "5.4.1",
     "vitest": "2.0.5"
   },