@ark-ui/react 0.5.0 → 0.6.0

package/dist/avatar/use-avatar.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const avatar = require('@zag-js/avatar');
+const react = require('@zag-js/react');
+const React = require('react');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const avatar__namespace = /*#__PURE__*/_interopNamespaceDefault(avatar);
+
+const useAvatar = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const context = {
+    id: React.useId(),
+    getRootNode,
+    ...props
+  };
+  const [state, send] = react.useMachine(avatar__namespace.machine(context), { context });
+  return avatar__namespace.connect(state, send, react.normalizeProps);
+};
+
+exports.useAvatar = useAvatar;

package/dist/avatar/use-avatar.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+import * as avatar from '@zag-js/avatar';
+import { type Optional } from '../types';
+export type UseAvatarProps = Optional<avatar.Context, 'id'>;
+export type UseAvatarReturn = ReturnType<typeof useAvatar>;
+export declare const useAvatar: (props: UseAvatarProps) => {
+    isLoaded: boolean;
+    showFallback: boolean;
+    setSrc(src: string): void;
+    setLoaded(): void;
+    setError(): void;
+    rootProps: HTMLAttributes<HTMLElement>;
+    imageProps: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+    fallbackProps: HTMLAttributes<HTMLElement>;
+};

package/dist/avatar/use-avatar.mjs

@@ -0,0 +1,17 @@
+import * as avatar from '@zag-js/avatar';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import { useId } from 'react';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const useAvatar = (props) => {
+  const getRootNode = useEnvironmentContext();
+  const context = {
+    id: useId(),
+    getRootNode,
+    ...props
+  };
+  const [state, send] = useMachine(avatar.machine(context), { context });
+  return avatar.connect(state, send, normalizeProps);
+};
+
+export { useAvatar };

package/dist/checkbox/checkbox-input.d.ts

@@ -290,13 +290,13 @@ export declare const CheckboxInput: ForwardRefExoticComponent<{
     onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement> | undefined;
     type?: HTMLInputTypeAttribute | undefined;
     step?: string | number | undefined;
-    required?: boolean | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     height?: string | number | undefined;
+    width?: string | number | undefined;
+    required?: boolean | undefined;
+    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     size?: number | undefined;
-    width?: string | number | undefined;
 }>;

package/dist/color-picker/color-picker-channel-input.d.ts

@@ -293,15 +293,15 @@ export declare const ColorPickerChannelInput: ForwardRefExoticComponent<{
     onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement> | undefined;
     type?: HTMLInputTypeAttribute | undefined;
     step?: string | number | undefined;
-    required?: boolean | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     height?: string | number | undefined;
+    width?: string | number | undefined;
+    required?: boolean | undefined;
+    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     size?: number | undefined;
-    width?: string | number | undefined;
     channel: ExtendedColorChannel;
     orientation?: Orientation | undefined;
 }>;

package/dist/combobox/combobox-input.d.ts

@@ -290,13 +290,13 @@ export declare const ComboboxInput: ForwardRefExoticComponent<{
     onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement> | undefined;
     type?: HTMLInputTypeAttribute | undefined;
     step?: string | number | undefined;
-    required?: boolean | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     height?: string | number | undefined;
+    width?: string | number | undefined;
+    required?: boolean | undefined;
+    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     size?: number | undefined;
-    width?: string | number | undefined;
 }>;

package/dist/date-picker/date-picker-input.d.ts

@@ -290,13 +290,13 @@ export declare const DatePickerInput: ForwardRefExoticComponent<{
     onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement> | undefined;
     type?: HTMLInputTypeAttribute | undefined;
     step?: string | number | undefined;
-    required?: boolean | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     height?: string | number | undefined;
+    width?: string | number | undefined;
+    required?: boolean | undefined;
+    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     size?: number | undefined;
-    width?: string | number | undefined;
 }>;

package/dist/date-picker/date-picker-view-trigger.cjs

@@ -12,7 +12,7 @@ const datePickerContext = require('./date-picker-context.cjs');
 const DatePickerViewTrigger = forwardRef.forwardRef((props, ref) => {
   const [viewProps, localProps] = createSplitProps.createSplitProps()(props, ["view"]);
   const { getViewTriggerProps, view } = datePickerContext.useDatePickerContext();
-  const mergedProps = react.mergeProps(getViewTriggerProps({ view }), localProps);
+  const mergedProps = react.mergeProps(getViewTriggerProps({ view: viewProps.view ?? view }), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 

package/dist/date-picker/date-picker-view-trigger.mjs

@@ -8,7 +8,7 @@ import { useDatePickerContext } from './date-picker-context.mjs';
 const DatePickerViewTrigger = forwardRef((props, ref) => {
   const [viewProps, localProps] = createSplitProps()(props, ["view"]);
   const { getViewTriggerProps, view } = useDatePickerContext();
-  const mergedProps = mergeProps(getViewTriggerProps({ view }), localProps);
+  const mergedProps = mergeProps(getViewTriggerProps({ view: viewProps.view ?? view }), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 

package/dist/date-picker/date-picker-year-cell.d.ts

@@ -1,6 +1,8 @@
 import type { ForwardRefExoticComponent, ReactNode, CSSProperties, LegacyRef, Key, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, ReactEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, TransitionEventHandler } from 'react';
+import type { CellProps } from '@zag-js/date-picker';
 import { type HTMLArkProps } from '../factory';
-export type DatePickerYearCellProps = HTMLArkProps<'div'>;
+import type { Assign } from '../types';
+export type DatePickerYearCellProps = Assign<HTMLArkProps<'div'>, CellProps>;
 export declare const DatePickerYearCell: ForwardRefExoticComponent<{
     children?: ReactNode;
     slot?: string | undefined;

package/dist/editable/editable-input.d.ts

@@ -290,13 +290,13 @@ export declare const EditableInput: ForwardRefExoticComponent<{
     onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement> | undefined;
     type?: HTMLInputTypeAttribute | undefined;
     step?: string | number | undefined;
-    required?: boolean | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     height?: string | number | undefined;
+    width?: string | number | undefined;
+    required?: boolean | undefined;
+    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     size?: number | undefined;
-    width?: string | number | undefined;
 }>;

package/dist/index.cjs

@@ -9,6 +9,10 @@ const accordionContent = require('./accordion/accordion-content.cjs');
 const accordionItem = require('./accordion/accordion-item.cjs');
 const accordionTrigger = require('./accordion/accordion-trigger.cjs');
 const accordion$1 = require('@zag-js/accordion');
+const avatar = require('./avatar/avatar.cjs');
+const avatarFallback = require('./avatar/avatar-fallback.cjs');
+const avatarImage = require('./avatar/avatar-image.cjs');
+const avatar_anatomy = require('./avatar/avatar.anatomy.cjs');
 const carousel = require('./carousel/carousel.cjs');
 const carouselControl = require('./carousel/carousel-control.cjs');
 const carouselNextSlideTrigger = require('./carousel/carousel-next-slide-trigger.cjs');
@@ -244,6 +248,10 @@ Object.defineProperty(exports, 'accordionAnatomy', {
 	enumerable: true,
 	get: () => accordion$1.anatomy
 });
+exports.Avatar = avatar.Avatar;
+exports.AvatarFallback = avatarFallback.AvatarFallback;
+exports.AvatarImage = avatarImage.AvatarImage;
+exports.avatarAnatomy = avatar_anatomy.avatarAnatomy;
 exports.Carousel = carousel.Carousel;
 exports.CarouselControl = carouselControl.CarouselControl;
 exports.CarouselNextSlideTrigger = carouselNextSlideTrigger.CarouselNextSlideTrigger;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { createAnatomy } from '@zag-js/anatomy';
 export { Portal, type PortalProps } from '@zag-js/react';
 export * from './accordion';
+export * from './avatar';
 export * from './carousel';
 export * from './checkbox';
 export * from './color-picker';

package/dist/index.mjs

@@ -5,6 +5,10 @@ export { AccordionContent } from './accordion/accordion-content.mjs';
 export { AccordionItem } from './accordion/accordion-item.mjs';
 export { AccordionTrigger } from './accordion/accordion-trigger.mjs';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
+export { Avatar } from './avatar/avatar.mjs';
+export { AvatarFallback } from './avatar/avatar-fallback.mjs';
+export { AvatarImage } from './avatar/avatar-image.mjs';
+export { avatarAnatomy } from './avatar/avatar.anatomy.mjs';
 export { Carousel } from './carousel/carousel.mjs';
 export { CarouselControl } from './carousel/carousel-control.mjs';
 export { CarouselNextSlideTrigger } from './carousel/carousel-next-slide-trigger.mjs';

package/dist/number-input/number-input-field.d.ts

@@ -290,13 +290,13 @@ export declare const NumberInputField: ForwardRefExoticComponent<{
     onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement> | undefined;
     type?: HTMLInputTypeAttribute | undefined;
     step?: string | number | undefined;
-    required?: boolean | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     height?: string | number | undefined;
+    width?: string | number | undefined;
+    required?: boolean | undefined;
+    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     size?: number | undefined;
-    width?: string | number | undefined;
 }>;

package/dist/pagination/pagination.cjs

@@ -16,6 +16,7 @@ const Pagination = forwardRef.forwardRef((props, ref) => {
     props,
     [
       "count",
+      "defaultPage",
       "dir",
       "getRootNode",
       "id",

package/dist/pagination/pagination.d.ts

@@ -297,5 +297,6 @@ export declare const Pagination: ForwardRefExoticComponent<{
     count: number;
     pageSize?: number | undefined;
     siblingCount?: number | undefined;
+    defaultPage?: number | undefined;
     children: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
 }>;

package/dist/pagination/pagination.mjs

@@ -12,6 +12,7 @@ const Pagination = forwardRef((props, ref) => {
     props,
     [
       "count",
+      "defaultPage",
       "dir",
       "getRootNode",
       "id",

package/dist/pagination/use-pagination.cjs

@@ -28,12 +28,17 @@ const pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination);
 
 const usePagination = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = {
+  const initialContext = {
     id: React.useId(),
     getRootNode,
-    ...props
+    ...props,
+    page: props.defaultPage
+  };
+  const context = {
+    ...initialContext,
+    page: props.page
   };
-  const [state, send] = react.useMachine(pagination__namespace.machine(context), { context });
+  const [state, send] = react.useMachine(pagination__namespace.machine(initialContext), { context });
   return pagination__namespace.connect(state, send, react.normalizeProps);
 };
 

package/dist/pagination/use-pagination.d.ts

@@ -2,7 +2,9 @@ import type { HTMLAttributes } from 'react';
 import type { PaginationRange, EllipsisProps, PageTriggerProps } from '@zag-js/pagination/dist/pagination.types';
 import * as pagination from '@zag-js/pagination';
 import { type Optional } from '../types';
-export type UsePaginationProps = Optional<pagination.Context, 'id'>;
+export type UsePaginationProps = Optional<pagination.Context, 'id'> & {
+    defaultPage?: pagination.Context['page'];
+};
 export declare const usePagination: (props: UsePaginationProps) => {
     page: number;
     totalPages: number;

package/dist/pagination/use-pagination.mjs

@@ -5,12 +5,17 @@ import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const usePagination = (props) => {
   const getRootNode = useEnvironmentContext();
-  const context = {
+  const initialContext = {
     id: useId(),
     getRootNode,
-    ...props
+    ...props,
+    page: props.defaultPage
+  };
+  const context = {
+    ...initialContext,
+    page: props.page
   };
-  const [state, send] = useMachine(pagination.machine(context), { context });
+  const [state, send] = useMachine(pagination.machine(initialContext), { context });
   return pagination.connect(state, send, normalizeProps);
 };
 

package/dist/pin-input/pin-input-field.d.ts

@@ -293,14 +293,14 @@ export declare const PinInputField: ForwardRefExoticComponent<{
     onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement> | undefined;
     type?: HTMLInputTypeAttribute | undefined;
     step?: string | number | undefined;
-    required?: boolean | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     height?: string | number | undefined;
+    width?: string | number | undefined;
+    required?: boolean | undefined;
+    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     size?: number | undefined;
-    width?: string | number | undefined;
     index: number;
 }>;

package/dist/pressable/pressable.cjs

@@ -17,6 +17,7 @@ const Pressable = forwardRef.forwardRef((props, ref) => {
     "disabled",
     "getRootNode",
     "id",
+    "longPressDelay",
     "onLongPress",
     "onPress",
     "onPressEnd",

package/dist/pressable/pressable.d.ts

@@ -290,4 +290,5 @@ export declare const Pressable: ForwardRefExoticComponent<{
     preventFocusOnPress?: boolean | undefined;
     cancelOnPointerExit?: boolean | undefined;
     allowTextSelectionOnPress?: boolean | undefined;
+    longPressDelay?: number | undefined;
 }>;

package/dist/pressable/pressable.mjs

@@ -13,6 +13,7 @@ const Pressable = forwardRef((props, ref) => {
     "disabled",
     "getRootNode",
     "id",
+    "longPressDelay",
     "onLongPress",
     "onPress",
     "onPressEnd",

package/dist/radio-group/radio-input.d.ts

@@ -290,13 +290,13 @@ export declare const RadioInput: ForwardRefExoticComponent<{
     onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement> | undefined;
     type?: HTMLInputTypeAttribute | undefined;
     step?: string | number | undefined;
-    required?: boolean | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     height?: string | number | undefined;
+    width?: string | number | undefined;
+    required?: boolean | undefined;
+    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     size?: number | undefined;
-    width?: string | number | undefined;
 }>;

package/dist/rating-group/rating-group.d.ts

@@ -283,13 +283,13 @@ export declare const RatingGroup: ForwardRefExoticComponent<{
     onTransitionEndCapture?: TransitionEventHandler<HTMLInputElement> | undefined;
     type?: HTMLInputTypeAttribute | undefined;
     step?: string | number | undefined;
-    required?: boolean | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     height?: string | number | undefined;
+    width?: string | number | undefined;
+    required?: boolean | undefined;
+    enterKeyHint?: "search" | "send" | "enter" | "done" | "go" | "next" | "previous" | undefined;
     min?: string | number | undefined;
     size?: number | undefined;
-    width?: string | number | undefined;
     id?: string | undefined;
     name?: string | undefined;
     value?: number | undefined;

package/dist/slider/slider.d.ts

@@ -291,6 +291,7 @@ export declare const Slider: ForwardRefExoticComponent<{
     }> | undefined;
     orientation?: "horizontal" | "vertical" | undefined;
     step?: number | undefined;
+    origin?: "center" | "start" | undefined;
     invalid?: boolean | undefined;
     max?: number | undefined;
     min?: number | undefined;
@@ -303,7 +304,6 @@ export declare const Slider: ForwardRefExoticComponent<{
     }) => void) | undefined;
     getAriaValueText?: ((value: number) => string) | undefined;
     thumbAlignment?: "center" | "contain" | undefined;
-    origin?: "center" | "start" | undefined;
     focusThumbOnChange?: boolean | undefined;
     children?: ReactNode | ((context: SliderContext) => ReactNode);
 }>;

package/dist/splitter/splitter-context.d.ts

@@ -9,9 +9,8 @@ export declare const SplitterProvider: Provider<{
         min: number;
         max: number;
     } | undefined;
-    collapse(id: PanelId): void;
-    expand(id: PanelId): void;
-    toggle(id: PanelId): void;
+    setToMinSize(id: PanelId): void;
+    setToMaxSize(id: PanelId): void;
     setSize(id: PanelId, size: number): void;
     getResizeTriggerState(props: ResizeTriggerProps): {
         isDisabled: boolean;
@@ -31,9 +30,8 @@ export declare const SplitterProvider: Provider<{
         min: number;
         max: number;
     } | undefined;
-    collapse(id: PanelId): void;
-    expand(id: PanelId): void;
-    toggle(id: PanelId): void;
+    setToMinSize(id: PanelId): void;
+    setToMaxSize(id: PanelId): void;
     setSize(id: PanelId, size: number): void;
     getResizeTriggerState(props: ResizeTriggerProps): {
         isDisabled: boolean;

package/dist/splitter/splitter.cjs

@@ -7,24 +7,30 @@ const react = require('@zag-js/react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const forwardRef = require('../forward-ref.cjs');
+const runIfFn = require('../run-if-fn.cjs');
 const splitterContext = require('./splitter-context.cjs');
 const useSplitter = require('./use-splitter.cjs');
 
 const Splitter = forwardRef.forwardRef((props, ref) => {
-  const [useSplitterProps, divProps] = createSplitProps.createSplitProps()(props, [
-    "dir",
-    "getRootNode",
-    "id",
-    "ids",
-    "onResize",
-    "onResizeEnd",
-    "onResizeStart",
-    "orientation",
-    "size"
-  ]);
+  const [useSplitterProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "defaultSize",
+      "dir",
+      "getRootNode",
+      "id",
+      "ids",
+      "onResize",
+      "onResizeEnd",
+      "onResizeStart",
+      "orientation",
+      "size"
+    ]
+  );
   const splitter = useSplitter.useSplitter(useSplitterProps);
   const mergedProps = react.mergeProps(splitter.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(splitterContext.SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const view = runIfFn.runIfFn(children, splitter);
+  return /* @__PURE__ */ jsxRuntime.jsx(splitterContext.SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
 
 exports.Splitter = Splitter;

package/dist/splitter/splitter.d.ts

@@ -1,11 +1,12 @@
 import type { PanelId } from '@zag-js/splitter/dist/splitter.types';
-import type { ForwardRefExoticComponent, ReactNode, CSSProperties, LegacyRef, Key, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, ReactEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, TransitionEventHandler } from 'react';
+import type { ForwardRefExoticComponent, CSSProperties, LegacyRef, Key, AriaRole, ClipboardEventHandler, CompositionEventHandler, FocusEventHandler, FormEventHandler, ReactEventHandler, KeyboardEventHandler, MouseEventHandler, DragEventHandler, TouchEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler, AnimationEventHandler, TransitionEventHandler, ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-import { type UseSplitterProps } from './use-splitter';
-export type SplitterProps = Assign<HTMLArkProps<'div'>, UseSplitterProps>;
+import { type UseSplitterProps, type UseSplitterReturn } from './use-splitter';
+export type SplitterProps = Assign<HTMLArkProps<'div'>, UseSplitterProps & {
+    children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
+}>;
 export declare const Splitter: ForwardRefExoticComponent<{
-    children?: ReactNode;
     slot?: string | undefined;
     style?: CSSProperties | undefined;
     title?: string | undefined;
@@ -312,4 +313,11 @@ export declare const Splitter: ForwardRefExoticComponent<{
         }[];
         activeHandleId: string | null;
     }) => void) | undefined;
+    defaultSize?: {
+        id: PanelId;
+        size?: number | undefined;
+        minSize?: number | undefined;
+        maxSize?: number | undefined;
+    }[] | undefined;
+    children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
 }>;

package/dist/splitter/splitter.mjs

@@ -3,24 +3,30 @@ import { mergeProps } from '@zag-js/react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { forwardRef } from '../forward-ref.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
 import { SplitterProvider } from './splitter-context.mjs';
 import { useSplitter } from './use-splitter.mjs';
 
 const Splitter = forwardRef((props, ref) => {
-  const [useSplitterProps, divProps] = createSplitProps()(props, [
-    "dir",
-    "getRootNode",
-    "id",
-    "ids",
-    "onResize",
-    "onResizeEnd",
-    "onResizeStart",
-    "orientation",
-    "size"
-  ]);
+  const [useSplitterProps, { children, ...divProps }] = createSplitProps()(
+    props,
+    [
+      "defaultSize",
+      "dir",
+      "getRootNode",
+      "id",
+      "ids",
+      "onResize",
+      "onResizeEnd",
+      "onResizeStart",
+      "orientation",
+      "size"
+    ]
+  );
   const splitter = useSplitter(useSplitterProps);
   const mergedProps = mergeProps(splitter.rootProps, divProps);
-  return /* @__PURE__ */ jsx(SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const view = runIfFn(children, splitter);
+  return /* @__PURE__ */ jsx(SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
 
 export { Splitter };

package/dist/splitter/use-splitter.cjs

@@ -7,15 +7,39 @@ const splitter = require('@zag-js/splitter');
 const React = require('react');
 const environmentContext = require('../environment/environment-context.cjs');
 
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter);
+
 const useSplitter = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = {
+  const initialContext = {
     id: React.useId(),
     getRootNode,
-    ...props
+    ...props,
+    size: props.defaultSize
+  };
+  const context = {
+    ...initialContext,
+    size: props.size
   };
-  const [state, send] = react.useMachine(splitter.machine(context), { context });
-  return splitter.connect(state, send, react.normalizeProps);
+  const [state, send] = react.useMachine(splitter__namespace.machine(initialContext), { context });
+  return splitter__namespace.connect(state, send, react.normalizeProps);
 };
 
 exports.useSplitter = useSplitter;