@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/tree-view/use-tree-view.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Accessor, Optional } from '../../types';
+import { type PropTypes } from '@zag-js/svelte';
+import * as treeView from '@zag-js/tree-view';
+import { type MaybeFunction } from '@zag-js/utils';
+import type { TreeNode } from '../collection';
+export interface UseTreeViewProps<T extends TreeNode> extends Optional<Omit<treeView.Props<T>, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseTreeViewReturn<T extends TreeNode> extends Accessor<treeView.Api<PropTypes, T>> {
+}
+export declare const useTreeView: <T extends TreeNode>(props: MaybeFunction<UseTreeViewProps<T>>) => UseTreeViewReturn<T>;

package/dist/components/tree-view/use-tree-view.svelte.js

@@ -0,0 +1,21 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import * as treeView from '@zag-js/tree-view';
+import { ensureProps, runIfFn } from '@zag-js/utils';
+export const useTreeView = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        ensureProps(resolvedProps, ['id']);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(treeView.machine, () => machineProps);
+    const api = $derived(treeView.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/providers/environment/environment-provider.svelte

@@ -1,13 +1,14 @@
 <script module lang="ts">
   import { getDocument, getWindow } from '@zag-js/dom-query'
+  import type { MaybeFunction } from '@zag-js/utils'
   import type { Snippet } from 'svelte'
-  import type { RootNode } from './use-environment-context'
+  import type { RootNode, UseEnvironmentContext } from './use-environment-context'
 
   export interface EnvironmentProviderProps {
     /**
      * The root node to use for the environment.
      */
-    value?: RootNode | (() => RootNode)
+    value?: MaybeFunction<RootNode>
     /**
      * The children to render.
      */
@@ -17,7 +18,6 @@
 
 <script lang="ts">
   import { runIfFn } from '../../utils/run-if-fn'
-  import { reflect } from '@zag-js/svelte'
   import { EnvironmentContextProvider } from './use-environment-context'
 
   const { value, children }: EnvironmentProviderProps = $props()
@@ -25,13 +25,13 @@
 
   const getRootNode = () => runIfFn(value) ?? spanRef?.ownerDocument ?? document
 
-  const environment = $derived({
+  const environment = $derived<ReturnType<UseEnvironmentContext>>({
     getRootNode,
     getDocument: () => getDocument(getRootNode()),
     getWindow: () => getWindow(getRootNode()),
   })
 
-  EnvironmentContextProvider(reflect(() => environment))
+  EnvironmentContextProvider(() => environment)
 </script>
 
 {@render children?.()}

package/dist/providers/environment/environment-provider.svelte.d.ts

@@ -1,10 +1,11 @@
+import type { MaybeFunction } from '@zag-js/utils';
 import type { Snippet } from 'svelte';
 import type { RootNode } from './use-environment-context';
 export interface EnvironmentProviderProps {
     /**
      * The root node to use for the environment.
      */
-    value?: RootNode | (() => RootNode);
+    value?: MaybeFunction<RootNode>;
     /**
      * The children to render.
      */

package/dist/providers/environment/use-environment-context.d.ts

@@ -1,5 +1,6 @@
+import type { Accessor } from '../../types';
 export type RootNode = ShadowRoot | Document | Node;
-export interface UseEnvironmentContext {
+export interface UseEnvironmentContext extends Accessor<{
     /**
      * The root node of the application.
      * This is used to determine the window and document objects.
@@ -16,5 +17,6 @@ export interface UseEnvironmentContext {
      * @default window
      */
     getWindow(): Window & typeof globalThis;
+}> {
 }
 export declare const EnvironmentContextProvider: (opts: UseEnvironmentContext) => void, useEnvironmentContext: (fallback?: UseEnvironmentContext | undefined) => UseEnvironmentContext;

package/dist/providers/environment/use-environment-context.js

@@ -1,9 +1,10 @@
 import { createContext } from '../../utils/create-context';
 export const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
-    key: 'EnvironmentContext',
-    defaultValue: {
+    name: 'EnvironmentContext',
+    strict: false,
+    defaultValue: () => ({
         getRootNode: () => document,
         getDocument: () => document,
         getWindow: () => window,
-    },
+    }),
 });

package/dist/providers/index.d.ts

@@ -1 +1,2 @@
 export * from './locale';
+export * from './environment';

package/dist/providers/index.js

@@ -1 +1,2 @@
 export * from './locale';
+export * from './environment';

package/dist/providers/locale/index.d.ts

@@ -1,2 +1,3 @@
 export { default as LocaleProvider, type LocaleProviderProps } from './locale-provider.svelte';
+export { useFilter, type UseFilterProps, type UseFilterReturn } from './use-filter.svelte';
 export { useLocaleContext, type UseLocaleContext } from './use-locale-context';

package/dist/providers/locale/index.js

@@ -1,2 +1,3 @@
 export { default as LocaleProvider } from './locale-provider.svelte';
+export { useFilter } from './use-filter.svelte';
 export { useLocaleContext } from './use-locale-context';

package/dist/providers/locale/locale-provider.svelte

@@ -21,12 +21,12 @@
 
   let { locale, children }: LocaleProviderProps = $props()
 
-  const context = $state<UseLocaleContext>({
+  const context = $derived<ReturnType<UseLocaleContext>>({
     locale,
     dir: isRTL(locale) ? 'rtl' : 'ltr',
   })
 
-  LocaleContextProvider(context)
+  LocaleContextProvider(() => context)
 </script>
 
 {@render children?.()}

package/dist/providers/locale/use-filter.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Accessor } from '../../types';
+import { type FilterOptions, type FilterReturn } from '@zag-js/i18n-utils';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseFilterProps extends FilterOptions {
+}
+export declare function useFilter(inProps: MaybeFunction<UseFilterProps>): UseFilterReturn;
+export interface UseFilterReturn extends Accessor<FilterReturn> {
+}

package/dist/providers/locale/use-filter.svelte.js

@@ -0,0 +1,10 @@
+import { createFilter } from '@zag-js/i18n-utils';
+import { runIfFn } from '@zag-js/utils';
+import { useLocaleContext } from './use-locale-context';
+export function useFilter(inProps) {
+    const props = $derived(runIfFn(inProps));
+    const env = useLocaleContext();
+    const locale = $derived(props.locale ?? env().locale);
+    const filter = $derived(createFilter({ ...props, locale }));
+    return () => filter;
+}

package/dist/providers/locale/use-locale-context.d.ts

@@ -1,4 +1,5 @@
+import type { Accessor } from '../../types';
 import type { Locale } from '@zag-js/i18n-utils';
-export interface UseLocaleContext extends Locale {
+export interface UseLocaleContext extends Accessor<Locale> {
 }
 export declare const LocaleContextProvider: (opts: UseLocaleContext) => void, useLocaleContext: (fallback?: UseLocaleContext | undefined) => UseLocaleContext;

package/dist/providers/locale/use-locale-context.js

@@ -1,5 +1,9 @@
 import { createContext } from '../../utils/create-context';
 export const [LocaleContextProvider, useLocaleContext] = createContext({
-    key: 'LocaleContext',
-    defaultValue: { dir: 'ltr', locale: 'en-US' },
+    name: 'LocaleContext',
+    strict: false,
+    defaultValue: () => ({
+        dir: 'ltr',
+        locale: 'en-US',
+    }),
 });

package/dist/types.d.ts

@@ -8,7 +8,9 @@ export type HTMLTag = keyof SvelteHTMLElements;
 export type PropsFn<T extends HTMLTag> = (props?: HTMLProps<T>) => HTMLAttributes<HTMLElement>;
 export type HTMLProps<T extends HTMLTag> = SvelteHTMLElements[T];
 export type PolymorphicProps<T extends HTMLTag> = {
-    asChild?: boolean;
     children?: Snippet;
-    render?: Snippet<[PropsFn<T>]>;
+    asChild?: Snippet<[PropsFn<T>]>;
 };
+export interface RefAttribute<T extends Element = Element> {
+    ref?: T | null | undefined;
+}

package/dist/utils/create-context.d.ts

@@ -1,6 +1,10 @@
 interface CreateContextOptions<T> {
-    key?: string;
+    name?: string;
     defaultValue?: T;
+    strict?: boolean;
+    hookName?: string;
+    providerName?: string;
+    errorMessage?: string;
 }
 type CreateContextReturn<T> = [(opts: T) => void, (fallback?: T) => T, symbol];
 export declare const createContext: <T>(options: CreateContextOptions<T>) => CreateContextReturn<T>;

package/dist/utils/create-context.js

@@ -1,8 +1,16 @@
 import { getContext, hasContext, setContext } from 'svelte';
+function getErrorMessage(hook, provider) {
+    return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
+}
 export const createContext = (options) => {
-    const { key } = options;
-    const contextId = Symbol(key);
+    const { name, strict = true, hookName = 'useContext', providerName = 'Provider', errorMessage, defaultValue, } = options;
+    const contextId = Symbol(name);
     const provider = (value) => setContext(contextId, value);
-    const consumer = () => (hasContext(contextId) ? getContext(contextId) : options.defaultValue);
+    const consumer = () => {
+        const exists = hasContext(contextId);
+        if (strict && !exists)
+            throw new Error(errorMessage ?? getErrorMessage(hookName, providerName));
+        return exists ? getContext(contextId) : defaultValue;
+    };
     return [provider, consumer, contextId];
 };

package/dist/utils/render-strategy.d.ts

@@ -1,3 +1,4 @@
+import type { Accessor } from '../types';
 export interface RenderStrategyProps {
     /**
      * Whether to enable lazy mounting
@@ -10,5 +11,7 @@ export interface RenderStrategyProps {
      */
     unmountOnExit?: boolean;
 }
-export declare const RenderStrategyProvider: (opts: RenderStrategyProps) => void, useRenderStrategyContext: (fallback?: RenderStrategyProps | undefined) => RenderStrategyProps;
+export interface RenderStrategyContext extends Accessor<RenderStrategyProps> {
+}
+export declare const RenderStrategyPropsProvider: (opts: RenderStrategyContext) => void, useRenderStrategyPropsContext: (fallback?: RenderStrategyContext | undefined) => RenderStrategyContext;
 export declare const splitRenderStrategyProps: <T extends RenderStrategyProps>(props: T) => [RenderStrategyProps, Omit<T, "lazyMount" | "unmountOnExit">];

package/dist/utils/render-strategy.js

@@ -1,6 +1,9 @@
 import { createContext } from './create-context';
 import { createSplitProps } from './create-split-props';
-export const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
-    key: 'RenderStrategyContext',
+export const [RenderStrategyPropsProvider, useRenderStrategyPropsContext] = createContext({
+    name: 'RenderStrategyContext',
+    hookName: 'useRenderStrategyContext',
+    providerName: '<RenderStrategyPropsProvider />',
 });
-export const splitRenderStrategyProps = (props) => createSplitProps()(props, ['lazyMount', 'unmountOnExit']);
+const splitFn = createSplitProps();
+export const splitRenderStrategyProps = (props) => splitFn(props, ['lazyMount', 'unmountOnExit']);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/svelte",
   "type": "module",
-  "version": "0.4.0",
+  "version": "5.0.0-0",
   "description": "A collection of unstyled, accessible UI components for Svelte",
   "keywords": [
     "avatar",
@@ -48,7 +48,8 @@
     }
   },
   "scripts": {
-    "build": "svelte-kit sync && svelte-package",
+    "build": "svelte-kit sync && svelte-package --tsconfig ./tsconfig.build.json",
+    "start": "svelte-kit sync && vite dev",
     "dev": "storybook dev -p 6006",
     "storybook": "storybook dev -p 6006",
     "test": "vitest",
@@ -56,10 +57,12 @@
     "test:ci": "vitest --run",
     "typecheck": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "prepack": "clean-package",
-    "postpack": "clean-package restore"
+    "postpack": "clean-package restore",
+    "release-it": "release-it --config ../../release-it.json"
   },
   "clean-package": {
     "replace": {
+      "svelte": "./dist/index.js",
       "exports.\\..svelte": "./dist/index.js",
       "exports.\\..types": "./dist/index.d.ts",
       "exports.\\./anatomy.svelte": "./dist/components/anatomy.js",
@@ -77,36 +80,85 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@zag-js/anatomy": "1.9.2",
-    "@zag-js/avatar": "1.9.2",
-    "@zag-js/core": "1.9.2",
-    "@zag-js/toggle": "1.9.2",
-    "@zag-js/collection": "1.9.2",
-    "@zag-js/dom-query": "1.9.2",
-    "@zag-js/i18n-utils": "1.9.2",
-    "@zag-js/svelte": "1.9.2"
+    "@internationalized/date": "3.8.2",
+    "@zag-js/accordion": "1.15.7",
+    "@zag-js/angle-slider": "1.15.7",
+    "@zag-js/anatomy": "1.15.7",
+    "@zag-js/auto-resize": "1.15.7",
+    "@zag-js/avatar": "1.15.7",
+    "@zag-js/carousel": "1.15.7",
+    "@zag-js/checkbox": "1.15.7",
+    "@zag-js/clipboard": "1.15.7",
+    "@zag-js/collapsible": "1.15.7",
+    "@zag-js/collection": "1.15.7",
+    "@zag-js/color-picker": "1.15.7",
+    "@zag-js/color-utils": "1.15.7",
+    "@zag-js/combobox": "1.15.7",
+    "@zag-js/core": "1.15.7",
+    "@zag-js/date-picker": "1.15.7",
+    "@zag-js/date-utils": "1.15.7",
+    "@zag-js/dialog": "1.15.7",
+    "@zag-js/dom-query": "1.15.7",
+    "@zag-js/editable": "1.15.7",
+    "@zag-js/file-upload": "1.15.7",
+    "@zag-js/file-utils": "1.15.7",
+    "@zag-js/focus-trap": "1.15.7",
+    "@zag-js/floating-panel": "1.15.7",
+    "@zag-js/highlight-word": "1.15.7",
+    "@zag-js/hover-card": "1.15.7",
+    "@zag-js/i18n-utils": "1.15.7",
+    "@zag-js/listbox": "1.15.7",
+    "@zag-js/menu": "1.15.7",
+    "@zag-js/number-input": "1.15.7",
+    "@zag-js/pagination": "1.15.7",
+    "@zag-js/password-input": "1.15.7",
+    "@zag-js/pin-input": "1.15.7",
+    "@zag-js/popover": "1.15.7",
+    "@zag-js/presence": "1.15.7",
+    "@zag-js/progress": "1.15.7",
+    "@zag-js/qr-code": "1.15.7",
+    "@zag-js/radio-group": "1.15.7",
+    "@zag-js/rating-group": "1.15.7",
+    "@zag-js/svelte": "1.15.7",
+    "@zag-js/select": "1.15.7",
+    "@zag-js/signature-pad": "1.15.7",
+    "@zag-js/slider": "1.15.7",
+    "@zag-js/splitter": "1.15.7",
+    "@zag-js/steps": "1.15.7",
+    "@zag-js/switch": "1.15.7",
+    "@zag-js/tabs": "1.15.7",
+    "@zag-js/tags-input": "1.15.7",
+    "@zag-js/time-picker": "1.15.7",
+    "@zag-js/timer": "1.15.7",
+    "@zag-js/toast": "1.15.7",
+    "@zag-js/toggle": "1.15.7",
+    "@zag-js/toggle-group": "1.15.7",
+    "@zag-js/tooltip": "1.15.7",
+    "@zag-js/tour": "1.15.7",
+    "@zag-js/tree-view": "1.15.7",
+    "@zag-js/types": "1.15.7",
+    "@zag-js/utils": "1.15.7"
   },
   "devDependencies": {
-    "@ark-ui/shared": "workspace:*",
-    "@storybook/addon-a11y": "8.6.12",
-    "@storybook/addon-essentials": "8.6.12",
-    "@storybook/sveltekit": "8.6.12",
-    "@sveltejs/adapter-auto": "6.0.0",
-    "@sveltejs/kit": "2.20.5",
-    "@sveltejs/package": "2.3.10",
-    "@sveltejs/vite-plugin-svelte": "5.0.3",
+    "@storybook/addon-a11y": "9.0.10",
+    "@storybook/sveltekit": "9.0.10",
+    "@sveltejs/adapter-auto": "6.0.1",
+    "@sveltejs/kit": "2.21.5",
+    "@sveltejs/package": "2.3.11",
+    "@sveltejs/vite-plugin-svelte": "5.1.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/svelte": "5.2.7",
+    "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "14.6.1",
-    "@vitest/coverage-v8": "3.1.1",
+    "@vitest/coverage-v8": "3.2.3",
     "clean-package": "2.2.0",
-    "storybook": "8.6.12",
-    "svelte": "5.25.9",
-    "svelte-check": "4.1.5",
+    "lucide-svelte": "0.515.0",
+    "storybook": "9.0.10",
+    "svelte": "5.34.3",
+    "svelte-check": "4.2.1",
     "tslib": "2.8.1",
     "typescript": "5.8.3",
-    "vite": "6.2.5",
-    "vitest": "3.1.1"
+    "vite": "6.3.5",
+    "vitest": "3.2.3"
   },
   "peerDependencies": {
     "svelte": ">=5.20.0"

package/dist/components/collection.d.ts

@@ -1,6 +0,0 @@
-import { type CollectionItem, type CollectionOptions, type FilePathTreeNode, ListCollection, TreeCollection, type TreeCollectionOptions, type TreeNode } from '@zag-js/collection';
-export type { CollectionItem, ListCollection } from '@zag-js/collection';
-export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
-export type { TreeCollection, TreeNode } from '@zag-js/collection';
-export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
-export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;

package/dist/components/collection.js

@@ -1,4 +0,0 @@
-import { ListCollection, TreeCollection, filePathToTree, } from '@zag-js/collection';
-export const createListCollection = (options) => new ListCollection(options);
-export const createTreeCollection = (options) => new TreeCollection(options);
-export const createFileTreeCollection = (paths) => filePathToTree(paths);