@zag-js/tabs 0.82.1 → 1.0.0

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { Service, EventObject } from '@zag-js/core';
+import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator">;
 
@@ -25,7 +25,7 @@ type ElementIds = Partial<{
     content: string;
     indicator: string;
 }>;
-interface PublicContext extends DirectionProperty, CommonProperties {
+interface TabsProps extends DirectionProperty, CommonProperties {
     /**
      * The ids of the elements in the tabs. Useful for composition.
      */
@@ -38,11 +38,16 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Whether the keyboard navigation will loop from last tab to first, and vice versa.
      * @default true
      */
-    loopFocus: boolean;
+    loopFocus?: boolean | undefined;
     /**
-     * The selected tab id
+     * The controlled selected tab value
      */
-    value: string | null;
+    value?: string | null | undefined;
+    /**
+     * The initial selected tab value when rendered.
+     * Use when you don't need to control the selected tab value.
+     */
+    defaultValue?: string | null | undefined;
     /**
      * The orientation of the tabs. Can be `horizontal` or `vertical`
      * - `horizontal`: only left and right arrow key navigation will work.
@@ -70,7 +75,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * Whether the tab is composite
      */
-    composite: boolean;
+    composite?: boolean | undefined;
     /**
      * Whether the active tab can be deselected when clicking on it.
      */
@@ -79,20 +84,36 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Function to navigate to the selected tab when clicking on it.
      * Useful if tab triggers are anchor elements.
      */
-    navigate: (details: NavigateDetails) => void;
-}
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{}>;
-interface PrivateContext {
-}
-interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
-}
-interface MachineState {
-    value: "idle" | "focused";
+    navigate?: ((details: NavigateDetails) => void) | undefined;
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+type PropsWithDefault = "orientation" | "activationMode" | "loopFocus";
+type TabsSchema = {
+    state: "idle" | "focused";
+    props: RequiredBy<TabsProps, PropsWithDefault>;
+    context: {
+        ssr: boolean;
+        value: string | null;
+        focusedValue: string | null;
+        indicatorTransition: boolean;
+        indicatorRect: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+        };
+    };
+    refs: {
+        indicatorCleanup: VoidFunction | null | undefined;
+    };
+    computed: {
+        focused: boolean;
+    };
+    action: string;
+    guard: string;
+    effect: string;
+    event: EventObject;
+};
+type TabsService = Service<TabsSchema>;
 interface TriggerProps {
     /**
      * The value of the tab
@@ -123,7 +144,7 @@ interface ContentProps {
      */
     value: string;
 }
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface TabsApi<T extends PropTypes = PropTypes> {
     /**
      * The current value of the tabs.
      */
@@ -172,15 +193,15 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getIndicatorProps(): T["element"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: Service<TabsSchema>, normalize: NormalizeProps<T>): TabsApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.MachineConfig<TabsSchema>;
 
-declare const props: ("dir" | "id" | "value" | "orientation" | "getRootNode" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "value" | "orientation" | "getRootNode" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate">];
+declare const props: (keyof TabsProps)[];
+declare const splitProps: <Props extends Partial<TabsProps>>(props: Props) => [Partial<TabsProps>, Omit<Props, keyof TabsProps>];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];
 declare const splitContentProps: <Props extends ContentProps>(props: Props) => [ContentProps, Omit<Props, "value">];
 
-export { type MachineApi as Api, type ContentProps, type UserDefinedContext as Context, type ElementIds, type FocusChangeDetails, type IntlTranslations, type NavigateDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };
+export { type TabsApi as Api, type ContentProps, type ElementIds, type FocusChangeDetails, type IntlTranslations, type NavigateDetails, type TabsProps as Props, type TabsService as Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { Service, EventObject } from '@zag-js/core';
+import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator">;
 
@@ -25,7 +25,7 @@ type ElementIds = Partial<{
     content: string;
     indicator: string;
 }>;
-interface PublicContext extends DirectionProperty, CommonProperties {
+interface TabsProps extends DirectionProperty, CommonProperties {
     /**
      * The ids of the elements in the tabs. Useful for composition.
      */
@@ -38,11 +38,16 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Whether the keyboard navigation will loop from last tab to first, and vice versa.
      * @default true
      */
-    loopFocus: boolean;
+    loopFocus?: boolean | undefined;
     /**
-     * The selected tab id
+     * The controlled selected tab value
      */
-    value: string | null;
+    value?: string | null | undefined;
+    /**
+     * The initial selected tab value when rendered.
+     * Use when you don't need to control the selected tab value.
+     */
+    defaultValue?: string | null | undefined;
     /**
      * The orientation of the tabs. Can be `horizontal` or `vertical`
      * - `horizontal`: only left and right arrow key navigation will work.
@@ -70,7 +75,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * Whether the tab is composite
      */
-    composite: boolean;
+    composite?: boolean | undefined;
     /**
      * Whether the active tab can be deselected when clicking on it.
      */
@@ -79,20 +84,36 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Function to navigate to the selected tab when clicking on it.
      * Useful if tab triggers are anchor elements.
      */
-    navigate: (details: NavigateDetails) => void;
-}
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{}>;
-interface PrivateContext {
-}
-interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
-}
-interface MachineState {
-    value: "idle" | "focused";
+    navigate?: ((details: NavigateDetails) => void) | undefined;
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+type PropsWithDefault = "orientation" | "activationMode" | "loopFocus";
+type TabsSchema = {
+    state: "idle" | "focused";
+    props: RequiredBy<TabsProps, PropsWithDefault>;
+    context: {
+        ssr: boolean;
+        value: string | null;
+        focusedValue: string | null;
+        indicatorTransition: boolean;
+        indicatorRect: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+        };
+    };
+    refs: {
+        indicatorCleanup: VoidFunction | null | undefined;
+    };
+    computed: {
+        focused: boolean;
+    };
+    action: string;
+    guard: string;
+    effect: string;
+    event: EventObject;
+};
+type TabsService = Service<TabsSchema>;
 interface TriggerProps {
     /**
      * The value of the tab
@@ -123,7 +144,7 @@ interface ContentProps {
      */
     value: string;
 }
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface TabsApi<T extends PropTypes = PropTypes> {
     /**
      * The current value of the tabs.
      */
@@ -172,15 +193,15 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getIndicatorProps(): T["element"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: Service<TabsSchema>, normalize: NormalizeProps<T>): TabsApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.MachineConfig<TabsSchema>;
 
-declare const props: ("dir" | "id" | "value" | "orientation" | "getRootNode" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "value" | "orientation" | "getRootNode" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate">];
+declare const props: (keyof TabsProps)[];
+declare const splitProps: <Props extends Partial<TabsProps>>(props: Props) => [Partial<TabsProps>, Omit<Props, keyof TabsProps>];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];
 declare const splitContentProps: <Props extends ContentProps>(props: Props) => [ContentProps, Omit<Props, "value">];
 
-export { type MachineApi as Api, type ContentProps, type UserDefinedContext as Context, type ElementIds, type FocusChangeDetails, type IntlTranslations, type NavigateDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };
+export { type TabsApi as Api, type ContentProps, type ElementIds, type FocusChangeDetails, type IntlTranslations, type NavigateDetails, type TabsProps as Props, type TabsService as Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };