@ark-ui/svelte 0.4.0 → 5.0.0-0

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

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

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

@@ -0,0 +1,20 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import * as steps from '@zag-js/steps';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+export const useSteps = (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(steps.machine, () => machineProps);
+    const api = $derived(steps.connect(service, normalizeProps));
+    return () => api;
+};

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

@@ -0,0 +1,12 @@
+export type { CheckedChangeDetails as SwitchCheckedChangeDetails } from '@zag-js/switch';
+export { default as SwitchContext, type SwitchContextProps } from './switch-context.svelte';
+export { default as SwitchControl, type SwitchControlBaseProps, type SwitchControlProps } from './switch-control.svelte';
+export { default as SwitchHiddenInput, type SwitchHiddenInputBaseProps, type SwitchHiddenInputProps, } from './switch-hidden-input.svelte';
+export { default as SwitchLabel, type SwitchLabelBaseProps, type SwitchLabelProps } from './switch-label.svelte';
+export { default as SwitchRoot, type SwitchRootBaseProps, type SwitchRootProps } from './switch-root.svelte';
+export { default as SwitchRootProvider, type SwitchRootProviderBaseProps, type SwitchRootProviderProps, } from './switch-root-provider.svelte';
+export { default as SwitchThumb, type SwitchThumbBaseProps, type SwitchThumbProps } from './switch-thumb.svelte';
+export { switchAnatomy } from './switch.anatomy';
+export { useSwitch, type UseSwitchProps, type UseSwitchReturn } from './use-switch.svelte';
+export { useSwitchContext, type UseSwitchContext } from './use-switch-context';
+export * as Switch from './switch';

package/dist/components/switch/index.js

@@ -0,0 +1,11 @@
+export { default as SwitchContext } from './switch-context.svelte';
+export { default as SwitchControl } from './switch-control.svelte';
+export { default as SwitchHiddenInput, } from './switch-hidden-input.svelte';
+export { default as SwitchLabel } from './switch-label.svelte';
+export { default as SwitchRoot } from './switch-root.svelte';
+export { default as SwitchRootProvider, } from './switch-root-provider.svelte';
+export { default as SwitchThumb } from './switch-thumb.svelte';
+export { switchAnatomy } from './switch.anatomy';
+export { useSwitch } from './use-switch.svelte';
+export { useSwitchContext } from './use-switch-context';
+export * as Switch from './switch';

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

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseSwitchContext } from './use-switch-context'
+
+  export interface SwitchContextProps {
+    render: Snippet<[UseSwitchContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useSwitchContext } from './use-switch-context'
+
+  let { render }: SwitchContextProps = $props()
+
+  const switchMachine = useSwitchContext()
+</script>
+
+{@render render(switchMachine)}

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

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

package/dist/components/switch/switch-control.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface SwitchControlBaseProps extends PolymorphicProps<'span'> {}
+  export interface SwitchControlProps extends Assign<HTMLProps<'span'>, SwitchControlBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useSwitchContext } from './use-switch-context'
+
+  const props: SwitchControlProps = $props()
+
+  const switchMachine = useSwitchContext()
+  const mergedProps = $derived(mergeProps(switchMachine().getControlProps(), props))
+</script>
+
+<Ark as="span" {...mergedProps} />

package/dist/components/switch/switch-control.svelte.d.ts

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

package/dist/components/switch/switch-hidden-input.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface SwitchHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface SwitchHiddenInputProps extends Assign<HTMLProps<'input'>, SwitchHiddenInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useSwitchContext } from './use-switch-context'
+
+  const props: SwitchHiddenInputProps = $props()
+
+  const switchMachine = useSwitchContext()
+  const mergedProps = $derived(mergeProps(switchMachine().getHiddenInputProps(), props))
+</script>
+
+<Ark as="input" {...mergedProps} />

package/dist/components/switch/switch-hidden-input.svelte.d.ts

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

package/dist/components/switch/switch-label.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface SwitchLabelBaseProps extends PolymorphicProps<'span'> {}
+  export interface SwitchLabelProps extends Assign<HTMLProps<'span'>, SwitchLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useSwitchContext } from './use-switch-context'
+
+  const props: SwitchLabelProps = $props()
+
+  const switchMachine = useSwitchContext()
+  const mergedProps = $derived(mergeProps(switchMachine().getLabelProps(), props))
+</script>
+
+<Ark as="span" {...mergedProps} />

package/dist/components/switch/switch-label.svelte.d.ts

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

package/dist/components/switch/switch-root-provider.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseSwitchReturn } from './use-switch.svelte'
+
+  export interface SwitchRootProviderBaseProps extends PolymorphicProps<'label'> {
+    value: UseSwitchReturn
+  }
+  export interface SwitchRootProviderProps extends Assign<HTMLProps<'label'>, SwitchRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { SwitchProvider } from './use-switch-context'
+
+  let { value, ...props }: SwitchRootProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  SwitchProvider(value)
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/switch/switch-root-provider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseSwitchReturn } from './use-switch.svelte';
+export interface SwitchRootProviderBaseProps extends PolymorphicProps<'label'> {
+    value: UseSwitchReturn;
+}
+export interface SwitchRootProviderProps extends Assign<HTMLProps<'label'>, SwitchRootProviderBaseProps> {
+}
+declare const SwitchRootProvider: import("svelte").Component<SwitchRootProviderProps, {}, "">;
+type SwitchRootProvider = ReturnType<typeof SwitchRootProvider>;
+export default SwitchRootProvider;

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

@@ -0,0 +1,53 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseSwitchProps } from './use-switch.svelte'
+
+  export interface SwitchRootBaseProps extends UseSwitchProps, PolymorphicProps<'label'> {}
+  export interface SwitchRootProps extends Assign<HTMLProps<'label'>, SwitchRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useSwitch } from './use-switch.svelte'
+  import { SwitchProvider } from './use-switch-context'
+
+  let { checked = $bindable(), ...props }: SwitchRootProps = $props()
+  const providedId = $props.id()
+
+  const [useSwitchProps, localProps] = $derived(
+    createSplitProps<UseSwitchProps>()(props, [
+      'checked',
+      'defaultChecked',
+      'disabled',
+      'form',
+      'id',
+      'ids',
+      'invalid',
+      'label',
+      'name',
+      'onCheckedChange',
+      'readOnly',
+      'required',
+      'value',
+    ]),
+  )
+
+  const resolvedProps = $derived<UseSwitchProps>({
+    ...useSwitchProps,
+    id: useSwitchProps.id ?? providedId,
+    checked,
+    onCheckedChange(details) {
+      useSwitchProps.onCheckedChange?.(details)
+      if (checked !== undefined) checked = details.checked
+    },
+  })
+
+  const switchMachine = useSwitch(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(switchMachine().getRootProps(), localProps))
+
+  SwitchProvider(switchMachine)
+</script>
+
+<Ark as="label" {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseSwitchProps } from './use-switch.svelte';
+export interface SwitchRootBaseProps extends UseSwitchProps, PolymorphicProps<'label'> {
+}
+export interface SwitchRootProps extends Assign<HTMLProps<'label'>, SwitchRootBaseProps> {
+}
+declare const SwitchRoot: import("svelte").Component<SwitchRootProps, {}, "checked">;
+type SwitchRoot = ReturnType<typeof SwitchRoot>;
+export default SwitchRoot;

package/dist/components/switch/switch-thumb.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface SwitchThumbBaseProps extends PolymorphicProps<'span'> {}
+  export interface SwitchThumbProps extends Assign<HTMLProps<'span'>, SwitchThumbBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useSwitchContext } from './use-switch-context'
+
+  const props: SwitchThumbProps = $props()
+
+  const switchMachine = useSwitchContext()
+  const mergedProps = $derived(mergeProps(switchMachine().getThumbProps(), props))
+</script>
+
+<Ark as="span" {...mergedProps} />

package/dist/components/switch/switch-thumb.svelte.d.ts

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

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

@@ -0,0 +1 @@
+export { anatomy as switchAnatomy } from '@zag-js/switch';

package/dist/components/switch/switch.anatomy.js

@@ -0,0 +1 @@
+export { anatomy as switchAnatomy } from '@zag-js/switch';

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,8 @@
+export type { CheckedChangeDetails } from '@zag-js/switch';
+export { default as Context, type SwitchContextProps as ContextProps } from './switch-context.svelte';
+export { default as Control, type SwitchControlBaseProps as ControlBaseProps, type SwitchControlProps as ControlProps, } from './switch-control.svelte';
+export { default as HiddenInput, type SwitchHiddenInputBaseProps as HiddenInputBaseProps, type SwitchHiddenInputProps as HiddenInputProps, } from './switch-hidden-input.svelte';
+export { default as Label, type SwitchLabelBaseProps as LabelBaseProps, type SwitchLabelProps as LabelProps, } from './switch-label.svelte';
+export { default as Root, type SwitchRootBaseProps as RootBaseProps, type SwitchRootProps as RootProps, } from './switch-root.svelte';
+export { default as RootProvider, type SwitchRootProviderBaseProps as RootProviderBaseProps, type SwitchRootProviderProps as RootProviderProps, } from './switch-root-provider.svelte';
+export { default as Thumb, type SwitchThumbBaseProps as ThumbBaseProps, type SwitchThumbProps as ThumbProps, } from './switch-thumb.svelte';

package/dist/components/switch/switch.js

@@ -0,0 +1,7 @@
+export { default as Context } from './switch-context.svelte';
+export { default as Control, } from './switch-control.svelte';
+export { default as HiddenInput, } from './switch-hidden-input.svelte';
+export { default as Label, } from './switch-label.svelte';
+export { default as Root, } from './switch-root.svelte';
+export { default as RootProvider, } from './switch-root-provider.svelte';
+export { default as Thumb, } from './switch-thumb.svelte';

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

@@ -0,0 +1,4 @@
+import type { UseSwitchReturn } from './use-switch.svelte';
+export interface UseSwitchContext extends UseSwitchReturn {
+}
+export declare const SwitchProvider: (opts: UseSwitchContext) => void, useSwitchContext: (fallback?: UseSwitchContext | undefined) => UseSwitchContext;

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

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

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

@@ -0,0 +1,9 @@
+import type { Accessor, Optional } from '../../types';
+import { type PropTypes } from '@zag-js/svelte';
+import * as zagSwitch from '@zag-js/switch';
+import { type MaybeFunction } from '@zag-js/utils';
+export interface UseSwitchProps extends Optional<Omit<zagSwitch.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseSwitchReturn extends Accessor<zagSwitch.Api<PropTypes>> {
+}
+export declare const useSwitch: (props?: MaybeFunction<UseSwitchProps>) => () => zagSwitch.Api<import("@zag-js/types").PropTypes>;

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

@@ -0,0 +1,30 @@
+import { useEnvironmentContext } from '../../providers/environment';
+import { useLocaleContext } from '../../providers/locale';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import * as zagSwitch from '@zag-js/switch';
+import { runIfFn } from '@zag-js/utils';
+import { useFieldContext } from '../field';
+export const useSwitch = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const field = useFieldContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ids: {
+                label: field?.().ids.label,
+                hiddenInput: field?.().ids.control,
+            },
+            disabled: field?.().disabled,
+            readOnly: field?.().readOnly,
+            invalid: field?.().invalid,
+            required: field?.().required,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(zagSwitch.machine, () => machineProps);
+    const api = $derived(zagSwitch.connect(service, normalizeProps));
+    return () => api;
+};

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

@@ -0,0 +1,12 @@
+export type { FocusChangeDetails as TabsFocusChangeDetails, ValueChangeDetails as TabsValueChangeDetails, } from '@zag-js/tabs';
+export { default as TabContent, type TabsContentBaseProps as TabContentBaseProps, type TabsContentProps as TabContentProps, } from './tabs-content.svelte';
+export { default as TabsContext, type TabsContextProps } from './tabs-context.svelte';
+export { default as TabIndicator, type TabsIndicatorBaseProps as TabIndicatorBaseProps, type TabsIndicatorProps as TabIndicatorProps, } from './tabs-indicator.svelte';
+export { default as TabList, type TabsListBaseProps as TabListBaseProps, type TabsListProps as TabListProps, } from './tabs-list.svelte';
+export { default as TabsRootProvider, type TabsRootProviderBaseProps, type TabsRootProviderProps, } from './tabs-root-provider.svelte';
+export { default as TabsRoot, type TabsRootBaseProps, type TabsRootProps } from './tabs-root.svelte';
+export { default as TabTrigger, type TabsTriggerBaseProps as TabTriggerBaseProps, type TabsTriggerProps as TabTriggerProps, } from './tabs-trigger.svelte';
+export { tabsAnatomy } from './tabs.anatomy';
+export { useTabsContext, type UseTabsContext } from './use-tabs-context';
+export { useTabs, type UseTabsProps, type UseTabsReturn } from './use-tabs.svelte';
+export * as Tabs from './tabs';

package/dist/components/tabs/index.js

@@ -0,0 +1,11 @@
+export { default as TabContent, } from './tabs-content.svelte';
+export { default as TabsContext } from './tabs-context.svelte';
+export { default as TabIndicator, } from './tabs-indicator.svelte';
+export { default as TabList, } from './tabs-list.svelte';
+export { default as TabsRootProvider, } from './tabs-root-provider.svelte';
+export { default as TabsRoot } from './tabs-root.svelte';
+export { default as TabTrigger, } from './tabs-trigger.svelte';
+export { tabsAnatomy } from './tabs.anatomy';
+export { useTabsContext } from './use-tabs-context';
+export { useTabs } from './use-tabs.svelte';
+export * as Tabs from './tabs';

package/dist/components/tabs/tabs-content.svelte

@@ -0,0 +1,38 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ContentProps } from '@zag-js/tabs'
+
+  export interface TabsContentBaseProps extends ContentProps, PolymorphicProps<'div'> {}
+  export interface TabsContentProps extends Assign<HTMLProps<'div'>, TabsContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { PresenceProvider, usePresence, type UsePresenceProps } from '../presence'
+  import { useTabsContext } from './use-tabs-context'
+
+  const props: TabsContentProps = $props()
+  const [contentProps, localProps] = createSplitProps<ContentProps>()(props, ['value'])
+
+  const tabs = useTabsContext()
+  const renderStrategyProps = useRenderStrategyPropsContext()
+
+  const machineProps = $derived.by<UsePresenceProps>(() => ({
+    ...renderStrategyProps,
+    present: tabs().value === contentProps.value,
+    immediate: true,
+  }))
+
+  const presence = usePresence(() => machineProps)
+
+  const mergedProps = $derived(mergeProps(tabs().getContentProps(contentProps), localProps))
+
+  PresenceProvider(presence)
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} />
+{/if}

package/dist/components/tabs/tabs-content.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ContentProps } from '@zag-js/tabs';
+export interface TabsContentBaseProps extends ContentProps, PolymorphicProps<'div'> {
+}
+export interface TabsContentProps extends Assign<HTMLProps<'div'>, TabsContentBaseProps> {
+}
+declare const TabsContent: import("svelte").Component<TabsContentProps, {}, "">;
+type TabsContent = ReturnType<typeof TabsContent>;
+export default TabsContent;

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

@@ -0,0 +1,16 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import { useTabsContext, type UseTabsContext } from './use-tabs-context'
+
+  export interface TabsContextProps {
+    render: Snippet<[UseTabsContext]>
+  }
+</script>
+
+<script lang="ts">
+  const { render }: TabsContextProps = $props()
+
+  const context = useTabsContext()
+</script>
+
+{@render render?.(context)}

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

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

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

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

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

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

package/dist/components/tabs/tabs-list.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TabsListBaseProps extends PolymorphicProps<'div'> {}
+  export interface TabsListProps extends Assign<HTMLProps<'div'>, TabsListBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTabsContext } from './use-tabs-context'
+
+  const props: TabsListProps = $props()
+  const tabs = useTabsContext()
+
+  const mergedProps = $derived(mergeProps(tabs().getListProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/tabs/tabs-list.svelte.d.ts

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

package/dist/components/tabs/tabs-root-provider.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseTabsReturn } from './use-tabs.svelte'
+
+  interface RootProviderProps {
+    value: UseTabsReturn
+  }
+
+  export interface TabsRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RenderStrategyProps {}
+  export interface TabsRootProviderProps extends Assign<HTMLProps<'div'>, TabsRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { TabsProvider } from './use-tabs-context'
+  import {
+    RenderStrategyPropsProvider,
+    splitRenderStrategyProps,
+    type RenderStrategyProps,
+  } from '../../utils/render-strategy'
+
+  const props: TabsRootProviderProps = $props()
+
+  const [renderStrategyProps, tabsProps] = $derived(splitRenderStrategyProps(props))
+  const [rootProviderProps, localProps] = $derived(createSplitProps<RootProviderProps>()(tabsProps, ['value']))
+
+  const mergedProps = $derived(mergeProps(rootProviderProps.value().getRootProps(), localProps))
+
+  TabsProvider(() => rootProviderProps.value())
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/tabs/tabs-root-provider.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseTabsReturn } from './use-tabs.svelte';
+interface RootProviderProps {
+    value: UseTabsReturn;
+}
+export interface TabsRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RenderStrategyProps {
+}
+export interface TabsRootProviderProps extends Assign<HTMLProps<'div'>, TabsRootProviderBaseProps> {
+}
+import { type RenderStrategyProps } from '../../utils/render-strategy';
+declare const TabsRootProvider: import("svelte").Component<TabsRootProviderProps, {}, "">;
+type TabsRootProvider = ReturnType<typeof TabsRootProvider>;
+export default TabsRootProvider;