@accelint/design-toolkit/dist/components/view-stack/index.d.ts

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { UniqueId } from '@accelint/core';
import { ViewStackProps, ViewStackViewProps, ViewStackTriggerProps, ViewStackContextValue } from './types.js';
import '@accelint/bus';
import 'react-aria-components';
import './events.js';

declare const ViewStackContext: react.Context<ViewStackContextValue>;
declare const ViewStackEventHandlers: {
    readonly back: (stack: UniqueId) => void;
    readonly clear: (stack: UniqueId) => void;
    readonly push: (view: UniqueId) => void;
    readonly reset: (stack: UniqueId) => void;
};
declare function useViewStackEmit(): {
    readonly back: (stack: UniqueId) => void;
    readonly clear: (stack: UniqueId) => void;
    readonly push: (view: UniqueId) => void;
    readonly reset: (stack: UniqueId) => void;
};
declare function ViewStackTrigger({ children, for: types }: ViewStackTriggerProps): react_jsx_runtime.JSX.Element;
declare namespace ViewStackTrigger {
    var displayName: string;
}
declare function ViewStackView({ id, children }: ViewStackViewProps): react_jsx_runtime.JSX.Element | null;
declare namespace ViewStackView {
    var displayName: string;
}
/**
 * ViewStack - Stack-based view manager for pushing/popping views
 *
 * Manages a stack of views that can be pushed, popped, or reset programmatically
 * and is intended for building nested or stacked UIs such as Drawer views.
 *
 * @example
 * const ids = {
 *   stack: uuid(),
 *   a: uuid(),
 *   b: uuid(),
 * };
 *
 * <ViewStack id={ids.stack} defaultView={ids.a}>
 *   <ViewStack.View id={ids.a}>
 *     <ViewStack.Trigger for={ids.b}>
 *       <Button>
 *         Push View B
 *       </Button>
 *     </ViewStack.Trigger>
 *     <h1>View A</h1>
 *   </ViewStack.View>
 *   <ViewStack.View id={ids.b}>
 *     <ViewStack.Trigger for='back'>
 *       <Button variant='icon'>
 *         <Icon>
 *           <ChevronLeft />
 *         </Icon>
 *       </Button>
 *     </ViewStack.Trigger>
 *     <h1>View B</h1>
 *   </ViewStack.View>
 * </ViewStack>
 */
declare function ViewStack({ id, children, defaultView, onChange, }: ViewStackProps): react_jsx_runtime.JSX.Element;
declare namespace ViewStack {
    var displayName: string;
    var View: typeof ViewStackView;
    var Trigger: typeof ViewStackTrigger;
}

export { ViewStack, ViewStackContext, ViewStackEventHandlers, useViewStackEmit };