@yamada-ui/react/dist/types/components/flip/flip.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { ComponentSlotStyle, KeyframeIdent, Orientation, ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js";
import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
import { Component } from "../../core/components/index.types.js";
import "../../core/index.js";
import { HTMLMotionProps } from "../motion/index.types.js";
import { FlipStyle } from "./flip.style.js";
import "../../index.js";
import * as react_jsx_runtime9 from "react/jsx-runtime";
import * as react846 from "react";
import { ReactNode } from "react";

//#region src/components/flip/flip.d.ts
interface FlipProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemeProps<FlipStyle> {
  /**
   * Passing React elements to "from" is required.
   */
  from: ReactNode;
  /**
   * Passing React elements to "to" is required.
   */
  to: ReactNode;
  /**
   * You can set the initial state.
   *
   * @default 'from'
   */
  defaultValue?: KeyframeIdent;
  /**
   *　The animation delay.
   *
   * @default 0
   */
  delay?: number;
  /**
   * If `true`, the component is disabled.
   *
   * @default false
   */
  disabled?: boolean;
  /**
   * The animation duration.
   *
   * @default 0.4
   */
  duration?: number;
  /**
   * The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically.
   *
   * @default 'horizontal'
   */
  orientation?: Orientation;
  /**
   * If `true`, the component is readonly.
   *
   * @default false
   */
  readOnly?: boolean;
  /**
   * Use this when you want to control the animation from outside the component.
   */
  value?: KeyframeIdent;
  /**
   * This is a callback function that is called when the animation state changes.
   */
  onChange?: (value: KeyframeIdent) => void;
}
declare const FlipPropsContext: react846.Context<Partial<FlipProps> | undefined>, useFlipPropsContext: () => Partial<FlipProps> | undefined;
/**
 * `Flip` is an animation component that alternates between flipping two elements.
 *
 * @see https://yamada-ui.com/docs/components/flip
 */
declare const Flip: Component<({
  defaultValue,
  delay,
  disabled,
  duration,
  from,
  orientation,
  readOnly,
  to,
  transition,
  value: valueProp,
  onChange,
  onClick: onClickProp,
  ...rest
}: WithoutThemeProps<FlipProps, ComponentSlotStyle<"from" | "to" | "root" | "item", CSSPropObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>>, keyof FlipProps>) => react_jsx_runtime9.JSX.Element, FlipProps>;
//#endregion
export { Flip, FlipProps, FlipPropsContext, useFlipPropsContext };
//# sourceMappingURL=flip.d.ts.map