@ark-ui/react 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -6,10 +6,13 @@ const anatomy = require('@zag-js/anatomy');
 const react = require('@zag-js/react');
 const accordion = require('./accordion/accordion.cjs');
 const accordionContent = require('./accordion/accordion-content.cjs');
-const accordionIcon = require('./accordion/accordion-icon.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');
@@ -239,13 +242,16 @@ Object.defineProperty(exports, 'Portal', {
 });
 exports.Accordion = accordion.Accordion;
 exports.AccordionContent = accordionContent.AccordionContent;
-exports.AccordionIcon = accordionIcon.AccordionIcon;
 exports.AccordionItem = accordionItem.AccordionItem;
 exports.AccordionTrigger = accordionTrigger.AccordionTrigger;
 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

@@ -2,10 +2,13 @@ export { createAnatomy } from '@zag-js/anatomy';
 export { Portal } from '@zag-js/react';
 export { Accordion } from './accordion/accordion.mjs';
 export { AccordionContent } from './accordion/accordion-content.mjs';
-export { AccordionIcon } from './accordion/accordion-icon.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;

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

@@ -1,8 +1,10 @@
 import type { HTMLAttributes } from 'react';
-import type { PanelId, ResizeTriggerProps, PanelProps } from '@zag-js/splitter/dist/splitter.types';
-import { type Context } from '@zag-js/splitter';
+import type { PanelId } from '@zag-js/splitter/dist/splitter.types';
+import * as splitter from '@zag-js/splitter';
 import { type Optional } from '../types';
-export type UseSplitterProps = Optional<Context, 'id'>;
+export type UseSplitterProps = Optional<splitter.Context, 'id'> & {
+    defaultSize?: splitter.Context['size'];
+};
 export type UseSplitterReturn = ReturnType<typeof useSplitter>;
 export declare const useSplitter: (props: UseSplitterProps) => {
     isFocused: boolean;
@@ -11,11 +13,10 @@ export declare const useSplitter: (props: UseSplitterProps) => {
         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): {
+    getResizeTriggerState(props: splitter.ResizeTriggerProps): {
         isDisabled: boolean;
         isFocused: boolean;
         panelIds: string[];
@@ -24,6 +25,6 @@ export declare const useSplitter: (props: UseSplitterProps) => {
         value: number;
     };
     rootProps: HTMLAttributes<HTMLElement>;
-    getPanelProps(props: PanelProps): HTMLAttributes<HTMLElement>;
-    getResizeTriggerProps(props: ResizeTriggerProps): HTMLAttributes<HTMLElement>;
+    getPanelProps(props: splitter.PanelProps): HTMLAttributes<HTMLElement>;
+    getResizeTriggerProps(props: splitter.ResizeTriggerProps): HTMLAttributes<HTMLElement>;
 };

package/dist/splitter/use-splitter.mjs

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

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

@@ -290,13 +290,13 @@ export declare const SwitchInput: 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/tags-input/tag-input.d.ts

@@ -290,15 +290,15 @@ export declare const TagInput: 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: string | number;
     value: string;
     disabled?: boolean | undefined;