@yamada-ui/transitions/dist/chunk-SNNK7SQ4.mjs.map

Yamada UI transitions components

{"version":3,"sources":["../src/flip.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport type {\n  MotionProps,\n  MotionTransition,\n  MotionTransitionVariants,\n  MotionVariants,\n} from \"@yamada-ui/motion\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport { omitThemeProps, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { motion, motionForwardRef } from \"@yamada-ui/motion\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, dataAttr, useSafeLayoutEffect } from \"@yamada-ui/utils\"\nimport { useRef, useState } from \"react\"\n\nconst variants: MotionVariants = {\n  enter: ({ ident, orientation, visible }) => ({\n    [orientation === \"horizontal\" ? \"rotateY\" : \"rotateX\"]:\n      ident === \"from\" ? (visible ? 180 : 0) : visible ? 0 : 180,\n  }),\n  exit: ({ ident, orientation }) => ({\n    [orientation === \"horizontal\" ? \"rotateY\" : \"rotateX\"]:\n      ident === \"from\" ? 0 : 180,\n  }),\n} satisfies MotionTransitionVariants\n\nexport type FlipIdent = \"from\" | \"to\"\n\nexport type FlipOrientation = \"horizontal\" | \"vertical\"\n\nexport interface FlipOptions {\n  /**\n   * Passing React elements to \"from\" is required.\n   */\n  from: ReactElement\n  /**\n   * Passing React elements to \"to\" is required.\n   */\n  to: ReactElement\n  /**\n   * You can set the initial state.\n   *\n   * @default 'from'\n   */\n  defaultValue?: FlipIdent\n  /**\n   *　The animation delay.\n   *\n   * @default 0\n   */\n  delay?: number\n  /**\n   * If `true`, the component is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The animation duration.\n   *\n   * @default 0.4\n   */\n  duration?: number\n  /**\n   * If `true`, the component is disabled.\n   *\n   * @default false\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, the component is readonly.\n   *\n   * @default false\n   * @deprecated Use `readOnly` instead.\n   */\n  isReadOnly?: boolean\n  /**\n   * The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: FlipOrientation\n  /**\n   * If `true`, the component is readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The animation transition.\n   */\n  transition?: MotionTransition\n  /**\n   * Use this when you want to control the animation from outside the component.\n   */\n  value?: FlipIdent\n  /**\n   * This is a callback function that is called when the animation state changes.\n   */\n  onChange?: (value: FlipIdent) => void\n}\n\nconst flipProps = {\n  animate: \"enter\",\n  initial: \"exit\",\n  variants,\n}\n\nexport interface FlipProps\n  extends Merge<MotionProps<\"button\">, FlipOptions>,\n    ThemeProps<\"Flip\"> {}\n\n/**\n * `Flip` is an animation component that alternates between flipping two elements.\n *\n * @see Docs https://yamada-ui.com/components/transitions/flip\n */\nexport const Flip = motionForwardRef<FlipProps, \"button\">((props, ref) => {\n  const [dimensions, setDimensions] = useState<{\n    height?: number\n    width?: number\n  }>({})\n  const fromRef = useRef<HTMLDivElement | null>(null)\n  const toRef = useRef<HTMLDivElement | null>(null)\n\n  const [styles, mergedProps] = useComponentMultiStyle(\"Flip\", props)\n  const {\n    className,\n    defaultValue = \"from\",\n    delay = 0,\n    isDisabled,\n    disabled = isDisabled,\n    duration = 0.4,\n    from,\n    isReadOnly,\n    orientation = \"horizontal\",\n    readOnly = isReadOnly,\n    to,\n    transition: transitionProp = {},\n    value: valueProp,\n    onChange: onChangeProp,\n    ...rest\n  } = omitThemeProps(mergedProps)\n  const [value, setValue] = useControllableState({\n    defaultValue: defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const visible = value === \"to\"\n  const css: CSSUIObject = {\n    h: dimensions.height ? `${dimensions.height}px` : \"auto\",\n    w: dimensions.width ? `${dimensions.width}px` : \"auto\",\n    ...styles.container,\n  }\n  const transition = {\n    delay,\n    duration,\n    ...transitionProp,\n  }\n\n  const onClick = () => {\n    if (readOnly) return\n\n    setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n  }\n\n  useSafeLayoutEffect(() => {\n    const fromElement = fromRef.current\n    const toElement = toRef.current\n\n    if (!fromElement || !toElement) return\n\n    const fromWidth = fromElement.offsetWidth\n    const fromHeight = fromElement.offsetHeight\n    const toWidth = toElement.offsetWidth\n    const toHeight = toElement.offsetHeight\n\n    if (fromWidth !== toWidth || fromHeight !== toHeight) {\n      console.warn(\n        `Dimensions do not match:\n        \"from\" element (Width: ${fromWidth}px, Height: ${fromHeight}px)\n        does not match \"to\" element (Width: ${toWidth}px, Height: ${toHeight}px).\n        Please ensure both elements have the same dimensions.`,\n      )\n    }\n\n    setDimensions({ height: fromHeight, width: fromWidth })\n  }, [fromRef, toRef])\n\n  return (\n    <motion.button\n      ref={ref}\n      type=\"button\"\n      className={cx(\"ui-flip\", `ui-flip__${orientation}`, className)}\n      data-disabled={dataAttr(disabled)}\n      data-readonly={dataAttr(readOnly)}\n      data-value={value}\n      disabled={disabled}\n      onClick={onClick}\n      __css={css}\n      {...rest}\n    >\n      <motion.span\n        ref={fromRef}\n        className={cx(\n          \"ui-flip__from\",\n          `ui-flip__from--${orientation}`,\n          className,\n        )}\n        custom={{ ident: \"from\", orientation, visible }}\n        {...flipProps}\n        transition={transition}\n        __css={{\n          ...styles.flipIdent,\n          ...styles.from,\n        }}\n      >\n        {from}\n      </motion.span>\n\n      <motion.span\n        ref={toRef}\n        className={cx(\"ui-flip__to\", `ui-flip__to--${orientation}`, className)}\n        custom={{ ident: \"to\", orientation, visible }}\n        {...flipProps}\n        transition={transition}\n        __css={{\n          ...styles.flipIdent,\n          ...styles.to,\n        }}\n      >\n        {to}\n      </motion.span>\n    </motion.button>\n  )\n})\n\nFlip.displayName = \"Flip\"\nFlip.__ui__ = \"Flip\"\n"],"mappings":"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","names":[]}