@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/toast/toaster.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { Accessor, Assign, HTMLProps } from '../../types.js'
+  import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte'
+  import * as toast from '@zag-js/toast'
+  import type { Snippet } from 'svelte'
+  import { useEnvironmentContext, useLocaleContext } from '../../providers/index.js'
+  import { Ark } from '../factory/index.js'
+  import type { CreateToasterReturn } from './create-toaster.js'
+  import ToasterItem from './toaster-item.svelte'
+
+  export interface ToasterBaseProps extends Omit<toast.GroupProps, 'store' | 'id'> {
+    /**
+     * The toaster instance.
+     */
+    toaster: CreateToasterReturn
+    /**
+     * The children of the toaster.
+     */
+    children: Snippet<[Accessor<toast.Options<Snippet>>]>
+  }
+
+  export interface ToasterProps extends Assign<HTMLProps<'div'>, ToasterBaseProps> {}
+
+  const id = $props.id()
+  let { toaster, children, ...otherProps }: ToasterProps = $props()
+
+  const locale = useLocaleContext()
+  const env = useEnvironmentContext()
+
+  const machineProps = $derived.by(() => ({
+    store: toaster,
+    id,
+    dir: locale().dir,
+    getRootNode: env().getRootNode,
+  }))
+
+  const service = useMachine(toast.group.machine, () => machineProps)
+
+  const api = $derived(toast.group.connect(service, normalizeProps))
+  const toasts = $derived(api.getToasts())
+
+  const mergedProps = $derived(mergeProps(api.getGroupProps(), otherProps))
+</script>
+
+<Ark as="div" {...mergedProps}>
+  {#each toasts as toast, index (toast.id)}
+    {@const toastFn = () => toast}
+    <ToasterItem value={toastFn} parent={service} {index}>
+      {@render children(toastFn)}
+    </ToasterItem>
+  {/each}
+</Ark>

package/dist/components/toast/toaster.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Accessor, Assign, HTMLProps } from '../../types.js';
+import * as toast from '@zag-js/toast';
+import type { Snippet } from 'svelte';
+import type { CreateToasterReturn } from './create-toaster.js';
+export interface ToasterBaseProps extends Omit<toast.GroupProps, 'store' | 'id'> {
+    /**
+     * The toaster instance.
+     */
+    toaster: CreateToasterReturn;
+    /**
+     * The children of the toaster.
+     */
+    children: Snippet<[Accessor<toast.Options<Snippet>>]>;
+}
+export interface ToasterProps extends Assign<HTMLProps<'div'>, ToasterBaseProps> {
+}
+declare const Toaster: import("svelte").Component<ToasterProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/components/toast/use-toast-context.d.ts

@@ -0,0 +1,7 @@
+import type { Accessor } from '../../types';
+import type { PropTypes } from '@zag-js/svelte';
+import type * as toast from '@zag-js/toast';
+import type { Snippet } from 'svelte';
+export interface UseToastContext extends Accessor<toast.Api<PropTypes, Snippet>> {
+}
+export declare const ToastProvider: (opts: UseToastContext) => void, useToastContext: (fallback?: UseToastContext | undefined) => UseToastContext;

package/dist/components/toast/use-toast-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [ToastProvider, useToastContext] = createContext({
+    name: 'ToastContext',
+    hookName: 'useToastContext',
+    providerName: '<ToastProvider />',
+});

package/dist/components/toggle/index.d.ts

@@ -0,0 +1,7 @@
+export { default as ToggleContext, type ToggleContextProps } from './toggle-context.svelte';
+export { default as ToggleIndicator, type ToggleIndicatorProps } from './toggle-indicator.svelte';
+export { default as ToggleRoot, type ToggleRootBaseProps, type ToggleRootProps } from './toggle-root.svelte';
+export { toggleAnatomy } from './toggle.anatomy';
+export { useToggle, type UseToggleProps, type UseToggleReturn } from './use-toggle.svelte';
+export { useToggleContext, type UseToggleContext } from './use-toggle-context';
+export * as Toggle from './toggle';

package/dist/components/toggle/index.js

@@ -0,0 +1,7 @@
+export { default as ToggleContext } from './toggle-context.svelte';
+export { default as ToggleIndicator } from './toggle-indicator.svelte';
+export { default as ToggleRoot } from './toggle-root.svelte';
+export { toggleAnatomy } from './toggle.anatomy';
+export { useToggle } from './use-toggle.svelte';
+export { useToggleContext } from './use-toggle-context';
+export * as Toggle from './toggle';

package/dist/components/toggle/toggle-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseToggleContext } from './use-toggle-context'
+
+  export interface ToggleContextProps {
+    render: Snippet<[UseToggleContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useToggleContext } from './use-toggle-context'
+
+  const { render }: ToggleContextProps = $props()
+
+  const context = useToggleContext()
+</script>
+
+{@render render(context)}

package/dist/components/toggle/toggle-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseToggleContext } from './use-toggle-context';
+export interface ToggleContextProps {
+    render: Snippet<[UseToggleContext]>;
+}
+declare const ToggleContext: import("svelte").Component<ToggleContextProps, {}, "">;
+type ToggleContext = ReturnType<typeof ToggleContext>;
+export default ToggleContext;

package/dist/components/toggle/toggle-indicator.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { Snippet } from 'svelte'
+
+  export interface ToggleIndicatorBaseProps extends PolymorphicProps<'div'> {
+    /**
+     * The fallback content to render when the toggle is not pressed.
+     */
+    fallback?: Snippet
+  }
+
+  export interface ToggleIndicatorProps extends Assign<HTMLProps<'div'>, ToggleIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useToggleContext } from './use-toggle-context'
+
+  let { children, fallback, ...props }: ToggleIndicatorProps = $props()
+
+  const toggle = useToggleContext()
+  const mergedProps = $derived(mergeProps(toggle().getIndicatorProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps}>
+  {#if toggle().pressed}
+    {@render children?.()}
+  {:else if fallback}
+    {@render fallback()}
+  {/if}
+</Ark>

package/dist/components/toggle/toggle-indicator.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { Snippet } from 'svelte';
+export interface ToggleIndicatorBaseProps extends PolymorphicProps<'div'> {
+    /**
+     * The fallback content to render when the toggle is not pressed.
+     */
+    fallback?: Snippet;
+}
+export interface ToggleIndicatorProps extends Assign<HTMLProps<'div'>, ToggleIndicatorBaseProps> {
+}
+declare const ToggleIndicator: import("svelte").Component<ToggleIndicatorProps, {}, "">;
+type ToggleIndicator = ReturnType<typeof ToggleIndicator>;
+export default ToggleIndicator;

package/dist/components/toggle/toggle-root.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseToggleProps } from './use-toggle.svelte'
+
+  export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps<'button'> {}
+  export interface ToggleRootProps extends Assign<HTMLProps<'button'>, ToggleRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { useToggle } from './use-toggle.svelte'
+  import { ToggleProvider } from './use-toggle-context'
+
+  let { pressed = $bindable<boolean>(), ...props }: ToggleRootProps = $props()
+
+  const [useToggleProps, localProps] = $derived(
+    createSplitProps<UseToggleProps>()(props, ['pressed', 'defaultPressed', 'disabled', 'onPressedChange']),
+  )
+
+  const machineProps = $derived.by<UseToggleProps>(() => ({
+    ...useToggleProps,
+    pressed,
+    onPressedChange(nextPressed) {
+      useToggleProps.onPressedChange?.(nextPressed)
+      pressed = nextPressed
+    },
+  }))
+
+  const toggle = useToggle(() => machineProps)
+  const mergedProps = $derived(mergeProps(toggle().getRootProps(), localProps))
+
+  ToggleProvider(toggle)
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/toggle/toggle-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseToggleProps } from './use-toggle.svelte';
+export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps<'button'> {
+}
+export interface ToggleRootProps extends Assign<HTMLProps<'button'>, ToggleRootBaseProps> {
+}
+declare const ToggleRoot: import("svelte").Component<ToggleRootProps, {}, "pressed">;
+type ToggleRoot = ReturnType<typeof ToggleRoot>;
+export default ToggleRoot;

package/dist/components/toggle/toggle.anatomy.d.ts

@@ -0,0 +1 @@
+export declare const toggleAnatomy: import("@zag-js/anatomy").Anatomy<"root" | "indicator">;

package/dist/components/toggle/toggle.anatomy.js

@@ -0,0 +1,2 @@
+import { createAnatomy } from '@zag-js/anatomy';
+export const toggleAnatomy = createAnatomy('toggle', ['root', 'indicator']);

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,4 @@
+export { default as Context, type ToggleContextProps as ContextProps } from './toggle-context.svelte';
+export { default as Indicator, type ToggleIndicatorProps as IndicatorProps } from './toggle-indicator.svelte';
+export { default as Root, type ToggleRootBaseProps as RootBaseProps, type ToggleRootProps as RootProps, } from './toggle-root.svelte';
+export { toggleAnatomy } from './toggle.anatomy';

package/dist/components/toggle/toggle.js

@@ -0,0 +1,4 @@
+export { default as Context } from './toggle-context.svelte';
+export { default as Indicator } from './toggle-indicator.svelte';
+export { default as Root, } from './toggle-root.svelte';
+export { toggleAnatomy } from './toggle.anatomy';

package/dist/components/toggle/use-toggle-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseToggleReturn } from './use-toggle.svelte';
+export interface UseToggleContext extends UseToggleReturn {
+}
+export declare const ToggleProvider: (opts: UseToggleContext) => void, useToggleContext: (fallback?: UseToggleContext | undefined) => UseToggleContext;

package/dist/components/toggle/use-toggle-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [ToggleProvider, useToggleContext] = createContext({
+    name: 'ToggleContext',
+    hookName: 'useToggleContext',
+    providerName: '<ToggleProvider />',
+});

package/dist/components/toggle/use-toggle.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor } from '../../types';
+import { type PropTypes } from '@zag-js/svelte';
+import * as toggle from '@zag-js/toggle';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseToggleProps extends Omit<toggle.Props, 'dir' | 'getRootNode'> {
+}
+export interface UseToggleReturn extends Accessor<toggle.Api<PropTypes>> {
+}
+export declare const useToggle: (props?: MaybeFunction<UseToggleProps>) => UseToggleReturn;

package/dist/components/toggle/use-toggle.svelte.js

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

package/dist/components/toggle-group/index.d.ts

@@ -0,0 +1,9 @@
+export type { ValueChangeDetails as ToggleGroupValueChangeDetails } from '@zag-js/toggle-group';
+export { default as ToggleGroupContext, type ToggleGroupContextProps } from './toggle-group-context.svelte';
+export { default as ToggleGroupItem, type ToggleGroupItemBaseProps, type ToggleGroupItemProps, } from './toggle-group-item.svelte';
+export { default as ToggleGroupRoot, type ToggleGroupRootBaseProps, type ToggleGroupRootProps, } from './toggle-group-root.svelte';
+export { default as ToggleGroupRootProvider, type ToggleGroupRootProviderBaseProps, type ToggleGroupRootProviderProps, } from './toggle-group-root-provider.svelte';
+export { toggleGroupAnatomy } from './toggle-group.anatomy';
+export { useToggleGroup, type UseToggleGroupProps, type UseToggleGroupReturn } from './use-toggle-group.svelte';
+export { useToggleGroupContext, type UseToggleGroupContext } from './use-toggle-group-context';
+export * as ToggleGroup from './toggle-group';

package/dist/components/toggle-group/index.js

@@ -0,0 +1,8 @@
+export { default as ToggleGroupContext } from './toggle-group-context.svelte';
+export { default as ToggleGroupItem, } from './toggle-group-item.svelte';
+export { default as ToggleGroupRoot, } from './toggle-group-root.svelte';
+export { default as ToggleGroupRootProvider, } from './toggle-group-root-provider.svelte';
+export { toggleGroupAnatomy } from './toggle-group.anatomy';
+export { useToggleGroup } from './use-toggle-group.svelte';
+export { useToggleGroupContext } from './use-toggle-group-context';
+export * as ToggleGroup from './toggle-group';

package/dist/components/toggle-group/toggle-group-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseToggleGroupContext } from './use-toggle-group-context'
+
+  export interface ToggleGroupContextProps {
+    render: Snippet<[UseToggleGroupContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useToggleGroupContext } from './use-toggle-group-context'
+
+  const { render }: ToggleGroupContextProps = $props()
+
+  const context = useToggleGroupContext()
+</script>
+
+{@render render(context)}

package/dist/components/toggle-group/toggle-group-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseToggleGroupContext } from './use-toggle-group-context';
+export interface ToggleGroupContextProps {
+    render: Snippet<[UseToggleGroupContext]>;
+}
+declare const ToggleGroupContext: import("svelte").Component<ToggleGroupContextProps, {}, "">;
+type ToggleGroupContext = ReturnType<typeof ToggleGroupContext>;
+export default ToggleGroupContext;

package/dist/components/toggle-group/toggle-group-item.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ItemProps } from '@zag-js/toggle-group'
+
+  export interface ToggleGroupItemBaseProps extends ItemProps, PolymorphicProps<'button'> {}
+  export interface ToggleGroupItemProps extends Assign<HTMLProps<'button'>, ToggleGroupItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { useToggleGroupContext } from './use-toggle-group-context'
+
+  const props: ToggleGroupItemProps = $props()
+
+  const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['value', 'disabled']))
+
+  const toggleGroup = useToggleGroupContext()
+  const mergedProps = $derived(mergeProps(toggleGroup().getItemProps(itemProps), localProps))
+</script>
+
+<Ark as="button" {...mergedProps} />

package/dist/components/toggle-group/toggle-group-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ItemProps } from '@zag-js/toggle-group';
+export interface ToggleGroupItemBaseProps extends ItemProps, PolymorphicProps<'button'> {
+}
+export interface ToggleGroupItemProps extends Assign<HTMLProps<'button'>, ToggleGroupItemBaseProps> {
+}
+declare const ToggleGroupItem: import("svelte").Component<ToggleGroupItemProps, {}, "">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
+export default ToggleGroupItem;

package/dist/components/toggle-group/toggle-group-root-provider.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseToggleGroupReturn } from './use-toggle-group.svelte'
+
+  interface RootProviderProps {
+    value: UseToggleGroupReturn
+  }
+
+  export interface ToggleGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {}
+  export interface ToggleGroupRootProviderProps extends Assign<HTMLProps<'div'>, ToggleGroupRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { ToggleGroupProvider } from './use-toggle-group-context'
+
+  let { value, ...props }: ToggleGroupRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  ToggleGroupProvider(value)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/toggle-group/toggle-group-root-provider.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseToggleGroupReturn } from './use-toggle-group.svelte';
+interface RootProviderProps {
+    value: UseToggleGroupReturn;
+}
+export interface ToggleGroupRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'> {
+}
+export interface ToggleGroupRootProviderProps extends Assign<HTMLProps<'div'>, ToggleGroupRootProviderBaseProps> {
+}
+declare const ToggleGroupRootProvider: import("svelte").Component<ToggleGroupRootProviderProps, {}, "">;
+type ToggleGroupRootProvider = ReturnType<typeof ToggleGroupRootProvider>;
+export default ToggleGroupRootProvider;

package/dist/components/toggle-group/toggle-group-root.svelte

@@ -0,0 +1,52 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseToggleGroupProps } from './use-toggle-group.svelte'
+
+  export interface ToggleGroupRootBaseProps extends UseToggleGroupProps, PolymorphicProps<'div'> {}
+  export interface ToggleGroupRootProps extends Assign<HTMLProps<'div'>, ToggleGroupRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { ToggleGroupProvider } from './use-toggle-group-context'
+  import { useToggleGroup } from './use-toggle-group.svelte'
+
+  let { value = $bindable<string[]>(), ...props }: ToggleGroupRootProps = $props()
+
+  const [useToggleGroupProps, localProps] = $derived(
+    createSplitProps<UseToggleGroupProps>()(props, [
+      'defaultValue',
+      'deselectable',
+      'disabled',
+      'id',
+      'ids',
+      'loopFocus',
+      'multiple',
+      'onValueChange',
+      'orientation',
+      'rovingFocus',
+      'value',
+    ]),
+  )
+
+  const id = $props.id()
+
+  const machineProps = $derived.by<UseToggleGroupProps>(() => ({
+    ...useToggleGroupProps,
+    id: useToggleGroupProps.id ?? id,
+    value,
+    onValueChange(details) {
+      useToggleGroupProps.onValueChange?.(details)
+      if (value != null) value = details.value
+    },
+  }))
+
+  const toggleGroup = useToggleGroup(() => machineProps)
+  const mergedProps = $derived(mergeProps(toggleGroup().getRootProps(), localProps))
+
+  ToggleGroupProvider(toggleGroup)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/toggle-group/toggle-group-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseToggleGroupProps } from './use-toggle-group.svelte';
+export interface ToggleGroupRootBaseProps extends UseToggleGroupProps, PolymorphicProps<'div'> {
+}
+export interface ToggleGroupRootProps extends Assign<HTMLProps<'div'>, ToggleGroupRootBaseProps> {
+}
+declare const ToggleGroupRoot: import("svelte").Component<ToggleGroupRootProps, {}, "value">;
+type ToggleGroupRoot = ReturnType<typeof ToggleGroupRoot>;
+export default ToggleGroupRoot;

package/dist/components/toggle-group/toggle-group.anatomy.d.ts

@@ -0,0 +1 @@
+export declare const toggleGroupAnatomy: import("@zag-js/anatomy").Anatomy<"root" | "item">;

package/dist/components/toggle-group/toggle-group.anatomy.js

@@ -0,0 +1,2 @@
+import { createAnatomy } from '@zag-js/anatomy';
+export const toggleGroupAnatomy = createAnatomy('toggle-group', ['root', 'item']);

package/dist/components/toggle-group/toggle-group.d.ts

@@ -0,0 +1,4 @@
+export { default as Context, type ToggleGroupContextProps as ContextProps } from './toggle-group-context.svelte';
+export { default as Item, type ToggleGroupItemBaseProps as ItemBaseProps, type ToggleGroupItemProps as ItemProps, } from './toggle-group-item.svelte';
+export { default as Root, type ToggleGroupRootBaseProps as RootBaseProps, type ToggleGroupRootProps as RootProps, } from './toggle-group-root.svelte';
+export { default as RootProvider, type ToggleGroupRootProviderBaseProps as RootProviderBaseProps, type ToggleGroupRootProviderProps as RootProviderProps, } from './toggle-group-root-provider.svelte';

package/dist/components/toggle-group/toggle-group.js

@@ -0,0 +1,4 @@
+export { default as Context } from './toggle-group-context.svelte';
+export { default as Item, } from './toggle-group-item.svelte';
+export { default as Root, } from './toggle-group-root.svelte';
+export { default as RootProvider, } from './toggle-group-root-provider.svelte';

package/dist/components/toggle-group/use-toggle-group-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseToggleGroupReturn } from './use-toggle-group.svelte';
+export interface UseToggleGroupContext extends UseToggleGroupReturn {
+}
+export declare const ToggleGroupProvider: (opts: UseToggleGroupContext) => void, useToggleGroupContext: (fallback?: UseToggleGroupContext | undefined) => UseToggleGroupContext;

package/dist/components/toggle-group/use-toggle-group-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../../utils/create-context';
+export const [ToggleGroupProvider, useToggleGroupContext] = createContext({
+    name: 'ToggleGroupContext',
+    hookName: 'useToggleGroupContext',
+    providerName: '<ToggleGroupProvider />',
+});

package/dist/components/toggle-group/use-toggle-group.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor, Optional } from '../../types';
+import { type PropTypes } from '@zag-js/svelte';
+import * as toggleGroup from '@zag-js/toggle-group';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseToggleGroupProps extends Optional<Omit<toggleGroup.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseToggleGroupReturn extends Accessor<toggleGroup.Api<PropTypes>> {
+}
+export declare const useToggleGroup: (props?: MaybeFunction<UseToggleGroupProps>) => UseToggleGroupReturn;

package/dist/components/toggle-group/use-toggle-group.svelte.js

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import * as toggleGroup from '@zag-js/toggle-group';
+import { runIfFn } from '@zag-js/utils';
+export const useToggleGroup = (props = {}) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(toggleGroup.machine, () => machineProps);
+    const api = $derived(toggleGroup.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,13 @@
+export type { OpenChangeDetails as TooltipOpenChangeDetails } from '@zag-js/tooltip';
+export { default as TooltipArrow, type TooltipArrowBaseProps, type TooltipArrowProps } from './tooltip-arrow.svelte';
+export { default as TooltipArrowTip, type TooltipArrowTipBaseProps, type TooltipArrowTipProps, } from './tooltip-arrow-tip.svelte';
+export { default as TooltipContent, type TooltipContentBaseProps, type TooltipContentProps, } from './tooltip-content.svelte';
+export { default as TooltipContext, type TooltipContextProps } from './tooltip-context.svelte';
+export { default as TooltipPositioner, type TooltipPositionerBaseProps, type TooltipPositionerProps, } from './tooltip-positioner.svelte';
+export { default as TooltipRoot, type TooltipRootBaseProps, type TooltipRootProps } from './tooltip-root.svelte';
+export { default as TooltipRootProvider, type TooltipRootProviderBaseProps, type TooltipRootProviderProps, } from './tooltip-root-provider.svelte';
+export { default as TooltipTrigger, type TooltipTriggerBaseProps, type TooltipTriggerProps, } from './tooltip-trigger.svelte';
+export { tooltipAnatomy } from './tooltip.anatomy';
+export { useTooltipContext, type UseTooltipContext } from './use-tooltip-context';
+export { useTooltip, type UseTooltipProps, type UseTooltipReturn } from './use-tooltip.svelte';
+export * as Tooltip from './tooltip';

package/dist/components/tooltip/index.js

@@ -0,0 +1,12 @@
+export { default as TooltipArrow } from './tooltip-arrow.svelte';
+export { default as TooltipArrowTip, } from './tooltip-arrow-tip.svelte';
+export { default as TooltipContent, } from './tooltip-content.svelte';
+export { default as TooltipContext } from './tooltip-context.svelte';
+export { default as TooltipPositioner, } from './tooltip-positioner.svelte';
+export { default as TooltipRoot } from './tooltip-root.svelte';
+export { default as TooltipRootProvider, } from './tooltip-root-provider.svelte';
+export { default as TooltipTrigger, } from './tooltip-trigger.svelte';
+export { tooltipAnatomy } from './tooltip.anatomy';
+export { useTooltipContext } from './use-tooltip-context';
+export { useTooltip } from './use-tooltip.svelte';
+export * as Tooltip from './tooltip';

package/dist/components/tooltip/tooltip-arrow-tip.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TooltipArrowTipBaseProps extends PolymorphicProps<'div'> {}
+  export interface TooltipArrowTipProps extends Assign<HTMLProps<'div'>, TooltipArrowTipBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTooltipContext } from './use-tooltip-context'
+
+  const props: TooltipArrowTipProps = $props()
+  const tooltip = useTooltipContext()
+  const mergedProps = $derived(mergeProps(tooltip().getArrowTipProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/tooltip/tooltip-arrow-tip.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TooltipArrowTipBaseProps extends PolymorphicProps<'div'> {
+}
+export interface TooltipArrowTipProps extends Assign<HTMLProps<'div'>, TooltipArrowTipBaseProps> {
+}
+declare const TooltipArrowTip: import("svelte").Component<TooltipArrowTipProps, {}, "">;
+type TooltipArrowTip = ReturnType<typeof TooltipArrowTip>;
+export default TooltipArrowTip;

package/dist/components/tooltip/tooltip-arrow.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TooltipArrowBaseProps extends PolymorphicProps<'div'> {}
+  export interface TooltipArrowProps extends Assign<HTMLProps<'div'>, TooltipArrowBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTooltipContext } from './use-tooltip-context'
+
+  const props: TooltipArrowProps = $props()
+  const tooltip = useTooltipContext()
+  const mergedProps = $derived(mergeProps(tooltip().getArrowProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />