@zag-js/tabs 0.10.5 → 0.11.1

package/dist/{tabs.types.d.ts → index.d.mts}

@@ -1,5 +1,10 @@
-import type { StateMachine as S } from "@zag-js/core";
-import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator">;
+
 type IntlTranslations = {
     tablistLabel?: string;
 };
@@ -11,11 +16,11 @@ type ElementIds = Partial<{
     content: string;
     indicator: string;
 }>;
-export type TriggerProps = {
+type TriggerProps = {
     value: string;
     disabled?: boolean;
 };
-export type ContentProps = {
+type ContentProps = {
     value: string;
 };
 type PublicContext = DirectionProperty & CommonProperties & {
@@ -70,7 +75,7 @@ type PublicContext = DirectionProperty & CommonProperties & {
         value: string;
     }) => void;
 };
-export type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{
     /**
      * @computed
@@ -84,10 +89,46 @@ type ComputedContext = Readonly<{
     isVertical: boolean;
 }>;
 type PrivateContext = Context<{}>;
-export type MachineContext = PublicContext & ComputedContext & PrivateContext;
-export type MachineState = {
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
     value: "idle" | "focused";
 };
-export type State = S.State<MachineContext, MachineState>;
-export type Send = S.Send<S.AnyEventObject>;
-export {};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * The current value of the tabs.
+     */
+    value: string | null;
+    /**
+     * The value of the tab that is currently focused.
+     */
+    focusedValue: string | null;
+    /**
+     * The previous values of the tabs in sequence of selection.
+     */
+    previousValues: string[];
+    /**
+     * Sets the value of the tabs.
+     */
+    setValue(value: string): void;
+    /**
+     * Clears the value of the tabs.
+     */
+    clearValue(): void;
+    /**
+     * Sets the indicator rect to the tab with the given id.
+     */
+    setIndicatorRect(id: string | null | undefined): void;
+    rootProps: T["element"];
+    tablistProps: T["element"];
+    getTriggerProps(props: TriggerProps): T["button"];
+    contentGroupProps: T["element"];
+    getContentProps({ value }: ContentProps): T["element"];
+    indicatorProps: T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { ContentProps, UserDefinedContext as Context, TriggerProps, anatomy, connect, machine };

package/dist/index.d.ts

@@ -1,4 +1,134 @@
-export { anatomy } from "./tabs.anatomy";
-export { connect } from "./tabs.connect";
-export { machine } from "./tabs.machine";
-export type { UserDefinedContext as Context, TriggerProps, ContentProps } from "./tabs.types";
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator">;
+
+type IntlTranslations = {
+    tablistLabel?: string;
+};
+type ElementIds = Partial<{
+    root: string;
+    trigger: string;
+    tablist: string;
+    contentGroup: string;
+    content: string;
+    indicator: string;
+}>;
+type TriggerProps = {
+    value: string;
+    disabled?: boolean;
+};
+type ContentProps = {
+    value: string;
+};
+type PublicContext = DirectionProperty & CommonProperties & {
+    /**
+     * The ids of the elements in the tabs. Useful for composition.
+     */
+    ids?: ElementIds;
+    /**
+     * Specifies the localized strings that identifies the accessibility elements and their states
+     */
+    translations: IntlTranslations;
+    /**
+     * Whether the keyboard navigation will loop from last tab to first, and vice versa.
+     * @default true
+     */
+    loop: boolean;
+    /**
+     * The selected tab id
+     */
+    value: string | null;
+    /**
+     * The orientation of the tabs. Can be `horizontal` or `vertical`
+     * - `horizontal`: only left and right arrow key navigation will work.
+     * - `vertical`: only up and down arrow key navigation will work.
+     *
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * The activation mode of the tabs. Can be `manual` or `automatic`
+     * - `manual`: Tabs are activated when clicked or press `enter` key.
+     * - `automatic`: Tabs are activated when receiving focus
+     * @default "automatic"
+     */
+    activationMode?: "manual" | "automatic";
+    /**
+     * Callback to be called when the selected/active tab changes
+     */
+    onChange?: (details: {
+        value: string | null;
+    }) => void;
+    /**
+     * Callback to be called when the focused tab changes
+     */
+    onFocus?: (details: {
+        value: string | null;
+    }) => void;
+    /**
+     * Callback to be called when a tab's close button is clicked
+     */
+    onDelete?: (details: {
+        value: string;
+    }) => void;
+};
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{
+    /**
+     * @computed
+     * Whether the tab is in the horizontal orientation
+     */
+    isHorizontal: boolean;
+    /**
+     * @computed
+     * Whether the tab is in the vertical orientation
+     */
+    isVertical: boolean;
+}>;
+type PrivateContext = Context<{}>;
+type MachineContext = PublicContext & ComputedContext & PrivateContext;
+type MachineState = {
+    value: "idle" | "focused";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * The current value of the tabs.
+     */
+    value: string | null;
+    /**
+     * The value of the tab that is currently focused.
+     */
+    focusedValue: string | null;
+    /**
+     * The previous values of the tabs in sequence of selection.
+     */
+    previousValues: string[];
+    /**
+     * Sets the value of the tabs.
+     */
+    setValue(value: string): void;
+    /**
+     * Clears the value of the tabs.
+     */
+    clearValue(): void;
+    /**
+     * Sets the indicator rect to the tab with the given id.
+     */
+    setIndicatorRect(id: string | null | undefined): void;
+    rootProps: T["element"];
+    tablistProps: T["element"];
+    getTriggerProps(props: TriggerProps): T["button"];
+    contentGroupProps: T["element"];
+    getContentProps({ value }: ContentProps): T["element"];
+    indicatorProps: T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { ContentProps, UserDefinedContext as Context, TriggerProps, anatomy, connect, machine };