@destyler/tabs 0.0.7-beta.7 → 0.1.0

package/dist/index.d.ts

@@ -1,207 +1,220 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { StateMachine, Machine } from '@zag-js/core';
-
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator">;
+import * as _destyler_anatomy0 from "@destyler/anatomy";
+import * as _destyler_xstate0 from "@destyler/xstate";
+import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
+import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
 
+//#region src/anatomy.d.ts
+declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator">;
+//#endregion
+//#region src/types.d.ts
 interface ValueChangeDetails {
-    value: string;
+  value: string;
 }
 interface FocusChangeDetails {
-    focusedValue: string;
+  focusedValue: string;
+}
+interface NavigateDetails {
+  value: string | null;
+  node: HTMLAnchorElement;
 }
 interface IntlTranslations {
-    listLabel?: string | undefined;
+  listLabel?: string | undefined;
 }
 type ElementIds = Partial<{
-    root: string;
-    trigger: string;
-    list: string;
-    content: string;
-    indicator: string;
+  root: string;
+  trigger: string;
+  list: string;
+  content: string;
+  indicator: string;
 }>;
 interface PublicContext extends DirectionProperty, CommonProperties {
-    /**
-     * The ids of the elements in the tabs. Useful for composition.
-     */
-    ids?: ElementIds | undefined;
-    /**
-     * Specifies the localized strings that identifies the accessibility elements and their states
-     */
-    translations?: IntlTranslations | undefined;
-    /**
-     * Whether the keyboard navigation will loop from last tab to first, and vice versa.
-     * @default true
-     */
-    loopFocus: 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' | undefined;
-    /**
-     * 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' | undefined;
-    /**
-     * Callback to be called when the selected/active tab changes
-     */
-    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
-    /**
-     * Callback to be called when the focused tab changes
-     */
-    onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
-    /**
-     * Whether the tab is composite
-     */
-    composite: boolean;
-    /**
-     * Whether the active tab can be deselected when clicking on it.
-     */
-    deselectable?: boolean | undefined;
+  /**
+   * The ids of the elements in the tabs. Useful for composition.
+   */
+  ids?: ElementIds | undefined;
+  /**
+   * Specifies the localized strings that identifies the accessibility elements and their states
+   */
+  translations?: IntlTranslations | undefined;
+  /**
+   * Whether the keyboard navigation will loop from last tab to first, and vice versa.
+   * @default true
+   */
+  loopFocus: 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' | undefined;
+  /**
+   * 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' | undefined;
+  /**
+   * Callback to be called when the selected/active tab changes
+   */
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  /**
+   * Callback to be called when the focused tab changes
+   */
+  onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
+  /**
+   * Whether the tab is composite
+   */
+  composite: boolean;
+  /**
+   * Whether the active tab can be deselected when clicking on it.
+   */
+  deselectable?: boolean | undefined;
+  /**
+   * 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 IndicatorState {
-    rendered: boolean;
-    rect: Partial<{
-        left: string;
-        top: string;
-        width: string;
-        height: string;
-    }>;
-    transition: boolean;
+  rendered: boolean;
+  rect: Partial<{
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+  }>;
+  transition: boolean;
 }
 interface PrivateContext {
-    /**
-     * @internal
-     * The focused tab id
-     */
-    focusedValue: string | null;
-    /**
-     * @internal
-     * The active tab indicator details
-     */
-    indicatorState: IndicatorState;
-    /**
-     * @internal
-     * Function to clean up the observer for the active tab's rect
-     */
-    indicatorCleanup?: VoidFunction | null | undefined;
-    /**
-     * @internal
-     * Whether the radio group is in server-side rendering
-     */
-    ssr: boolean;
-}
-interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
+  /**
+   * @internal
+   * The focused tab id
+   */
+  focusedValue: string | null;
+  /**
+   * @internal
+   * The active tab indicator details
+   */
+  indicatorState: IndicatorState;
+  /**
+   * @internal
+   * Function to clean up the observer for the active tab's rect
+   */
+  indicatorCleanup?: VoidFunction | null | undefined;
+  /**
+   * @internal
+   * Whether the radio group is in server-side rendering
+   */
+  ssr: boolean;
 }
+interface MachineContext extends PublicContext, ComputedContext, PrivateContext {}
 interface MachineState {
-    value: 'idle' | 'focused';
+  value: 'idle' | 'focused';
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+type State = XState<MachineContext, MachineState>;
+type Send = XSend<AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, AnyEventObject>;
 interface TriggerProps {
-    /**
-     * The value of the tab
-     */
-    value: string;
-    /**
-     * Whether the tab is disabled
-     */
-    disabled?: boolean | undefined;
+  /**
+   * The value of the tab
+   */
+  value: string;
+  /**
+   * Whether the tab is disabled
+   */
+  disabled?: boolean | undefined;
 }
 interface TriggerState {
-    /**
-     * Whether the tab is selected
-     */
-    selected: boolean;
-    /**
-     * Whether the tab is focused
-     */
-    focused: boolean;
-    /**
-     * Whether the tab is disabled
-     */
-    disabled: boolean;
+  /**
+   * Whether the tab is selected
+   */
+  selected: boolean;
+  /**
+   * Whether the tab is focused
+   */
+  focused: boolean;
+  /**
+   * Whether the tab is disabled
+   */
+  disabled: boolean;
 }
 interface ContentProps {
-    /**
-     * The value of the tab
-     */
-    value: string;
+  /**
+   * The value of the tab
+   */
+  value: string;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
-    /**
-     * The current value of the tabs.
-     */
-    value: string | null;
-    /**
-     * The value of the tab that is currently focused.
-     */
-    focusedValue: string | null;
-    /**
-     * 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 value
-     */
-    setIndicatorRect: (value: string) => void;
-    /**
-     * Synchronizes the tab index of the content element.
-     * Useful when rendering tabs within a select or combobox
-     */
-    syncTabIndex: () => void;
-    /**
-     * Set focus on the selected tab trigger
-     */
-    focus: () => void;
-    /**
-     * Selects the next tab
-     */
-    selectNext: (fromValue?: string) => void;
-    /**
-     * Selects the previous tab
-     */
-    selectPrev: (fromValue?: string) => void;
-    /**
-     * Returns the state of the trigger with the given props
-     */
-    getTriggerState: (props: TriggerProps) => TriggerState;
-    getRootProps: () => T['element'];
-    getListProps: () => T['element'];
-    getTriggerProps: (props: TriggerProps) => T['button'];
-    getContentProps: (props: ContentProps) => T['element'];
-    getIndicatorProps: () => T['element'];
+  /**
+   * The current value of the tabs.
+   */
+  value: string | null;
+  /**
+   * The value of the tab that is currently focused.
+   */
+  focusedValue: string | null;
+  /**
+   * 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 value
+   */
+  setIndicatorRect: (value: string) => void;
+  /**
+   * Synchronizes the tab index of the content element.
+   * Useful when rendering tabs within a select or combobox
+   */
+  syncTabIndex: () => void;
+  /**
+   * Set focus on the selected tab trigger
+   */
+  focus: () => void;
+  /**
+   * Selects the next tab
+   */
+  selectNext: (fromValue?: string) => void;
+  /**
+   * Selects the previous tab
+   */
+  selectPrev: (fromValue?: string) => void;
+  /**
+   * Returns the state of the trigger with the given props
+   */
+  getTriggerState: (props: TriggerProps) => TriggerState;
+  getRootProps: () => T['element'];
+  getListProps: () => T['element'];
+  getTriggerProps: (props: TriggerProps) => T['button'];
+  getContentProps: (props: ContentProps) => T['element'];
+  getIndicatorProps: () => T['element'];
 }
-
+//#endregion
+//#region src/connect.d.ts
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-declare const props: ("ids" | "translations" | "loopFocus" | "value" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "id" | "dir" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "translations" | "loopFocus" | "value" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "id" | "dir" | "getRootNode">];
+//#endregion
+//#region src/machine.d.ts
+declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+//#endregion
+//#region src/props.d.ts
+declare const props: ("value" | "ids" | "translations" | "loopFocus" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate" | "dir" | "id" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "ids" | "translations" | "loopFocus" | "orientation" | "activationMode" | "onValueChange" | "onFocusChange" | "composite" | "deselectable" | "navigate" | "dir" | "id" | "getRootNode">];
 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 Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };
+//#endregion
+export { type MachineApi as Api, type ContentProps, type UserDefinedContext as Context, type ElementIds, type FocusChangeDetails, type IntlTranslations, type Service, type TriggerProps, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };